/*! * bergle.de - Standort-Kacheln * * Vereinheitlicht Karte, Personenkacheln und Bilder auf den Standortseiten: * gleiche Kachelhoehe, gleiche Bildausschnitte, keine Zwischenraeume. * * Wirkt automatisch auf jeder Standortseite - die Selektoren sind strukturell * (:has), es ist keine Aenderung im HTML notwendig ausser dem im . * * Erkannt werden zwei Reihen: * Kartenreihe = Sektion, deren Reihe den Karten-Platzhalter enthaelt * Bilderreihe = Sektion, deren Reihe einen News-Slider in einer * halbbreiten Spalte enthaelt (Slider + Luftbild) * Andere Slider auf der Seite (Partnerlogos, Produkt-Slider) bleiben * unberuehrt, weil sie in ganzbreiten Spalten stehen. * * ---- Stellschrauben ------------------------------------------------------- * --bg-tile-h Hoehe von Karte + Personenkacheln (Desktop) * --bg-tile-gap Abstand zwischen den Kacheln (0 = randlos) * --bg-media-ratio Seitenverhaeltnis des Luftbilds * -------------------------------------------------------------------------- */ :root { --bg-tile-h: 450px; --bg-tile-gap: 0px; --bg-media-ratio: 620 / 325; } /* ========================================================================= 1. Reihenabstaende: keine Treppenstufen zwischen Karte, Personen, Bildern ========================================================================= */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) { padding-top: 0 !important; padding-bottom: var(--bg-tile-gap) !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Bilderreihe schliesst oben an; der Textblock darunter behaelt seinen Abstand. */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] .n2-section-smartslider) { padding-top: 0 !important; margin-top: 0 !important; } /* ========================================================================= 2. Gleiche Spaltenhoehe innerhalb der Reihe ========================================================================= */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) > .sppb-row-container > .sppb-row, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] .n2-section-smartslider) > .sppb-row-container > .sppb-row { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: var(--bg-tile-gap); row-gap: var(--bg-tile-gap); margin-left: 0; margin-right: 0; } .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) > .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"], .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] .n2-section-smartslider) > .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] { flex: 0 0 calc(50% - var(--bg-tile-gap) / 2); max-width: calc(50% - var(--bg-tile-gap) / 2); padding-left: 0; padding-right: 0; display: flex; flex-direction: column; } /* Die Kartenreihe ist so hoch wie die Karte - die Kacheln wachsen mit. */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) > .sppb-row-container > .sppb-row { min-height: var(--bg-tile-h); } /* ========================================================================= 3. Vertikal durchstrecken (Breiten bleiben unberuehrt) ========================================================================= */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-column, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-column > .sppb-column-addons, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-column-addons > .sppb-section, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-section > .sppb-container-inner, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-container-inner > .sppb-row.sppb-nested-row, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-nested-row > [class*="sppb-col-"] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* Die verschachtelte Reihe (Portrait 5/12 + Text 7/12) bleibt nebeneinander. */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-container-inner > .sppb-row.sppb-nested-row { flex-direction: row; align-items: stretch; margin-left: 0; margin-right: 0; } .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-nested-row > [class*="sppb-col-"] { padding-left: 0; padding-right: 0; } /* ========================================================================= 4. Karte fuellt ihre Kachel - Platzhalter wie geladenes iframe ========================================================================= */ /* Kette vom Addon-Rahmen bis zum Karten-Container */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .addon-root-raw-html, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .addon-root-raw-html > .clearfix, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-addon-raw-html, .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-addon-raw-html > .sppb-addon-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-bottom: 0; } /* Der Seitenverhaeltnis-Trick der alten Vorlage (height:0 + padding-bottom:73%) wuerde die Kachelhoehe erzwingen - hier wird er aufgehoben. */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .responsiveMaps { position: relative; height: auto; padding-bottom: 0; overflow: visible; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .sp-page-builder .page-content .responsiveMaps > [data-bg-map-src] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .sp-page-builder .page-content .bg-map-placeholder, .sp-page-builder .page-content .bg-map-loaded { flex: 1 1 auto; height: 100%; min-height: 0; } /* Geladene Karte: iframe fuellt die Kachel, ohne die 450-px-Vorgabe im height-Attribut zu uebernehmen. */ .sp-page-builder .page-content .bg-map-loaded { display: flex; } .sp-page-builder .page-content .bg-map-loaded iframe { position: static; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; } /* Reste der abgeschalteten CookieFirst-Loesung, falls irgendwo noch vorhanden */ .cookiefirst-disabled-resource { display: none !important; } /* ========================================================================= 5. Personenkachel: Portrait und Text ========================================================================= */ /* Portrait als Hintergrundbild - Ausschnitt fuellt die Kachel, oben verankert, damit keine Koepfe angeschnitten werden. */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-nested-row > [class*="sppb-col-md-5"] > .sppb-column { background-size: cover !important; background-position: 50% 0 !important; background-repeat: no-repeat !important; min-height: 0; } /* Text in der Spalte daneben vertikal zentrieren, damit Kacheln mit unterschiedlich langen Funktionsbezeichnungen gleich wirken. */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-nested-row > [class*="sppb-col-md-7"] > .sppb-column > .sppb-column-addons { justify-content: center; } /* ========================================================================= 6. Luftbild uebernimmt das Seitenverhaeltnis des News-Sliders ========================================================================= */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] .n2-section-smartslider) > .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] > .sppb-column > .sppb-column-addons > .addon-root-image img { display: block; width: 100%; aspect-ratio: var(--bg-media-ratio); object-fit: cover; object-position: 50% 50%; } /* ========================================================================= 7. Responsive ========================================================================= */ @media (max-width: 1199.98px) { :root { --bg-tile-h: 400px; } } @media (max-width: 991.98px) { :root { --bg-tile-h: 360px; } /* Karte und Personenkachel stehen untereinander -> je volle Breite */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) > .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"], .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] .n2-section-smartslider) > .sppb-row-container > .sppb-row > [class*="sppb-col-md-6"] { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 767.98px) { /* Auf dem Handy bestimmt der Inhalt die Hoehe */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) > .sppb-row-container > .sppb-row { min-height: 0; } .sp-page-builder .page-content .bg-map-placeholder, .sp-page-builder .page-content .bg-map-loaded, .sp-page-builder .page-content .bg-map-loaded iframe { min-height: 320px; } /* Portrait nicht zu schmal werden lassen */ .sp-page-builder .page-content > .sppb-section:has(> .sppb-row-container > .sppb-row [data-bg-map-src]) .sppb-nested-row > [class*="sppb-col-md-5"] > .sppb-column { min-height: 240px; } }