/* ========================================================= Zinshausberatung Classic Theme – Main Styles 1. Fonts | 2. Base | 3. Sub-Header/Hero | 4. Images | 5. Typography 6. Header | 7. Footer | 8. Components | 9. Sliders | 10. Responsive ========================================================= */ /* ========================================================= 1. Fonts ========================================================= */ /* CLS: Fallback mit Metrik-Override – reduziert Layout-Shift bei font-display: swap. Werte: font-fallbacks-dataset (khempenius), Karla ascent 91.7%, descent 25.2%. */ @font-face { font-family: 'Karla-fallback'; ascent-override: 91.7%; descent-override: 25.2%; line-gap-override: 0%; src: local('Arial'); } @font-face { font-family: 'Karla-fallback-android'; ascent-override: 91.7%; descent-override: 25.2%; line-gap-override: 0%; src: local('Roboto'); } @font-face { font-family: 'Karla'; src: url('../fonts/karla/Karla-VariableFont_wght.woff2') format('woff2'), url('../fonts/karla/Karla-VariableFont_wght.woff') format('woff'), url('../fonts/karla/Karla-VariableFont_wght.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Karla'; src: url('../fonts/karla/Karla-Italic-VariableFont_wght.woff2') format('woff2'), url('../fonts/karla/Karla-Italic-VariableFont_wght.woff') format('woff'), url('../fonts/karla/Karla-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 200 800; font-style: italic; font-display: swap; } /* ========================================================= 2. Base ========================================================= */ html { font-size: 18px; /* Standardbrowserwert */ } body { max-width: 1920px; margin: 0 auto; background-color: #cccccc !important; font-size: 1rem; line-height: 1.3rem; font-family: 'Karla', 'Karla-fallback', 'Karla-fallback-android', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #00375E; /* Enable OpenType localized forms (requires proper lang attribute on ) */ font-feature-settings: "locl" 1; } /* ========================================================= 3. Sub-Header / Hero (inkl. hero-background, Kurier-Badges) ========================================================= */ /* Sub-header: 100% Breite, Top-Ausrichtung, Sticky-Scroll berücksichtigt */ .sub-header { background-size: cover !important; background-position: top center !important; background-repeat: no-repeat !important; height: 310px !important; width: 100% !important; z-index: 1 !important; } /* Hero mit img statt background-image: srcset funktioniert */ .hero-with-img { position: relative; overflow: hidden; } .sub-header.hero-with-img, .hero-background.hero-with-img { background-image: none !important; } .hero-with-img .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* Archive & Single: Sub-header standalone, gefolgt von content-wrap */ .sub-header:has(+ .content-wrap) { margin-top: 80px; } .sub-header + .content-wrap { margin-top: 0; } /* Page (Hero in content-wrap): Margin nur am content-wrap */ .content-wrap:has(> .sub-header), .content-wrap:has(> .hero-background) { margin-top: 80px; } @media (max-width: 991px) { .content-wrap:has(> .sub-header), .content-wrap:has(> .hero-background) { margin-top: 170px; } .sub-header:has(+ .content-wrap) { margin-top: 170px; } } .content-wrap .sub-header, .content-wrap .sub-header:first-of-type { margin-top: 0; } @media (max-width: 768px) { .content-wrap:has(> .sub-header), .content-wrap:has(> .hero-background) { margin-top: 240px; } .sub-header:has(+ .content-wrap) { margin-top: 240px; } } @media (max-width: 430px) { .content-wrap:has(> .sub-header), .content-wrap:has(> .hero-background) { margin-top: 260px; } .sub-header:has(+ .content-wrap) { margin-top: 260px; } } .hero-background { width: 100%; min-height: 400px; background-size: cover; background-position: top center; background-repeat: no-repeat; } @media (min-width: 768px) { .hero-background { min-height: 500px; } } @media (min-width: 1200px) { .hero-background { min-height: 600px; } } .kurier-1 { position: relative; left: 0; top: 70px; } .kurier-2 { position: relative; left: 220px; top: -70px; } @media (max-width: 1200px) { .kurier-1 { position: relative; float: left; left: 20%; top: auto; margin-top: 50px; } .kurier-1 img { max-width: 93%; } .kurier-2 { position: relative; float: left; left: 20%; top: auto; margin: auto auto; margin-top: 20px; clear: both; } .kurier-2 img { max-width: 91%; } } @media (max-width: 991px) { .kurier-1 { position: auto; float: left; left: auto; top: auto; margin-bottom: 20px; margin-top: 0; } .kurier-1 img { max-width: 93%; } .kurier-2 { position: relative; float: left; left: 0; top: auto; margin: auto; clear: none; margin-top: 0; } .kurier-2 img { max-width: 91%; } } @media (max-width: 768px) { .kurier-1 { position: relative; float: left; left: auto; top: 0; margin-bottom: 20px; } .kurier-1 img { max-width: 93%; } .kurier-2 { position: inherit; float: left; left: auto; top: 0; margin-bottom: 20px; } .kurier-2 img { max-width: 91%; } } /* ========================================================= 4. Images ========================================================= */ .img-part { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .img-part { height: auto; margin-bottom: 20px; } } .wrapper-jAIu2l { background-color: transparent !important; } /* ========================================================= 3. Typography ========================================================= */ .h1, h1 { font-size: 36px; } .h2, h2 { font-size: 32px; } .h3, h3 { font-size: 24px; } .h4, h4 { font-size: 18px; } h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; } body, p { font-weight: 400 !important; font-size: 1rem; } .font-small, footer .content-part ul li a { font-size: 0.875rem; } .font-extra-small { font-size: 0.675rem; line-height: 1.1; } b, strong { font-style: normal; font-weight: 700 !important; } .icon { display: inline-block; } /* ACF gallery admin */ .badge img { width: 100% !important; } .badge { width: 100%; } footer { font-weight: 400 !important; } a { color: #00375E; text-decoration: none; } /* Exclude links inside buttons from global hover opacity */ button a, button a:hover, button a:focus { color: #FFFFFF; opacity: 1; text-decoration: none; } a.btn, a.btn:hover, a.btn:focus { opacity: 1; text-decoration: none; } a:hover, a:active, a:focus { outline: 0; color: #00375E; text-decoration: none; } /* Light hover emphasis only for inline text links (avoid buttons/cards/images) */ p a:hover, li a:hover, .text-content a:hover, .card-text-related a:hover, .underlined a:hover, footer .content-part ul li a:hover { opacity: 0.8; } .underlined a { text-decoration: underline !important; color: #00375E; } .underlined a:hover { text-decoration: none !important; color: #00375E; } .logo a img { max-width: min(175px, 100%); /* ca. 25% grösser (140 × 1.25) */ width: auto; height: auto; position: relative; top: 0; left: 0; } button:focus { outline: 0 !important; } input:focus { outline: none !important; } .relative { position: relative; } .anchor { display: block; position: relative; top: -10px; visibility: hidden; } /* ========================================================= 5. Header / Navigation ========================================================= */ .current-menu-item>a, .active { color: #00375E; font-weight: 700 !important; text-decoration: none; } @media (max-width: 768px) { .dropdown-menu { background-color: unset !important; border: none !important; } } #mainNav.navbar { padding: 0; width: 100%; } #mainNav { flex-direction: column; align-items: stretch; } #mainNav>.container { display: block; padding: 0.5rem 1rem; max-width: 1920px; margin-left: auto; margin-right: auto; width: 100%; } #mainNav>.header-sticky-bar { width: 100%; margin: 0; } @media (max-width: 1920px) { #mainNav>.container { padding: 0.5rem 1rem; } } .header-top-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 50px; } .header-sticky-bar { position: sticky; top: 0; width: 100%; margin: 0; background-color: #00375E; color: #FFFFFF; padding: 10px 0; flex: none; z-index: 10; max-height: 200px; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.3s ease; } .header-sticky-bar-inner { display: flex; align-items: center; justify-content: space-between; font-weight: 400; gap: 1rem; max-width: 1920px; margin-left: auto; margin-right: auto; padding: 0 20rem; } @media (max-width: 1600px) { .header-sticky-bar-inner { padding: 0 10rem; } } @media (max-width: 1440px) { .header-sticky-bar-inner { padding: 0 5rem; } } @media (max-width: 1280px) { .header-sticky-bar-inner { padding: 0 1rem; } } @media (max-width: 991px) { .header-sticky-bar-inner { flex-direction: column; padding: 0 1rem; } .header-sticky-bar-left { text-align: center !important; flex: 1 1 auto; min-width: 0; } } .header-sticky-bar-left { text-align: left; flex: 1 1 auto; min-width: 0; } /* CLS: Platz für Trustindex-Widget reservieren (verhindert Layout-Shift beim Laden) */ .header-sticky-bar-right { text-align: right; flex: 0 0 auto; min-height: 2rem; padding-top: 3px; } #mainNav #navbarResponsive.navbar-hidden { max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; } .header-top-line { flex: 1 1 auto; min-width: 0; text-align: left; padding-top: 10px; } .header-sticky-bar.header-top-line { flex: none; min-width: unset; } @media (min-width: 992px) and (max-width: 1200px) { .header-top-row { gap: 30px; } } .navbar-collapse { padding-left: 100px; } @media (max-width: 768px) { .navbar-collapse { padding-left: 20px; padding-top: 50px; padding-bottom: 50px; } } .navbar-light .navbar-nav .nav-link { color: #00375E; } .navbar-light .navbar-nav .active>.nav-link { color: #00375E; } .header-menu-row { width: fit-content; max-width: 100%; margin-left: auto; padding-top: 10px; padding-bottom: 10px; } .header-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 35px; } .header-menu li { margin: 0; } .header-menu li a { display: inline-block; color: #00375E; font-weight: 400; } .header-menu li.current-menu-item a, .header-menu li.current_page_item a, .header-menu li.current-menu-ancestor a { font-weight: 700; } @media (max-width: 767px) { .header-top-row { flex-direction: column; align-items: flex-start; gap: 12px; } .header-top-line { display: block; flex: 0 0 100%; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; } .header-menu-row { width: 100%; margin-left: 0; margin-top: 0; padding-top: 12px; padding-bottom: 8px; overflow: visible; } .header-menu { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; align-items: center; column-gap: 14px; row-gap: 14px; margin: 0 auto; padding-left: 0; } .header-menu li { width: 100%; text-align: center; } .header-menu li a { display: inline-block; padding: 2px 0; } } @media (max-width: 430px) { .header-menu { column-gap: 10px; row-gap: 16px; } } @media (max-width: 575px) { .header-menu-row { overflow: visible; } } /* ========================================================= Footer ========================================================= */ footer { position: relative; } footer .content-part { font-size: 0.875rem; color: #00375E; padding-bottom: 25px; padding-left: 10px; } footer .content-part ul { padding-left: 0; } footer .content-part ul li { list-style: none; margin-bottom: 10px; } footer .content-part ul li a { color: #00375E; } footer .content-part ul li a:hover { color: #083c63; } footer .content-part .contact-info { margin-bottom: 9.5px; } footer .content-part .contact-info .icons a { padding-left: 0; display: inline-block; } /* Footer: Links + Social section */ .content-part--links { background-color: #f4f4f4; } .content-part--links .mid-wrap { padding-top: 40px; padding-bottom: 40px; } @media (max-width: 991px) { .content-part--links .row > div:first-child, .content-part--links .row > div:last-child { text-align: center; } .content-part--links .row > div:first-child ul, .content-part--links .row > div:first-child .text-md-end { text-align: center; } .content-part--links .row > div:last-child { padding-left: 0; } .content-part--links .row > div:last-child .pl-lg-3 { padding-left: 0; text-align: center; } .content-part--links .row > div:first-child { width: 100%; max-width: 100%; flex: 0 0 100%; } } .copy.copy--social { background-color: #ffffff; margin-top: 0; padding-top: 0; padding-bottom: 0; } .copy.copy--social .copy__social-wrap { padding-top: 30px; padding-bottom: 30px; } .follow-us-heading { font-size: 1.25rem; letter-spacing: 0.25em; } .copy .social-icon { font-size: 28px; } /* Hover-Effekt für Social Media Icons überschreiben */ .copy .social-icon:hover, footer .contact-info a:hover { color: #00375E; opacity: 0.9; } /* Footer: 768–577px */ @media (max-width: 768px) { .copy .social-icon { font-size: 20px; margin: 0 8px; } .copy .container .row>div { margin-bottom: 8px; } .copy .container .row>div:last-child { margin-bottom: 0; } .copy .imprint, .copy .col-12.col-md-4 { margin-bottom: 8px; } } /* Footer: ≤576px – kompakter */ @media (max-width: 576px) { .copy .social-icon { font-size: 18px; margin: 0 5px; padding: 0 10px 10px 0; width: 30px; } .copy { padding-top: 15px; padding-right: 20px; } .copy .container .row>div { margin-bottom: 5px; } .copy .imprint, .copy .col-12.col-md-4 { margin-bottom: 5px; } .copy .col-12.col-md-4:last-child { margin-top: 25px; } .imprint { padding-right: 0; } } /* ========================================================= Icons ========================================================= */ .icons a { color: #00375E; } .rounded img { border-radius: 15px !important; } .rounded-8 { border-radius: 8px !important; } .rounded-15 { border-radius: 15px !important; } .rounded-15-top { border-radius: 15px 15px 0 0 !important; } .navbar .top-icon img { display: none; } .slick-slide img { padding: 4px; } [id^="slider-zinsh-"] .arrowss { position: absolute !important; top: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: auto; transform: translateY(-50%); background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); cursor: pointer; } [id^="slider-zinsh-"] .arrowss img { height: 14px; width: auto; box-shadow: none; } [id^="slider-zinsh-"] .arrow-left { left: 0px; transform: translate(-110%, -50%); } [id^="slider-zinsh-"] .arrow-right { right: 0px; transform: translate(110%, -50%); } /* Flexible Content (page) + Zinshaus-Blog (archive + single) */ .content-wrap img, .immoblog-archive img { box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.2); } /* Ausnahme: Schatten deaktivieren */ img.no-img-shadow, .no-img-shadow img { box-shadow: none !important; } [id^="slider-zinsh-"] { position: relative; min-height: 150px; box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 4px 2px 4px 2px; } [id^="slider-zinsh-"] img { opacity: 0; transition: opacity 0.25s ease; } [id^="slider-zinsh-"] .zinsh-slider-image { display: block; width: 100%; max-width: 154px; height: auto; max-height: 120px; object-fit: contain; box-shadow: none !important; margin: 0 auto; } [id^="slider-zinsh-"].zinsh-slider--ready img { opacity: 1; } .zinsh-slider-wrap { position: relative; padding-left: 80px; padding-right: 80px; overflow: visible; } .slider-spinner { display: flex; align-items: center; justify-content: center; width: 100%; padding: 40px 0; } .slider-spinner .spinner { width: 48px; height: 48px; border: 4px solid rgba(0, 55, 94, 0.15); border-top-color: #00375E; border-radius: 50%; animation: spinner-rotate 0.8s linear infinite; } @keyframes spinner-rotate { to { transform: rotate(360deg); } } /* ========================================================= Flexible Content – Bottimmos ========================================================= */ btm-widget[widget="list"] btm-list { font-family: inherit !important; font-weight: normal !important; } h2 btm-widget [widget="list"] { font-family: inherit !important; font-weight: normal !important; } /* Bewertung */ btm-widget[widget="valuation"] btm-valuation { font-size: 15px !important; color: #00375E !important; font-family: inherit !important; } btm-widget[widget="valuation"] btm-icon-select-label { font-weight: 600 !important; margin: var(--size-2); } .btm-icon-select-label { font-weight: 600 !important; color: var(--primary) !important; margin: var(--size-2); } /* ========================================================= Kreditrechner (Optifin) ========================================================= */ .tooltip { opacity: 1; } #formContainer { border-radius: 10px; } .c-calc-form, .c-calc-form__form-wrapper, .c-calc-form__inner { border-radius: 10px; } .c-calc-form__inner { background: #FFFFFF; } .c-calc-form__button { padding: 10px 20px !important; background-color: #f58220 !important; border-radius: 10px !important; } .c-calc-form__result-big-text { color: #f58220 !important; } .c-calc-form__result-first-col { padding-bottom: 20px; } .c-calc-form__title--bold { color: #f58220 !important; } .c-calc-form__result { border-radius: 10px; } /* ========================================================= CTA Buttons ========================================================= */ button.termin { background-color: #00375e; color: #FFFFFF; padding: 10px; border: none; border-radius: 15px; width: 250px; margin-right: 20px; margin-top: 20px; } button.termin a { color: #FFFFFF; } button.whatsapp, a.whatsapp { background-color: #25D366; color: #FFFFFF; padding: 10px; border: none; border-radius: 10px; min-width: 260px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem !important; text-decoration: none; } a.whatsapp, a.whatsapp:hover, a.whatsapp:focus, button.whatsapp a { color: #FFFFFF; } button.whatsapp i, a.whatsapp i { font-size: 24px; } button.call, a.call { background-color: #00375e; color: #FFFFFF; padding: 10px; border: none; border-radius: 10px; min-width: 260px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem !important; text-decoration: none; } a.call, a.call:hover, a.call:focus, button.call a { color: #FFFFFF; } button.call a:hover, a.call:hover { color: #FFFFFF; } button.call i, a.call i { font-size: 24px; } /* ========================================================= Embedded Forms ========================================================= */ .block-width { width: 400px; padding-top: 20px; height: 430px; border: none; background-color: #FFF; } @media (max-width: 430px) { .block-width { width: 100%; height: 530px; padding: 10px; margin: 0; } } /* ========================================================= Slider Wrapper (Slick) ========================================================= */ .slider-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 100%; margin: 0 auto; padding-top: 60px; padding-bottom: 35px; box-sizing: border-box; } .slider-wrapper .arrowss, .slider-wrapper .slick-prev, .slider-wrapper .slick-next { position: relative !important; z-index: 10; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); cursor: pointer; } .slider-wrapper .slick-prev, .slider-wrapper .arrow-left { margin-right: 15px; margin-left: 8px; order: -1; } .slider-wrapper .slick-next, .slider-wrapper .arrow-right { margin-left: 15px; margin-right: 8px; order: 1; } .slider-wrapper .arrowss img, .slider-wrapper .slick-prev img, .slider-wrapper .slick-next img { height: 14px; width: auto; } .slider-container { flex: 1; min-width: 0; overflow: hidden; } [id^="slickslider-cards-"] { margin: 0; } .slick-slide { outline: none; } .slick-slide a, .slick-slide a:hover { color: #00375E; text-decoration: none; } .image-wrapper { height: 50%; display: flex; align-items: center; justify-content: center; } .card-body { height: 100%; } .card { display: flex; flex-direction: column; height: 100%; padding: 0; margin: 0; } .card-text-related { height: 120px; line-height: 1.4; } .card-img-top { height: 220px; width: 100%; object-fit: cover; padding: 0; margin: 0; } /* ========================================================= Container Utilities ========================================================= */ .container-sm { padding-left: 0; padding-right: 0; } @media (min-width: 768px) { .container-md { padding-left: 25px; padding-right: 25px; } } /* ========================================================= 9. Responsive ========================================================= */ @media (max-width: 768px) { .slider-wrapper { padding-top: 16px; padding-left: 10px; padding-right: 10px; } /* Cards: minimize outer margins to increase visible width */ .slider-wrapper .card { margin-left: 14px !important; margin-right: 14px !important; } /* Place arrows over content so they don't consume horizontal width */ .slider-wrapper .slick-prev, .slider-wrapper .arrow-left, .slider-wrapper .slick-next, .slider-wrapper .arrow-right { position: absolute !important; top: 40%; transform: translateY(-40%); width: 28px; height: 28px; margin: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .slider-wrapper .slick-prev, .slider-wrapper .arrow-left { left: 12px; } .slider-wrapper .slick-next, .slider-wrapper .arrow-right { right: 12px; } /* Let images adapt height naturally on small screens */ .image-wrapper { height: auto; } /* Ensure cards slider arrows are visible with glyphs on mobile */ [id^="slickslider-cards-"] .slick-prev, [id^="slickslider-cards-"] .slick-next { display: block !important; z-index: 5; } [id^="slickslider-cards-"] .slick-prev:before, [id^="slickslider-cards-"] .slick-next:before { content: ''; display: block; font-size: 12px; line-height: 28px; text-align: center; color: #00375E; opacity: 0.95; } [id^="slickslider-cards-"] .slick-prev:before { content: '‹'; } [id^="slickslider-cards-"] .slick-next:before { content: '›'; } /* Override older rules: force custom image arrows to correct sides */ .slider-wrapper .arrowss { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 28px !important; z-index: 6 !important; cursor: pointer; } .slider-wrapper .arrow-left { left: -8px !important; right: auto !important; } .slider-wrapper .arrow-right { right: -8px !important; left: auto !important; } .slider-wrapper .arrowss img { width: auto !important; height: 11px !important; object-fit: contain !important; display: block !important; } } @media (max-width: 768px) { button.termin, button.whatsapp { margin: 0px auto; width: 100%; } button.call { width: 100%; margin: auto; } .col-md-11 { width: 100%; margin: 0; padding: 0; } } @media (max-width: 576px) { .position-relative { position: relative; width: 100%; } .overlay { top: 25%; left: 5%; width: 80% !important; } .overlay h4 { font-size: 15px; } .overlay h2 { font-size: 24px; } } /* Breakpoints (Bootstrap 5 + Device): 430px = iPhone 14 Pro Max, 15 Plus 576px = sm 768px = md 992px = lg 1200px = xl 1400px = xxl 782px = WordPress Admin Bar (mobile) 834px = iPad Pro 11" 320px = iPhone SE, sehr kleine Displays */ @media (min-width: 576px) { .logo a img { width: 250px; /* ca. 25% grösser (200 × 1.25) */ } .mid-wrap { padding: 60px 0; } } /* >=768px (md) */ @media (min-width: 768px) { /* Images in content columns restore full height layout */ .img-part { height: 100%; margin-bottom: 0; } } /* <992px: grösseres Logo, geringerer Abstand zu Navigationspunkten */ @media (max-width: 991px) { .logo a img { max-width: min(167px, 100%); } #mainNav.mobile-logo-small .logo a img { max-width: min(167px, 100%); } .header-top-row { gap: 8px; } .header-menu-row { margin-top: 0; /* noch einen Tick höher */ padding-top: 8px; padding-bottom: 16px; /* +10px */ } } /* >=992px (lg) */ @media (min-width: 992px) { /* Sub header area larger on desktops */ .sub-header { height: 360px !important; } /* Headline size refinement removed to keep global sizes */ /* Slider arrows sit further outside on larger screens */ [id^="slider-zinsh-"] .arrow-left { transform: translate(-130%, -50%); } [id^="slider-zinsh-"] .arrow-right { transform: translate(130%, -50%); } } /* >=1200px (xl) */ @media (min-width: 1200px) { .sub-header { height: 400px !important; } /* Keep global heading sizes */ } /* >=1400px (xxl) */ @media (min-width: 1400px) { /* Keep spacious container width on very large screens */ .navbar>.container { max-width: 1400px; } .mid-wrap .container { max-width: 1280px; } } /* >=1600px: Half-Hero höher */ @media (min-width: 1600px) { .sub-header { height: 500px !important; } } /* Admin bar: Header offset when logged in */ body.admin-bar #mainNav { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #mainNav { top: 46px; } } /* Newsletter page + admin bar */ .newsletter-content-wrap { background-color: #e3e3e3; margin-top: 80px; } body.admin-bar .newsletter-content-wrap { /* Desktop WP Admin Bar height is 32px */ margin-top: calc(80px - 32px); } @media screen and (max-width: 782px) { body.admin-bar .newsletter-content-wrap { /* Mobile WP Admin Bar height is ~46px */ margin-top: calc(80px - 46px); } } /* ========================================================= List Styles (Häkchen / X-Kreuze) ========================================================= */ .checklist .item::before { content: '\2713'; /* Unicode Häkchen ✓ */ color: #28a745; /* Grün (z.B. Bootstrap success) */ margin-right: 0.35em; } .checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em 0.5em; } ul.list-checkmark { list-style: none; padding-left: 0; } ul.list-checkmark li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; } ul.list-checkmark li::before { content: '\2713'; /* Unicode Häkchen ✓ */ position: absolute; left: 0; color: #28a745; /* Bootstrap success green */ font-weight: 700; font-size: 1.1em; } ul.list-cross { list-style: none; padding-left: 0; } ul.list-cross li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; } ul.list-cross li::before { content: '\2717'; /* Unicode X-Kreuz ✗ */ position: absolute; left: 0; color: #dc3545; /* Bootstrap danger red */ font-weight: 700; font-size: 1.1em; } /* ========================================================= Single (Immoblog Post) ========================================================= */ body.single .btn-primary { color: #fff; border-color: #ffffff !important; } body.single .blog h2 { margin: 40px 0; padding-left: 0; padding-right: 0; } body.single .blog h3 { font-size: 1.6em; margin: 30px 0; } body.single .blog h4 { font-size: 1em; margin: 10px 0; font-weight: 600; } body.single .blog b, body.single .blog strong { font-weight: 700; } body.single .swiper-container { width: 100%; height: 650px; margin: 20px 0 0; overflow: hidden; position: relative; padding: 12px; /* Raum für box-shadow der Bilder */ box-sizing: border-box; } body.single .swiper-slide { display: flex; justify-content: center; align-items: center; max-width: 100%; height: 100%; position: relative; } body.single .swiper-slide img { max-width: 100%; max-height: 100%; object-fit: contain; width: auto; height: auto; margin: auto; vertical-align: middle; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px; } body.single .swiper-button-prev, body.single .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: transparent; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; } body.single .swiper-button-prev { left: 0; top: 47%; } body.single .swiper-button-next { right: 0; top: 47%; } body.single .date { font-size: 15px; font-weight: 500; margin-top: 20px; } body.single #slickslider-immoblog-related.slider-container { width: 100%; overflow: visible; } body.single #slickslider-immoblog-related .slick-slide { outline: none; } body.single #slickslider-immoblog-related .image-wrapper { position: relative; height: 50%; display: flex; align-items: center; justify-content: center; } body.single .category-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 55, 94, 1); color: #fff; padding: 5px 5px 0 15px; } body.single .card-image-category { font-size: 15px; color: #fff; padding-bottom: 3px; letter-spacing: 0; } body.single #slickslider-immoblog-related .card-body { height: 100%; padding: 1rem; } body.single #slickslider-immoblog-related .card { display: flex; flex-direction: column; height: 100%; } body.single #slickslider-immoblog-related .card-text-related { height: 100px; letter-spacing: 0; } body.single #slickslider-immoblog-related .card-img-top { height: 250px; width: 100%; object-fit: cover; padding: 0; margin: 0; } body.single #slickslider-immoblog-related .arrowss, body.single #slickslider-immoblog-related .arrow-left, body.single #slickslider-immoblog-related .slick-prev, body.single #slickslider-immoblog-related .slick-arrow { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); position: absolute; z-index: 100; cursor: pointer; } body.single #slickslider-immoblog-related .arrowss img { height: 11px; width: auto; } body.single #slickslider-immoblog-related .slick-prev { top: 40%; left: -12px; } body.single #slickslider-immoblog-related .slick-next { top: 40%; right: -12px; } body.single .container-xl { padding-left: 35px !important; padding-right: 35px !important; max-width: 1440px; } body.single .rounded-15 img { border-radius: 15px; } body.single a.home { color: #00375E !important; } body.single a.home:hover { opacity: 0.6; color: #fff; } body.single .single-button { display: inline-block; padding: 11px 26px; background-color: #00375e; color: #fff; text-decoration: none; border-radius: 15px; margin: 40px 5px 25px; } body.single .single-button:hover { color: #fff; opacity: 0.8; } body.single .fullwidth-section { width: 100%; flex: 0 0 100%; max-width: 100%; } body.single .fullwidth-section .mid-wrap.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { body.single .fullwidth-section .mid-wrap.container { max-width: 1140px; } } @media (max-width: 576px) { body.single .card-image { height: 200px; border-radius: 15px 15px 0 0; } body.single #slickslider-immoblog-related .card-text-related { height: 75px; } body.single .swiper-container { height: 300px; margin-bottom: 20px; } body.single .swiper-button-prev, body.single .swiper-button-next { top: 60%; } } @media (min-width: 576px) and (max-width: 767px) { body.single .card-image { height: 400px; } body.single #slickslider-immoblog-related .card-text-related { height: 135px; } } @media (min-width: 768px) and (max-width: 992px) { body.single .swiper-container { height: 600px; margin: 20px 0 50px; } body.single .swiper-slide { height: 90%; } } @media (min-width: 768px) { body.single .card-image { height: 520px; } } @media (min-width: 1280px) { body.single .card-image { height: 400px; } } body.single .row { margin-left: 0; margin-right: 0; } /* ========================================================= Archive (Immoblog Index) ========================================================= */ .immoblog-archive { background-color: #e3e3e3; } .immoblog-archive .btn-primary { transition: none; } .immoblog-archive .btn-primary:not(:disabled):not(.disabled).active, .immoblog-archive .btn-primary:not(:disabled):not(.disabled):active, .immoblog-archive .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #00375E; border-color: #00375E; } .immoblog-archive .archive-category-overlay .archive-card-text, .immoblog-archive .archive-category-overlay .archive-card-text a { color: #fff !important; text-decoration: none; } .immoblog-archive .archive-category-overlay .archive-card-text:hover, .immoblog-archive .archive-category-overlay .archive-card-text a:hover, .immoblog-archive .archive-category-overlay .archive-card-text:focus, .immoblog-archive .archive-category-overlay .archive-card-text a:focus { color: #fff !important; text-decoration: none; } .immoblog-archive .archive-category-overlay a:hover { color: #fff; text-decoration: none; } .immoblog-archive a.new-transition { color: #00375E; } .immoblog-archive a.new-transition:hover { opacity: 1; } .immoblog-archive a.category-buttons { color: #00375E; } .immoblog-archive a.category-buttons:hover { opacity: 1; } .immoblog-archive .archive-card-wrapper { display: flex; flex-wrap: wrap; } .immoblog-archive .archive-card { display: flex; flex-direction: column; width: 100%; height: 360px !important; padding-bottom: 10px; } .immoblog-archive .archive-image-wrapper { position: relative; border-top-left-radius: 15px; border-top-right-radius: 15px; overflow: visible; width: 100%; flex: 0 0 70%; } .immoblog-archive .archive-image-wrapper a.new-transition { display: block; width: 100%; height: 100%; } .immoblog-archive .archive-card-img-top { width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0; display: block; } .immoblog-archive .archive-category-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 55, 94, 1); padding: 8px 15px; box-sizing: border-box; color: #fff; } .immoblog-archive .archive-category-overlay a:hover { opacity: 1; color: #fff; } .immoblog-archive .archive-card-image-category, .immoblog-archive .archive-card-image-category li { color: #fff; list-style: none; } .immoblog-archive .archive-card-body { padding-left: 25px; padding-right: 25px; padding-bottom: 135px; min-height: 80px; width: 100%; flex: 1 1 33.333%; } .immoblog-archive .archive-card-title { font-size: 18px; line-height: 23px; width: 100%; } .immoblog-archive .category-buttons .btn { display: inline-block; padding: 10px 24px; background-color: #fff; color: #00375E !important; text-decoration: none; transition: none; margin: 0 5px 30px; border-radius: 15px; } .immoblog-archive .category-buttons .btn:hover { color: #00375E; } .immoblog-archive .category-buttons .btn.active { outline: none; color: #f1f1f1 !important; opacity: 1; } .immoblog-archive .category-buttons .btn:focus { outline: none; color: #00375E !important; background-color: #fff; opacity: 1; } @media (max-width: 768px) { .immoblog-archive .category-buttons .btn { display: inline-block; padding: 10px 24px; text-decoration: none; border-radius: 15px; margin: 0 5px 20px; } .immoblog-archive .category-buttons .btn:hover { color: #fff; } .immoblog-archive .btn-group .btn:last-child { margin: 0; } .immoblog-archive .btn-primary { color: #00375e !important; } .immoblog-archive .category-buttons .btn.active, .immoblog-archive .category-buttons .btn:focus { color: #f1f1f1 !important; opacity: 1; } .immoblog-archive .archive-card { min-height: 520px; } .immoblog-archive .archive-image-wrapper { flex-basis: 70%; } } /* ========================================================= 10. Flexible Content (Accordion, Team) ========================================================= */ /* Accordion */ .accordion { width: 100%; margin-left: auto; margin-right: auto; } .accordion h2 { font-size: 20px; font-weight: 600; line-height: 32px; margin: 0 0 5px; } .accordion-item { border: none; margin-bottom: 15px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); padding: 15px; } .accordion-button, [id^="accordionHome-"] .accordion-button, .accordion-item .accordion-button, .accordion-header .accordion-button { background-color: unset; color: #00375E; font-weight: 600; border: none; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding-left: 0 !important; padding-top: 10px !important; } .accordion-button::after { background-image: none !important; content: "+" !important; font-size: 1.5rem; font-weight: 300; line-height: 1; transition: transform 0.2s ease-in-out; margin-left: 15px; margin-top: -10px; } .accordion-button:not(.collapsed)::after { content: "−" !important; transform: none; } button.call.noicon, a.call.noicon { background-color: #00375e; color: #fff; padding: 10px; border: none; border-radius: 10px; min-width: 260px; display: flex; align-items: center; justify-content: center; gap: 0; font-size: 17px !important; text-decoration: none; } a.call.noicon, a.call.noicon:hover, a.call.noicon:focus, button.call.noicon a, button.call.noicon a:hover { color: #fff; } @media (max-width: 768px) { button.call.noicon, a.call.noicon { width: 100%; margin: auto; } } .content-wrap { overflow: visible; } .content-wrap .w-100:not(img):not(video):not(canvas) { overflow: visible; } img.w-100, video.w-100, canvas.w-100 { overflow: hidden; } .bild-text-buttons-section, .editor-shortcode-section { width: 100%; } .bild-text-buttons-section .mid-wrap.container, .editor-shortcode-section .mid-wrap.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* Flexible Content: Slider-Abschnitte hatten padding:0, nun gleicher Seitenabstand wie bild_text_buttons */ @media (max-width: 768px) { .flexible-slider-midwrap { padding-left: 15px !important; padding-right: 15px !important; } } @media (min-width: 1200px) { .bild-text-buttons-section .mid-wrap.container, .editor-shortcode-section .mid-wrap.container { max-width: 1140px; } } /* ========================================================= Error 404 ========================================================= */ body.error404 .content-wrap { background-color: #f3f3f3; } body.error404 .content-wrap .container { padding-top: 180px; min-height: 80vh; } body.error404 .content-wrap .col-12 { text-align: center; } body.error404 a.btn.home { display: inline-block; background-color: #00375e; color: #FFFFFF; padding: 10px 10px; border: none; border-radius: 15px; width: 250px; margin-right: 20px; margin-top: 20px; margin-bottom: 120px; }