/*!
 * Bootstrap v5.2.2 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Licensed under MIT
 */


/* ==================================================
   Fonts
================================================== */

@font-face {
    font-family: 'barmer_beatregular';
    font-style: normal;
    font-weight: normal;
    src: local(""),
        url("../fonts/barmerbeat-regular-webfont.woff2") format("woff2"),
        url("../fonts/barmerbeat-regular-webfont.woff") format("woff");
}

@font-face {
    font-family: 'barmer_beatblack';
    font-style: normal;
    font-weight: normal;
    src: local(""),
        url("../fonts/barmerbeat-black-webfont.woff2") format("woff2"),
        url("../fonts/barmerbeat-black-webfont.woff") format("woff");
}

@font-face {
    font-family: 'barmer_beatbold';
    font-style: normal;
    font-weight: normal;
    src: local(""),
        url("../fonts/barmerbeat-bold-webfont.woff2") format("woff2"),
        url("../fonts/barmerbeat-bold-webfont.woff") format("woff");
}


/* ==================================================
   Variablen / Farben
================================================== */

:root {
    --schwarz: #000;
    --barmergrau: #212121;
    --barmerdunkelbeige: #f2f0e5;
    --barmerhellgruen: #24c268;
    --barmerlila: #8739f4;
    --barmerhellbeige: #F9F7EF;

    --bs-orange: #8739F4;
    --bs-primary: #8739F4;
    --bs-primary-rgb: 242, 240, 229;

    --bs-font-sans-serif: "barmer_beatregular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";
    --bs-body-font-size: 1.5rem !important;
    --bs-link-color: #8739F4;
    --bs-highlight-bg: #8739F4;
}


/* ==================================================
   Basis
================================================== */

body {
    margin: 0;
    color: var(--barmergrau);
}

.text-primary {
    --bs-text-opacity: 1;
    color: #212121 !important;
}

.link-primary {
    color: #8739F4 !important;
}

.has-portland-orange-background-color {
    background-color: #8739F4;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: 60px;
}

section .container {
    --bs-gutter-x: 120px;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x));
    padding-left: calc(var(--bs-gutter-x));
    margin-right: auto;
    margin-left: auto;
}


/* ==================================================
   Typografie
================================================== */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin-top: 0;
    margin-bottom: 0.1875rem;
    font-family: 'barmer_beatblack';
    line-height: 1.2;
}

h1,
.h1 {
    font-size: calc(1.35rem + 1.2vw);
}

h2,
.h2 {
    font-size: calc(1.325rem + 0.9vw);
}

h2.display-3,
h2.display-4,
h3.display-3,
h3.display-4,
h3.display-2,
h2.display-5,
.bg-primary p,
#leistungsversprechen .has-white-color {
    color: #000 !important;
}

@media (min-width: 1200px) {
    h1,
    .h1 {
        font-size: 3.25rem;
    }

    h2,
    .h2 {
        font-size: 3.25rem;
        margin-top: 30px !important;
    }

    .display-2 {
        font-size: 3.25rem;
        color: #212121;
    }
}


/* ==================================================
   Navigation
================================================== */

.navbar {
    --bs-navbar-color: #000;
    --bs-navbar-hover-color: #8739F4;
    --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
    --bs-navbar-active-color: #8739F4;
    --bs-navbar-brand-color: #8739F4;
    --bs-navbar-brand-hover-color: #8739F4;
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
    --bs-navbar-toggler-icon-bg: url("../images/icon-toggle.svg");
}

.navbar-toggler {
    font-size: var(--bs-navbar-toggler-font-size) !important;
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: none;
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.navbar-nav-scroll {
    max-height: var(--bs-scroll-height, 75vh);
    overflow-y: auto;
}

.mainnav {
    text-transform: normal;
    font-size: 16px;
    font-family: 'barmer_beatbold';
}

.mainnav li .current {
    color: #212121;
}

.mainnav .nav-link:hover {
    color: #8739F4;
}

.mobile-logos {
    display: none !important;
}

body:not(.home) .navbar-toggler {
    padding-right: 20px;
}

.nav {
    --bs-nav-link-hover-color: #8739F4;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #8739F4;
}


/* ==================================================
   Mobile / Tablet Navigation
================================================== */

@media (max-width: 991.98px) {
      body:not(.home) .navbar {
        box-shadow: none;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    .navbar-brand {
        padding: 0;
    }


.pt-60 {padding-top: 30px !important;}


 .image-mask {
        margin-top: 30px !important;
    }

.product-hero-content h1 {
   margin-top: -60px !important;
    padding: 24px !important;
   
}

    .navbar.bg-white {
        background-color: transparent !important;
    }

    .navbar .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        height: auto !important;
        overflow: visible !important;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 900px;
        padding: 0px;
        margin-left: 20px;
        margin-right: 20px;
        transition: all .3s ease;
    }



  .navbar .container {
        transition: none;
    }

    .navbar .container:has(.navbar-collapse.show),
    .navbar .container:has(.navbar-collapse.collapsing) {
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.5);
align-items: flex-start !important;
    }

   .navbar-collapse.collapsing {
        transition: none !important;
    }
 




    .navbar .container:has(.navbar-collapse.show) .navbar-toggler,
    .navbar .container:has(.navbar-collapse.collapsing) .navbar-toggler {
        padding-top: 19px;
    }


 .navbar-collapse {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 0 0 24px 24px;
        padding: 0 10px 20px;
    }

    .navbar-collapse,
    .navbar-collapse.show,
    .navbar-collapse.collapsing,
    .navbar-nav-scroll {
        position: static !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        margin-top: 20px;
    }

    .mainnav {
        margin-top: 0;
    }

    .mainnav .nav-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    }

    .mainnav .nav-item:last-child {
        border-bottom: none;
    }

    .mainnav .nav-link {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .mainnav li {
        position: relative;
        cursor: pointer;
    }

    .mainnav li:not(.mobile-logos)::after {
        position: absolute;
        top: 50%;
        right: 5px;
        width: 13px;
        height: 18px;
        content: '';
        transition: all 0.3s;
        background-image: url('../images/icon-arrow-open.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 13px;
        transform: translateY(-50%) rotate(90deg);
    }

    .mobile-logos {
        display: flex !important;
        align-items: center;
        gap: 20px;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .mobile-logos::after,
    .mainnav .mobile-logos::after {
        display: none !important;
        content: none !important;
    }

    .helper-list-elem {
        background: #8739F4;
        margin-bottom: 5px;
        text-align: center;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 0;
        height: 40px;
        width: 200px;
    }

    .helper-list-elem a {
        color: #fff !important;
        text-transform: uppercase;
        text-decoration: none;
    }

    section .container {
        padding-right: 20px;
        padding-left: 20px !important;
    }

    .card-product-title {
        max-width: 220px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .image-mask {
        margin-top: 30px !important;
    }

    .products-grid {
        gap: 40px 20px !important;
    }

    .products-grid.row-cols-md-2 > * {
        flex: 0 0 calc(48% - 10px) !important;
       
    }

    .mobile-logos,
    .helper-list-mobile {
        display: inline-flex !important;
        align-items: center;
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: block !important;
    }

    .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }

  

    .mainnav {
        display: block !important;
        width: 100%;
    }

    .mainnav .nav-item {
        display: block !important;
        width: 100%;
    }

    .helper-list-mobile {
        margin-top: 18px;
        margin-bottom: 0;
        padding-left: 0;
    }

    .helper-list-mobile li {
        margin-bottom: 0;
    }

    .mobile-footer-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .mobile-logos {
        border-bottom: 1px solid #212121;
        padding-top: 20px;
    }

    .helper-list-mobile {
        padding-top: 20px;
    }
}


/* ==================================================
   Footer
================================================== */

footer {
    padding: 56px 0;
}

footer a,
.footernav li a {
    color: #212121;
}

footer a:hover,
.footernav li a:hover {
   color: #8739F4 !important;
}


@media (max-width: 768px) {
    footer {
        padding: 0 !important;
    }
}


/* ==================================================
   Bilder
================================================== */

.card-img-wrapper-3-2 {
    aspect-ratio: 3 / 2;
    width: 100%;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
}


.card-img-top-3-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
	border-radius: 24px 24px 0 0;
}


.image-mask {
    border-radius: 24px;
    overflow: hidden;
    max-width: 100%;
    margin-top: 35px !important;
}

.image-mask img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

.product-hero-image {
    max-width: 1320px;
    margin: 0 auto;
    aspect-ratio: 8 / 3;
    overflow: hidden;
}

.product-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
}

@media (max-width: 768px) {
   .card-img-wrapper-3-2 {
    aspect-ratio: 16 / 9;
   
}
}

@media (max-width: 1023px) {
    .product-hero-content h1 {
        font-size: 24px;
        padding: 24px;
        margin-top: -35px;
    }

    .product-hero-image {
        max-width: 100%;
        margin: 0;
        aspect-ratio: 1 / 1;
    }

    .product-hero-image img {
        border-radius: 0;
    }
}


/* ==================================================
   Produkte / Cards
================================================== */

.products-grid {
    gap: 60px;
}

.card-body {
    padding-top: 30px;
    padding-bottom: 80px;
}

.card-product-link .card {
    background-color: var(--barmerhellbeige);
    border-radius: 24px;
    box-shadow: none;
}

.card-product-link .card:hover {
    box-shadow: none;
}

.card-product-link .card:hover .card-img-top-3-2 {
    transform: scale(1.1);
}

.card-product-link h3,
.card-product-link .h3 {
    color: #212121;
}



.card-product-link .card {
    overflow: hidden;
}


.product-hero-content h1 {
    display: block;
    background-color: var(--barmerhellbeige);
    border-radius: 24px;
    padding: 60px;
    margin-top: -120px;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .products-grid {
        gap: 40px !important;
    }

    .card-body {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .card-product-link h3,
    .card-product-link .h3 {
        font-size: 1.25rem !important;
        font-weight: bold;
        color: #212121;
    }
}

@media (min-width: 992px) {
    .products-grid.row-cols-lg-3 > * {
        flex: 0 0 auto !important;
        width: 30% !important;
    }
}

@media (min-width: 1200px) {
    .card-product-link .card {
        height: 545px !important;
    }
}


/* ==================================================
   Buttons
================================================== */

.button-orange,
.button-orange .wp-block-button__link {
    background: #8739F4;
}

.button-orange:hover,
.button-orange .wp-block-button__link:hover {
    border: 2px solid #8739F4;
    color: #8739F4;
}

.button-white,
.button-white .wp-block-button__link {
    background: #fff;
    color: #000;
    background-size: 200% 100%;
    border: 2px solid #8739F4;
}

.button-white:hover,
.button-white .wp-block-button__link:hover {
    box-shadow: inset 250px 0 0 0 #8739F4;
}

.white .wp-block-button__link:hover {
    background: #8739F4;
}

.orange .wp-block-button__link,
.download .wp-block-button__link {
    background: #8739F4;
    border: 2px solid #8739F4;
    color: #fff;
}

.orange .wp-block-button__link:hover,
.download .wp-block-button__link:hover {
	background: #6b25c5;
	border: 2px solid transparent;
    color: #fff;
}

.wp-block-button.download {
    display: table;
    border-radius: 999px;
}

.download .wp-block-button__link {
    position: relative;
    display: inline-block;
    text-align: left;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 999px;
}

.download .wp-block-button__link::before {
    display: none;
}

.download .button-text {
    font-family: 'barmer_beatbold';
    text-align: center;
}

.draw-border-white {
    background: #8739F4;
}

.draw-border-white:hover {
    color: #8739F4;
}

.draw-border-white:hover::before,
.draw-border-white:hover::after {
    border-color: #8739F4;
}

.draw-border-primary {
    box-shadow: inset 0 0 0 2px #8739F4;
    color: #8739F4;
}

.draw-border-primary:hover {
    background: #8739F4;
}


/* ==================================================
   Bootstrap Komponenten
================================================== */

.btn-primary {
    --bs-btn-bg: #8739F4;
    --bs-btn-border-color: #8739F4;
    --bs-btn-disabled-bg: #8739F4;
    --bs-btn-disabled-border-color: #8739F4;
}

.btn-secondary {
    --bs-btn-color: #8739F4;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #212121;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 190, 196, 197;
    --bs-btn-active-color: #212121;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #fff;
    font-size: 18px !important;
    font-family: 'barmer_beatbold';
}

.accordion {
    --bs-accordion-btn-bg: #8739F4;
    --bs-accordion-active-color: #fff;
    --bs-accordion-active-bg: #8739F4;
    --bs-accordion-btn-icon: url("../images/icon-arrow-close.svg");
    --bs-accordion-btn-active-icon: url("../images/icon-arrow-close.svg");
}

.accordion-body {
    padding: 0;
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--bs-accordion-border-radius);
    border-top-right-radius: var(--bs-accordion-border-radius);
    border-bottom: 0 solid #d8d6d6;
}

.accordion-button:not(.collapsed) {
    color: #212121;
}

.accordion-item .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) 0;
    font-size: 2rem !important;
    color: #212121;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
    font-family: 'barmer_beatregular';
}

.accordion-item .accordion-button.collapsed {
    border-top: 1px solid #d8d6d6;
    border-bottom: 1px solid #d8d6d6;
}

.accordion-collapse.collapse.show .accordion-body {
    border-bottom: 1px solid #d8d6d6;
}

.carousel-control-prev,
.carousel-control-next {
    color: #8739F4;
}

.list-group {
    --bs-list-group-active-bg: #8739F4;
    --bs-list-group-active-border-color: #8739F4;
}

.progress {
    --bs-progress-bar-bg: #8739F4;
}

.pagination {
    --bs-pagination-active-bg: #8739F4;
    --bs-pagination-active-border-color: #8739F4;
}

.form-range::-webkit-slider-thumb {
    background-color: #8739F4;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #8739F4;
    border-color: #8739F4;
}


/* ==================================================
   Sonstige Elemente
================================================== */

.wir-head {
    color: #8739F4;
}

.wysiwyg-block ul li::before {
    color: #8739F4;
}

.persona-data {
    background: #8739F4;
}

.persona-name {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
}

.helper-list .helper-list-mail,
.helper-list .helper-list-search,
.helper-list .helper-list-jobs {
    background: #8739F4;
}

.input-search-mobile {
    border-bottom: 1px solid #8739F4;
}


/* ==================================================
   Utilities
================================================== */

.row > * {
    padding-right: 0;
    padding-left: 0;
    margin-top: var(--bs-gutter-y);
}


@media screen and (max-width: 575px) {
    .navbar {
        box-shadow: none;
    }
}



@media (min-width: 768px) {
	
	    .navbar {
        box-shadow: none;
    }
}

	.pt-60 {
    padding-top: 1.875rem !important;
}
	
	
    .pb-40 {
        padding-bottom: 10px !important;
    }
}