/*
 * Theme Name: Bro Group GmbH
 * Template:   agency-base
 */

:root{
  --white: #ffffff;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Black.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Bold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-BlackItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraBold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraLight.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Italic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Light.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-LightItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Medium.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-MediumItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Thin.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ThinItalic.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Zen Dots';
    src: url('assets/fonts/ZenDots-Regular.woff2') format('woff2'),
        url('assets/fonts/ZenDots-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.punktobenlinks, .punktobenrechts, .punktuntenlinks, .punktuntenrechts{position:relative;}
.punktobenlinks:before{content:'';display:block;width:1000px;height:270px;background:url('assets/media/punktgrafik_links.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;top:0;left:0;z-index:-1;}
.punktobenrechts:before{content:'';display:block;width:1000px;height:270px;background:url('assets/media/punktgrafik_rechts.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;top:0;right:0;z-index:-1;}
.punktuntenlinks:before{content:'';display:block;width:1000px;height:270px;background:url('assets/media/punktgrafik_links.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;bottom:0;left:0;z-index:-1;}
.punktuntenrechts:before{content:'';display:block;width:1000px;height:270px;background:url('assets/media/punktgrafik_rechts.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;bottom:0;right:0;z-index:-1;}


body {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  background:var(--brand-primary-color);
}
body *{
    color:var(--brand-primary-color-text);
}

.container{
    max-width:1400px;
}
.container.wide{
    max-width:1650px;
}

a{
    transition:all .3s ease;
}

a:hover{
    color:var(--brand-accent-color);
    transition:all .3s ease;
}

p{
    margin-bottom:15px;
}

.btn{
    padding:10px 50px 10px 30px;
    position:relative;
    background:rgba(255,255,255,0.25);
    font-weight:600;
    font-size:100%;
    z-index:5;
    border-radius:20px;
    border:none;
}
.btn.telefon{
    background:url('assets/media/telefon.svg');
    background-size:20px;
    background-position:calc(100% - 15px) center;
    background-repeat:no-repeat;
}
.btn.formular{
    background:url('assets/media/icon_send.svg');
    background-size:20px;
    background-position:calc(100% - 15px) center;
    background-repeat:no-repeat;
    opacity:1!important;
}
.btn:before{
    content:'';
    display:block;
    width:25px;
    height:25px;
    background:url('assets/media/plus.svg');
    background-size:100%;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    top:50%;
    right:15px;    
    z-index:9;
    transform:translateY(-50%);
    transition:all .3s ease;
}
/* .page-id-2 .btn.telefon{
    background: url('assets/media/telefon_red.svg');
    background-size: 20px;
    background-position: calc(100% - 15px) center;
    background-repeat: no-repeat;
}

.page-id-2 .btn.formular{
    background: url('assets/media/icon_send_red.svg');
    background-size: 20px;
    background-position: calc(100% - 15px) center;
    background-repeat: no-repeat;
    opacity: 1!important;
}
.page-id-2 .btn::before{
    background: url('assets/media/plus_red.svg');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
} */

.btn:after{
    content:'';
    display:block;
    width:0;
    height:100%;
    background:var(--brand-accent-color);
    position:absolute;
    top:0;
    left:0;
    border-radius:20px;
    z-index:-1;
    transition:all .3s ease;
}

.btn:hover{
    color:var(--white);
}
.btn:hover:before{
    transform:rotate(180deg) translateY(50%);
    transition:all .3s ease;
}
.btn:hover:after{
    width:100%;
    transition:all .3s ease;
}

h1{
    font-size:335%;
    margin-top:0;
    font-weight:700;
}
h2{
    font-size:200%;
    margin-top:0;
}
h3{
    font-size:170%;
    margin-top:0;
}

.topline {
  font-family: 'Zen Dots', sans-serif;
  color:var(--brand-accent-color);
  font-size:150%;
  line-height:1;
  margin-bottom: 10px;
  display: block;
}
.headline{
    line-height:1;
    margin-bottom:35px;
}

.wrapper{
    margin-top:135px;
}

.fluentform input,
.fluentform select,
.fluentform textarea{
    background:var(--brand-secondary-color-30);    
    padding:10px 25px!important;
    border:none!important;
    border-radius:20px!important;
}
.fluentform input::placeholder,
.fluentform select::placeholder,
.fluentform textarea::placeholder{
    color:var(--brand-primary-color-text)!important;    
}
.fluentform input:focus::placeholder,
.fluentform select:focus::placeholder,
.fluentform textarea:focus::placeholder{
    color:var(--brand-secondary-color-text)!important;    
}
.fluentform input[type="checkbox"], 
.fluentform input[type="radio"]{
    margin-right:10px!important;
    top:0!important;
    width:15px!important;
    height:15px!important;
    padding:0!important;
    background:transparent!important;
}
.fluentform input[type="checkbox"]::after{
    width:15px;
    height:15px;
    border-radius:2.5px;
}
.fluentform .ff_t_c{
    font-size:75%;
    margin-bottom:10px;
}
.fluentform .btn.formular{
    margin-top:15px;
    margin-bottom:0!important;
}
.fluentform .ff-dropzone span{
    color:var(--brand-primary-color-text)!important;
    border-color:var(--brand-accent-color)!important;
}



/*-------------------KARRIERE SINGLE---------------------*/


#single-karriere .wrapper .stellencontent{padding-bottom:75px;}
#single-karriere .wrapper .stellencontent .beschreibung .heroimage{height:400px;position:relative;}
#single-karriere .wrapper .stellencontent .beschreibung .heroimage:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:var(--brand-primary-color-50);}
#single-karriere .wrapper .stellencontent .beschreibung .heroimage img{height:100%;width:100%;object-fit:cover;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper{padding-bottom:150px;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .content{margin-top: -50px;position: relative;padding-right:75px;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .content .topline{margin-bottom:50px;display:block;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .content .headline{font-size:200%;line-height:1.2;margin-bottom:50px;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .infos .infowrapper{display:flex;flex-direction:row;margin-top:50px;padding:0;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .infos .infowrapper li{width:35%;list-style:none;padding-left:40px;position:relative;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .infos .infowrapper li.umfang:before{content:'';display:block;width:30px;height:30px;position:absolute;top:-5px;left:0;background:url('assets/media/icon_umfang.svg');background-position:center;background-repeat:no-repeat;background-size:100%;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .infos .infowrapper li.start:before{content:'';display:block;width:30px;height:30px;position:absolute;top:-5px;left:0;background:url('assets/media/icon_start.svg');background-position:center;background-repeat:no-repeat;background-size:100%;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .formular:not(.btn){margin-top: -50px;position: relative;padding:35px 25px;background:var(--brand-primary-color-light);border-radius:30px;}
#single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .formular.btn{background: var(--brand-secondary-color-30);border-radius:20px;}

#single-karriere .wrapper .stellencontent .beschreibung .anforderungswrapper .content{margin-top:50px;position: relative;padding-right:75px;}
#single-karriere .wrapper .stellencontent .beschreibung .anforderungswrapper .content .topline{margin-bottom:10px;display:block;}
#single-karriere .wrapper .stellencontent .beschreibung .anforderungswrapper .content .beschreibung ul{padding-left:0;}
#single-karriere .wrapper .stellencontent .beschreibung .anforderungswrapper .content .beschreibung ul li{padding-left:20px;position:relative;margin:15px 0;list-style:none;}
#single-karriere .wrapper .stellencontent .beschreibung .anforderungswrapper .content .beschreibung ul li:before{content:'';display:block;width:10px;height:10px;background-color:var(--brand-accent-color);position:absolute;top:5px;left:0;border-radius:50%;}

#projektsingle{margin-top:250px;margin-bottom:25px;}

#projektsingle .danksagung{padding:50px;border-radius:15px;background:var(--lightgray);margin:50px 0;}
#projektsingle .danksagung .headline{display:block;width:100%;font-size:100%;font-weight:800;position:relative;}
#projektsingle .danksagung .headline:after{content:'';display:block;width:45px;height:35px;background:url('../media/quote.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;top:-10px;right:0;}

#projektsingle .galerie{display:flex;flex-wrap:wrap;gap:15px;}
#projektsingle .galerie .item{height:275px;width:calc(50% - 15px);}
#projektsingle .galerie .item img, #projektsingle .galerie .thumbnail{object-fit:cover;object-position:center;width:100%;height:100%;border-radius:15px;}
#projektsingle .galerie .owl-controls .owl-dots{margin-top:-47.5px;}
#projektsingle .galerie .copyright{display:block;position:relative;width:max-content;float:right;margin-top: 5px;margin-right:15px;}


#projektsingle .eckdaten{margin-top:75px;}
#projektsingle .eckdaten .headline{margin-bottom:25px;position: relative;width:100%;}
#projektsingle .eckdaten .headline:after{content:'';display:block;width:60%;height:2px;position:absolute;top:50%;right:0;transform:translateY(-50%);background:var(--gray);}
#projektsingle .eckdaten .toprow, #projektsingle .eckdaten .middlerow, #projektsingle .eckdaten .bottomrow{margin-bottom:25px;}
#projektsingle .eckdaten .toprow .title, #projektsingle .eckdaten .middlerow .title, #projektsingle .eckdaten .bottomrow .title{font-size:100%;font-weight:800;display:block;margin-bottom:10px;}
#projektsingle .eckdaten .toprow .status, #projektsingle .eckdaten .middlerow .status, #projektsingle .eckdaten .bottomrow .status{padding:0px 15px 2px;border-radius:15px;background:var(--light);color:var(--font);display:inline-block;width:max-content;margin:0 5px 10px 0;}
#projektsingle .eckdaten .toprow .status.antrag{background:var(--blue);color:var(--white);}
#projektsingle .eckdaten .toprow .status.umsetzung{background:var(--green);color:var(--white);}
#projektsingle .eckdaten .toprow .status.abgeschlossen{background:var(--gray);color:var(--white);}
#projektsingle .eckdaten .toprow .caticon{display:inline-block;}
#projektsingle .eckdaten .toprow .caticon img{width:50px;}

#projektsingle .widebtn{margin-top:50px;}


@media (max-width: 1200px) {

    .punktuntenrechts::before, .punktuntenlinks::before, .punktobenlinks::before, .punktobenrechts::before{width:100%;}

    .btn{max-width:100%;}
}
@media(max-width:992px){

    h1{font-size:275%;}
    h2{font-size:150%;}

    .wrapper{margin-top:100px;}

    .btn{font-size:80%;}

    #single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .infos .infowrapper li{width:50%;}
    #single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .formular:not(.btn){padding:25px 15px;border-radius:15px;}
    #single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .formular .headline{margin-bottom:15px;}

    #projektsingle{margin-top:150px;}
    #projektsingle .col-lg-6{order:1;}
    #projektsingle .col-lg-5{order:2;margin-top:50px;}

}

@media (max-width:767px){
    h1{font-size:225%;}
    h2{font-size:150%;}
    .topline{font-size:125%}

    .wrapper{margin-top:100px;}

    #single-karriere .wrapper .stellencontent .beschreibung .heroimage{height:250px;}
    #single-karriere .wrapper .stellencontent .beschreibung .contentwrapper .content{padding-right:0;}
    #single-karriere .wrapper .stellencontent .beschreibung .contentwrapper{padding-bottom:0;}
}
@media (max-width:600px){
    h1{font-size:200%;}
    h2{font-size:125%;}
    .topline{font-size:100%}

    #single-karriere .wrapper .stellencontent{padding-bottom:0;}

    #projektsingle{margin-top:125px;}
    #projektsingle .galerie .item{height:200px;}
}