ein aus. scroll-margin-top schafft den Versatz unter dem festen Header, sonst verschwindet der Sektionsanfang beim Anklicken eines Menüpunkts dahinter. Versatz tunebar via --jid-anchor-offset (Default 130px). ============================================================ */ .jid-anchor { display: block; width: 0; height: 0; overflow: hidden; scroll-margin-top: var(--jid-anchor-offset, 130px); } /* ============================================= Footer-Feinschliff (Modul "JID Footer") ============================================= */ /* Kontaktzeile: Icon oben ausgerichtet, Abstand zum Text, Text als linksbündiger Block */ .footer .jid-footer-contact { display: flex !important; align-items: flex-start; text-align: left; } .footer .jid-footer-contact > i { flex: 0 0 auto; margin-right: .65rem; margin-top: .2em; } .footer .jid-footer-contact-txt { display: block; flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.45; } /* Instagram-/Social-Icon in Button-Farbe (--btn-color). Überschreibt die weiße Theme-Regel oben inkl. -webkit-text-fill-color (das color schlägt). */ footer .navbar-nav.social .nav-link i, footer .share-list .nav-link i { color: var(--btn-color, #dd1e4b) !important; -webkit-text-fill-color: var(--btn-color, #dd1e4b) !important; background-image: none !important; } footer .navbar-nav.social .nav-link:hover i, footer .share-list .nav-link:hover i { color: var(--btn-color, #dd1e4b) !important; -webkit-text-fill-color: var(--btn-color, #dd1e4b) !important; opacity: .8; } /* ============================================================ Slider-/Hero-Section: Hintergrund IMMER #F5F5F5 (ueberschreibt --hero-bg-color / Theme-Flaechenton, Haupt + LP) ============================================================ */ #slider { background-color: #f5f5f5 !important; } .full-slider .swiper-slide.jid-slide-plain, .no-slider .swiper-slide.jid-slide-plain { background-color: #f5f5f5 !important; } /* ============================================================ Modul "Text (zentriert)" (jid-richtext) ------------------------------------------------------------ Zentrierte Überschrift (ohne Akzentlinie) + Editor-Text. Bild-Ausrichtung kommt aus dem CKE5-Profil "jid_richtext" und landet als figure.image-style-* im HTML – hier gestylt, da die Leverage-main.css diese Klassen nicht kennt. ============================================================ */ /* #region Text zentriert */ /* Überschrift: zentriert, ohne die Akzentlinie aus main.css */ .jid-richtext h2.featured { text-align: center; } .jid-richtext h2.featured::before { content: none !important; display: none !important; } /* Text-Container: Floats der seitlichen Bilder einschließen (Clearfix) */ .jid-richtext-body::after { content: ""; display: table; clear: both; } /* --- CKE5-Bilder: Grundlayout (Default = zentriert als Block) --- */ .jid-richtext-body figure.image { display: table; margin: 1.5rem auto; max-width: 100%; } .jid-richtext-body figure.image img { display: block; width: 100%; height: auto; } .jid-richtext-body figure.image figcaption { display: table-caption; caption-side: bottom; font-size: .85rem; color: #777; padding-top: .4rem; text-align: center; } /* --- Blockausrichtung ("Text umbrechen" / break text) --- */ .jid-richtext-body figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; } .jid-richtext-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; } .jid-richtext-body figure.image.image-style-align-center, .jid-richtext-body figure.image.image-style-block-align-center { margin-left: auto; margin-right: auto; } /* --- Seitlich mit Textumfluss ("wrap text") --- */ .jid-richtext-body figure.image.image-style-align-left { float: left; margin: .25rem 1.75rem 1rem 0; max-width: 50%; } .jid-richtext-body figure.image.image-style-align-right, .jid-richtext-body figure.image.image-style-side { float: right; margin: .25rem 0 1rem 1.75rem; max-width: 50%; } /* --- Inline-Bild --- */ .jid-richtext-body .image-inline { display: inline-block; vertical-align: baseline; max-width: 100%; } .jid-richtext-body img.image_resized { height: auto; } /* Mobile: seitliche Bilder volle Breite, kein Float */ @media (max-width: 575px) { .jid-richtext-body figure.image.image-style-align-left, .jid-richtext-body figure.image.image-style-align-right, .jid-richtext-body figure.image.image-style-side { float: none; max-width: 100%; margin-left: auto; margin-right: auto; } } /* #endregion Text zentriert */ /* ============================================================ Section-Hintergrund "Navy" → Sekundärfarbe aus dem Color-Theme ------------------------------------------------------------ Statt festem Navy folgt die Fläche jetzt --secondary-color des jeweiligen Templates (Haupt = JID Color Theme, LP = LP Color Theme). Auf der Hauptseite ist das weiterhin #212443 (= altes Navy), auf LPs die dortige Sekundärfarbe. Gilt für alle Module, die die Hintergrund-Option nutzen. ============================================================ */ .bg-section-navy { background-color: var(--secondary-color, #212443) !important; } /* ============================================================ MOBILE-OPTIMIERUNGEN (gezielte Fixes) ============================================================ */ /* ---------------------------------------------------------- 1. LP-Bild+Text auf Mobile: Bild oben, Text darunter, egal ob im Modul links/rechts gewählt. ---------------------------------------------------------- */ @media (max-width: 767px) { /* Feste Höhen der Hero-Section auflösen */ section.lp-bildtext.hero, section.lp-bildtext .swiper-container, section.lp-bildtext .swiper-wrapper, section.lp-bildtext .swiper-slide { height: auto !important; min-height: 0 !important; max-height: none !important; } section.lp-bildtext.hero { padding-top: 2rem !important; padding-bottom: 2rem !important; } /* Slide-Overlay transparent (farbige Section bleibt) */ section.lp-bildtext .swiper-slide { background-color: transparent !important; background-image: none !important; } /* Swiper-Slide auf Column-Flex, damit order greift */ section.lp-bildtext .swiper-slide { display: flex !important; flex-direction: column !important; position: relative !important; overflow: visible !important; } /* Bild-Media: aus absoluter Position befreien, immer oben, volle Breite. Gilt für lp-media-right UND lp-media-left. */ section.lp-bildtext .lp-hero-media, section.lp-bildtext .lp-hero-media.lp-media-right, section.lp-bildtext .lp-hero-media.lp-media-left, section.lp-bildtext .lp-corner { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; order: -1 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 1.5rem 0 !important; padding: 0 !important; transform: none !important; float: none !important; } /* Bilder darin responsiv machen */ section.lp-bildtext .lp-hero-media img, section.lp-bildtext .lp-hero-media.lp-media-right img, section.lp-bildtext .lp-hero-media.lp-media-left img { width: 100% !important; height: auto !important; max-width: 100% !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; } /* Text-Content darunter, volle Breite, linksbündig */ section.lp-bildtext .slide-content { width: 100% !important; max-width: 100% !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; height: auto !important; order: 0 !important; transform: none !important; } section.lp-bildtext .slide-content .row, section.lp-bildtext .slide-content .col-12 { height: auto !important; width: 100% !important; max-width: 100% !important; } section.lp-bildtext .slide-content .left { text-align: left !important; align-self: flex-start !important; padding: 0 1rem !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } /* AOS-Animationen deaktivieren */ section.lp-bildtext [data-aos] { opacity: 1 !important; transform: none !important; } } /* ---------------------------------------------------------- 1b. TABLET (768-991px): Bild 1/3 NEBEN dem Text, auf der im Modul gewählten Seite (links/rechts) – wie Desktop, nur kompakter. Wichtig: Das Bild wird zu einem echten Flex-Item im Slide. Die Seite steuern wir per `order`, NICHT per left/right – denn left/right greifen an einem `position: relative`-Element im normalen Fluss nicht, weshalb "Bild rechts" vorher links/ oben hängen blieb. ---------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { /* Feste Hero-/Swiper-Höhen auflösen, sonst zentriert die Row in einem viel zu hohen Slide mit Leerraum */ section.lp-bildtext.hero, section.lp-bildtext .swiper-container, section.lp-bildtext .swiper-wrapper, section.lp-bildtext .swiper-slide { height: auto !important; min-height: 0 !important; max-height: none !important; } section.lp-bildtext.hero { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* Slide-Overlay transparent (farbige Section bleibt) */ section.lp-bildtext .swiper-slide { background-color: transparent !important; background-image: none !important; } /* Slide = Flex-Row: Bild + Text nebeneinander */ section.lp-bildtext .swiper-slide { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; position: relative !important; overflow: visible !important; } /* Bild: aus der absoluten Desktop-Position lösen, in den Flow, 1/3 Breite. Seite kommt über `order` weiter unten. */ section.lp-bildtext .lp-hero-media, section.lp-bildtext .lp-hero-media.lp-media-left, section.lp-bildtext .lp-hero-media.lp-media-right { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; flex: 0 0 33% !important; width: 33% !important; max-width: 33% !important; height: auto !important; margin: 0 !important; } section.lp-bildtext .lp-hero-media img { width: 100% !important; height: auto !important; max-width: 100% !important; } /* Text: restliche Breite */ section.lp-bildtext .slide-content { position: relative !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; height: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; } /* Reihenfolge = Bild-Seite: Bild LINKS → Bild zuerst, Text danach Bild RECHTS → Text zuerst, Bild danach (Bild landet rechts) */ section.lp-bildtext .lp-hero-media.lp-media-left { order: 1 !important; } section.lp-bildtext .lp-hero-media.lp-media-left ~ .slide-content { order: 2 !important; } section.lp-bildtext:has(.lp-media-left) .slide-content { order: 2 !important; } section.lp-bildtext .lp-hero-media.lp-media-right { order: 2 !important; } section.lp-bildtext .lp-hero-media.lp-media-right ~ .slide-content { order: 1 !important; } section.lp-bildtext:has(.lp-media-right) .slide-content { order: 1 !important; } /* Text-Innenraum: altes Prozent-Padding zurücksetzen, linksbündig */ section.lp-bildtext .slide-content .left { padding-left: 1.75rem !important; padding-right: 1.75rem !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; align-self: center !important; } /* Überschriften auf Tablet moderater */ section.lp-bildtext .slide-content h1, section.lp-bildtext .slide-content .title, section.lp-bildtext .slide-content h2 { font-size: 2.2rem !important; line-height: 1.15 !important; word-break: normal !important; overflow-wrap: normal !important; -webkit-hyphens: auto !important; -ms-hyphens: auto !important; hyphens: auto !important; } /* AOS am Bild/Text neutralisieren, damit der Transform nicht die Flex-Positionierung verschiebt */ section.lp-bildtext [data-aos] { opacity: 1 !important; transform: none !important; } } /* ---------------------------------------------------------- 1c. DESKTOP (>=992px): Ueberschrift & Text NIE ueber dem Bild. Im Bleed-Layout liegt das Bild seitlich absolut (left/right:10%), der Text steht im Flow ueber die volle Breite -> lange, seitlich ausgerichtete Ueberschriften ragen ins Bild. Fix: Textspalte auf ihre Haelfte begrenzen und an den Aussenrand ankern. Reserve pro Element via --lp-text-max ueberschreibbar (groesser = mehr Textbreite, aber Ueberlappungs-Risiko). Wichtig zur Klassenlage: Bild LINKS -> Text-Wrapper hat .right Bild RECHTS -> Text-Wrapper hat .left ---------------------------------------------------------- */ @media (min-width: 992px) { /* Bild links -> Text rechts: max. rechte Haelfte, an rechten Rand */ section.lp-bildtext .lp-hero-media.lp-media-left ~ .slide-content .col-12 > .right, section.lp-bildtext:has(.lp-media-left) .slide-content .col-12 > .right { max-width: var(--lp-text-max, 50%) !important; margin-left: auto !important; margin-right: 0 !important; } /* Bild rechts -> Text links: max. linke Haelfte, an linken Rand */ section.lp-bildtext .lp-hero-media.lp-media-right ~ .slide-content .col-12 > .left, section.lp-bildtext:has(.lp-media-right) .slide-content .col-12 > .left { max-width: var(--lp-text-max, 50%) !important; margin-right: auto !important; margin-left: 0 !important; } /* Sicherheitsnetz: Ueberschrift bricht um statt ins Bild zu laufen. ACHTUNG: break-word hat hier mitten im Wort getrennt, weil der Text-Wrapper auf 50% begrenzt ist und "Unternehmensraum" breiter ist als die Spalte. Stattdessen automatische Silbentrennung – das haelt die Ueberschrift ebenso im Rahmen, aber mit echtem Trennstrich statt Buchstabensalat. */ section.lp-bildtext .slide-content .super { overflow-wrap: normal; word-wrap: normal; word-break: normal; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } } /* ---------------------------------------------------------- 2. Slider-Overlay entfernen: .slide-content::before (main.css:4082 – background-color + opacity 0.7/0.8) ---------------------------------------------------------- */ #slider .slide-content::before, .full-slider .slide-content::before, .no-slider .slide-content::before, section.lp-bildtext .slide-content::before { background-color: transparent !important; background-image: none !important; opacity: 0 !important; content: none !important; display: none !important; } /* ---------------------------------------------------------- 3. Menü-Abstand + Horizontal-Overflow-Fix - Body/HTML: kein horizontales Scrollen - Container: einheitliches Padding - Sticky-Header: gleiches Padding wie normal Auf Tablet/Handy war der "Beratung buchen"-Button initial abgeschnitten, weil der Container über Viewport ragt bis das Modal-CSS greift. ---------------------------------------------------------- */ html, body { overflow-x: hidden !important; max-width: 100% !important; } @media (max-width: 991px) { header .navbar-expand, header .navbar-expand > .container, header .navbar-expand > .container.header { padding-left: 1rem !important; padding-right: 1rem !important; max-width: 100% !important; } /* CTA-Button darf nicht über Rand ragen */ header .navbar-expand .navbar-nav.action { margin-right: 0 !important; } header .navbar-expand .navbar-nav.action .btn { padding-left: .9rem !important; padding-right: .9rem !important; white-space: nowrap !important; } header .navbar-expand .navbar-nav.action .btn i { margin-right: .35rem !important; } } @media (min-width: 992px) { header .navbar-expand > .container, header .navbar-expand > .container.header { padding-left: 15px !important; padding-right: 15px !important; } } /* ---------------------------------------------------------- 4. Dropdown-Pfeil: Icon-i klickbar machen für Toggle HTML: Angebote Der soll den Link-Klick abfangen. ---------------------------------------------------------- */ #menu .nav-item.dropdown .nav-link .icon-arrow-down { display: inline-block; padding: .4rem .6rem; margin-left: .5rem; cursor: pointer; position: relative; z-index: 2; } /* ============================================================ 5. Slider-Bild Aspect-Ratio erhalten (Hauptseiten-Hero) ------------------------------------------------------------ Auf Tablet/Handy werden die person-Bilder im Slider gestaucht. Grund: Container schmaler, aber img nimmt volle Breite. object-fit: contain erhält Proportionen. ============================================================ */ @media (max-width: 991px) { /* Bilder: Proportionen erhalten, Person rechts */ #slider .full-image img, .full-slider .full-image img, #slider .swiper-slide > img, .full-slider .swiper-slide > img, #slider img.full-image, .full-slider img.full-image { object-fit: contain !important; object-position: right center !important; } /* Videos: screenfüllend wie am Desktop */ #slider .full-image video, .full-slider .full-image video, #slider .swiper-slide video, .full-slider .swiper-slide video, #slider video.full-image, .full-slider video.full-image { object-fit: cover !important; object-position: center center !important; } } /* ============================================================ 6. Bild+Text Mobile: Überlappung verhindern ------------------------------------------------------------ .slide-content ist absolut positioniert und überlagert das Bild. Auf Mobile muss es unter dem Bild stehen. ============================================================ */ @media (max-width: 767px) { section.lp-bildtext .slide-content { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; z-index: 1 !important; padding: 1.5rem 1rem !important; } } /* ============================================================ Editor-Links (CKE5-Richtext) – Hover-Highlight ------------------------------------------------------------ Gilt für im CKEditor gesetzte Links in den Richtext-Ausgaben: .jid-richtext = Section des "Text (zentriert)"-Moduls .jid-richtext-body = Text-Wrapper darin .lp-bildtext .description = Bild+Text-Modul (LP) Buttons (.btn) sind ausgenommen. - Ruhezustand: Link bleibt wie er ist (Grundfarbe unangetastet). - Hover/Fokus: Schrift WEISS, Hintergrund = Sekundärfarbe des Themes (var(--secondary-color)). Kleines Padding + Radius -> sauberes Highlight, kein Springen. Der Farbwechsel gilt auch für Kind- Elemente (:hover *), damit eine im Editor gesetzte Inline- Schriftfarbe zuverlässig überschrieben wird. ============================================================ */ .jid-richtext a:not(.btn), .jid-richtext-body a:not(.btn), .lp-bildtext .description a:not(.btn) { text-decoration: none; padding: .02em .18em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .15s ease, background-color .15s ease; } /* Link selbst: weiße Schrift + Sekundär-Hintergrund */ .jid-richtext a:not(.btn):hover, .jid-richtext a:not(.btn):focus-visible, .jid-richtext-body a:not(.btn):hover, .jid-richtext-body a:not(.btn):focus-visible, .lp-bildtext .description a:not(.btn):hover, .lp-bildtext .description a:not(.btn):focus-visible { color: #fff !important; -webkit-text-fill-color: #fff !important; background-color: var(--secondary-color, #212443) !important; text-decoration: none !important; } /* Kind-Elemente (z.B. Inline-Fontcolor-Spans): nur Schrift weiß, kein eigener Hintergrund, damit der Link-Hintergrund durchscheint */ .jid-richtext a:not(.btn):hover *, .jid-richtext a:not(.btn):focus-visible *, .jid-richtext-body a:not(.btn):hover *, .jid-richtext-body a:not(.btn):focus-visible *, .lp-bildtext .description a:not(.btn):hover *, .lp-bildtext .description a:not(.btn):focus-visible * { color: #fff !important; -webkit-text-fill-color: #fff !important; background-color: transparent !important; } /* ============================================================ "Keine Farbverläufe" – Überschriften ------------------------------------------------------------ Ist im Farb-Modul "Keine Farbverläufe (Buttons & Überschriften)" aktiv, setzt der Head body.jid-btn-flat. Buttons sind darüber schon abgedeckt (--btn-color-2 = --btn-color + Footer-Block unten). Hier kommen die Überschriften dazu. Drei Verlaufsquellen an Überschriften im Projekt: default.css:169 .effect-static-text – DER Hauptfall. Verlauf 45° secondary → primary, per background-clip: text auf den Text geclippt + text-fill-color: transparent. Haengt an "03. Text + Bild LP" (h2.super.effect-static-text) und am Hero- Titel. Faellt optisch nur dann kaum auf, wenn Primaer und Sekundaer aehnlich sind. main.css:264 h2.featured:before – die Akzentlinie ueber der H2 (gleicher 45°-Verlauf). Betrifft alle "03. Text + Bild"-Ueberschriften. main.css:1346 .form .message h3 – Erfolgsmeldung des Kontaktformulars. Hat KEIN eigenes color, daher hier explizit auf die Primaerfarbe. Der h1–h6-Block deckt .effect-static-text und evtl. weitere Textverlaeufe ab: er nimmt das Verlaufsbild raus und gibt die Farbe an currentColor zurueck. Bewusst OHNE feste Farbe – dann greift das color des Elements: h2.super (main.css:282) und .lp-bildtext .super (jid-landingpage.css:65) sind bereits var(--primary-color), weisse Ueberschriften (.bg-section-navy, Footer) bleiben weiss. Wo kein Verlauf liegt: wirkungslos. Die Hover-Verlaeufe der Angebote-Karten (#card-… :hover h4) bleiben unangetastet: ID-Spezifitaet (1,1,1) schlaegt diesen Block (0,1,2) – so gewollt, dort aendert sich nichts. Ebenso bleibt .effect-static-text auf NICHT-Ueberschriften (Icons etc.) unberuehrt. ============================================================ */ body.jid-btn-flat h2.featured:before { background-image: none !important; background-color: var(--primary-color) !important; } body.jid-btn-flat .form .message h3 { background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } /* Textverläufe an Überschriften abflachen (u. a. .effect-static-text) */ body.jid-btn-flat h1, body.jid-btn-flat h2, body.jid-btn-flat h3, body.jid-btn-flat h4, body.jid-btn-flat h5, body.jid-btn-flat h6, body.jid-btn-flat .slide-content .title, body.jid-btn-flat h1.effect-static-text, body.jid-btn-flat h2.effect-static-text, body.jid-btn-flat h3.effect-static-text, body.jid-btn-flat h4.effect-static-text { background-image: none !important; -webkit-background-clip: border-box !important; -moz-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; } /* ============================================================ "Button ohne Verlauf" – auch für den Footer-CTA ------------------------------------------------------------ Der Footer-Button bezieht seinen Verlauf NICHT aus --btn-color-2 (der "gleiche-Stops"-Trick greift dort also nicht). Ist im Farb- Modul "Button ohne Verlauf" aktiv, setzt der Head die Klasse body.jid-btn-flat – damit flachen wir hier den Footer-Button auf die reine Button-Farbe ab (Basis + Hover, inkl. evtl. Verlaufs- Overlay über :before/:after). Der Footer enthält nur den einen CTA, daher .btn generisch. !important, um die LP-Footer-Regeln aus jid-landingpage.css zuverlässig zu überschreiben. ============================================================ */ body.jid-btn-flat footer .btn, body.jid-btn-flat .footer .btn, body.jid-btn-flat footer .btn:hover, body.jid-btn-flat .footer .btn:hover, body.jid-btn-flat footer .btn:focus, body.jid-btn-flat .footer .btn:focus { background-image: none !important; background-color: var(--btn-color) !important; border-color: var(--btn-color) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.jid-btn-flat footer .btn:before, body.jid-btn-flat .footer .btn:before, body.jid-btn-flat footer .btn:after, body.jid-btn-flat .footer .btn:after { display: none !important; background-image: none !important; }