/* ========================================================= Section: Fonts (Karla, Caveat) – Redesign August 2025 ========================================================= */ /* Redesign August 2025 */ @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; } .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; } } /* ========================================================= Section: Base / Root ========================================================= */ 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', 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; } /* ========================================================= Section: Sub-Header / Hero ========================================================= */ .sub-header { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; height: 330px !important; width: 100% !important; z-index: 1 !important; } /* Heading sizes are unified globally; remove mobile overrides */ /* ========================================================= Section: Media / Images ========================================================= */ .img-part { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 867px) { .img-part { height: auto; margin-bottom: 20px; } } /* Jobs Page */ .wrapper-jAIu2l { background-color: transparent !important;; } /* End Jobs Page */ /* ========================================================= Section: Typography (Headings, Text) ========================================================= */ .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; } /* End Redesign August 2025 */ b, strong { font-display: swap; font-style: normal; font-weight: 600 !important; } .icon { display: inline-block; } /* ACF gallery admin */ .badge img { width: 100% !important; } .badge { width: 100%; } footer { font-weight: 400 !important; } a { text-decoration: none; } a { color: #00375E; } /* 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 { width: 220px; position: relative; top: 0px; left: 0; } .wow { visibility: hidden; } button:focus { outline: 0 !important; } input:focus { outline: none !important; } .relative { position: relative; } .anchor { display: block; position: relative; top: -10px; visibility: hidden; } div.table { display: table; margin-bottom: 79px; color: #00375E; line-height: 1.5; margin-top: 113px; } /* ========================================================= Section: Header / Navigation ========================================================= */ .navbar>.container { max-width: 1600px; } .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; } .font-small, footer .content-part ul li a { font-size: 0.875rem; } .font-extra-small { font-size: 0.675rem; line-height: 1.1; } /* ========================================================= Section: Footer (Base, Links, Social) ========================================================= */ footer { position: relative; } footer .content-part { font-size: 0.875rem;; color: #00375E; padding-bottom: 55px; 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 .content-part .contact-info .icons i { } /* Footer: Links + Social section */ .content-part--links { background-color: #f4f4f4; } /* Footer: Unter 991px – Abschnitte und Text zentrieren */ @media (max-width: 990.98px) { .content-part--links .row { justify-content: center; text-align: center; } .content-part--links .row > div { text-align: center !important; } .content-part--links .row > div ul { text-align: center !important; } .content-part--links .row > div .contact-info { text-align: center !important; } } .content-part--links .mid-wrap { padding-top: 40px; padding-bottom: 40px; } .copy.copy--social { background-color: #ffffff !important; margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .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 !important; opacity: 0.9; } @media (max-width: 576px) { .copy .social-icon { margin: 0px 10px; padding: 0px 10px 10px 0; width: 30px; } .imprint { padding-right: 0; } .copy { padding-right: 20px; } } @media (max-width: 768px) { .copy .social-icon { font-size: 20px !important; margin: 0 8px !important; } .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 !important; } } @media (max-width: 576px) { .copy .social-icon { font-size: 18px !important; margin: 0 5px !important; } .copy { padding-top: 15px !important; } .copy .container .row > div { margin-bottom: 5px; } .copy .imprint, .copy .col-12.col-md-4 { margin-bottom: 5px !important; } .copy .col-12.col-md-4:last-child { margin-top: 25px !important; } } /* ========================================================= Section: Team (Team listing, Team items, Team images, Team contacts) ========================================================= */ .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; } #slider-zinsh .arrowss { position: absolute !important; top: 50%; width: auto; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: auto; transform: translateY(-50%); } #slider-zinsh .arrowss img { height: 100%; width: auto; } #slider-zinsh .arrow-left { left: 0px; transform: translate(-140%, -50%); } #slider-zinsh .arrow-right { right: 0px; transform: translate(140%, -50%); } #slider-zinsh { position: relative; min-height: 150px; } #slider-zinsh img { opacity: 0; transition: opacity 0.25s ease; } #slider-zinsh .zinsh-slider-image { display: block; max-height: 120px; width: auto; margin: 0 auto; } #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); } } btm-widget[widget="valuation"] btm-valuation { font-family: inherit !important; } /* ========================================================= Section: Flexible Content – Widgets (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); } /* ========================================================= Section: Flexible Content – Kreditrechner (Optifin) ========================================================= */ .tooltip { opacity: 1; } #formContainer { border-radius: 10px; background-color: blue !important; } .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; } /* ========================================================= Section: Flexible Content – Hero / Badges ========================================================= */ #main-slider.liquid-slider { border-radius: 0 !important; } .hero-background { width: 100%; min-height: 400px; background-size: cover; background-position: center 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; } /* ========================================================= Section: Flexible Content – 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 { 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; } button.whatsapp a { color: #FFFFFF; } button.whatsapp i { font-size: 24px; } button.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; } button.call a { color: #FFFFFF; } button.call a:hover { color: #FFFFFF; } button.call i { font-size: 24px; } /* ========================================================= Section: Flexible Content – Embedded forms ========================================================= */ .block-width { width: 400px; padding-top: 20px; height: 430px; border: none; background-color: #FFF; } @media (max-width: 440px) { .block-width { width: 100%; height: 530px; padding: 10px; margin: 0; } } /* ========================================================= Section: Flexible Content – Über uns specifics ========================================================= */ li.bezirk { float: left; list-style: none; } li.bezirk:after { content: '|'; padding-right: 7px; } li.bezirk:last-child:after { content: ''; } /* h3.uber-uns { font-size: 24px; padding: 0; line-height: 32px; margin: 0 0 5px; } h4.uber-uns-links { font-size: 20px; }*/ .function { line-height: 1.4; } /* ========================================================= Section: Flexible Content – Container utilities ========================================================= */ .container-sm { padding-left: 0; padding-right: 0; } @media (min-width: 768px) { .container-md { padding-left: 25px; padding-right: 25px; } } /* ========================================================= Section: Flexible Content – Responsive ========================================================= */ @media (max-width: 767.98px) { .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: 32px; height: 32px; margin: 0; z-index: 2; } .slider-wrapper .slick-prev, .slider-wrapper .arrow-left { left: 4px; } .slider-wrapper .slick-next, .slider-wrapper .arrow-right { right: 4px; } /* Let images adapt height naturally on small screens */ .image-wrapper { height: auto; } /* Ensure cards slider arrows are visible with glyphs on mobile */ #slickslider-cards .slick-prev, #slickslider-cards .slick-next { display: block !important; z-index: 5; } #slickslider-cards .slick-prev:before, #slickslider-cards .slick-next:before { content: ''; display: block; font-size: 26px; line-height: 32px; text-align: center; color: #00375E; opacity: 0.95; } #slickslider-cards .slick-prev:before { content: '‹'; } #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: 32px !important; height: 32px !important; z-index: 6 !important; cursor: pointer; } .slider-wrapper .arrow-left { left: -16px !important; right: auto !important; } .slider-wrapper .arrow-right { right: -16px !important; left: auto !important; } .slider-wrapper .arrowss img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } } @media (max-width: 1199px) { .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: auto; float: left; left: inherit; top: auto; margin: auto auto; clear: none; margin-top: 0; } .kurier-2 img { max-width: 91%; } } @media (max-width: 767px) { button.termin, button.whatsapp { margin: 0px auto; width: 100%; } button.call { width: 100%; margin: auto; } .col-md-11 { width: 100%; margin: 0; padding: 0; } .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%; } } @media (max-width: 650px) { .position-relative { position: relative; width: 100%; } .overlay { top: 25%; left: 5%; width: 80% !important; } .overlay h4 { font-size: 15px; } .overlay h2 { font-size: 24px; } } /* ========================================================= Responsive: Bootstrap Breakpoints (sm, md, lg, xl, xxl) Key sections: Header/Nav, Sub-Header, Mid Sections, Team, Sliders, Footer ========================================================= */ /* >=576px (sm) */ @media (min-width: 576px) { /* Header / Logo */ .logo a img { width: 200px; } /* Mid sections */ .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 (lg) */ @media (min-width: 992px) { /* Sub header area larger on desktops */ .sub-header { height: 380px !important; } /* Headline size refinement removed to keep global sizes */ /* Slider arrows sit further outside on larger screens */ #slider-zinsh .arrow-left { transform: translate(-160%, -50%); } #slider-zinsh .arrow-right { transform: translate(160%, -50%); } } /* >=1200px (xl) */ @media (min-width: 1200px) { .sub-header { height: 420px !important; } /* Keep global heading sizes */ } /* >=1400px (xxl) */ @media (min-width: 1400px) { /* Keep spacious container width on very large screens */ .navbar > .container { max-width: 1600px; } .mid-wrap .container { max-width: 1280px; } } /* ========================================================= Section: Fixed header – Admin-Bar offset (eingeloggte User) ========================================================= */ body.admin-bar .navbar.fixed-top, body.admin-bar .fixed-top { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .navbar.fixed-top, body.admin-bar .fixed-top { top: 46px; } } /* ========================================================= Section: Newsletter page wrapper + Admin bar offset ========================================================= */ .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); } }