@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&family=Roboto:wght@700&display=swap');
/* [ROOT] */
:root {
    --primary-color: #8f8f8f;
    --secondary-color: #900055;
    --text-color: #939393;
    --background-color: #f4f3f3;

    --font-primary: "Roboto",sans-serif;
    --font-secondary: "Roboto Condensed", sans-serif;;
    --font-size-base: 16px;

    /* COLORS*/
    --white-color : #FFFFFF;
    --black-color : #000;
}

/* [SETTINGS] */
body {margin: 0;padding: 0;/*background-color: #f2f2f2;*/background-position: center top 40px; background-size: contains;background-repeat: no-repeat;min-height: 100vH;overflow-x:hidden;}
*{box-sizing: border-box;}
img{max-width: 100%;}
a{color:#000;}
a:hover{font-weight:500;}

/* [GLOBAL] */
.main-container{max-width: 1925px;width: 100%;margin: 0 auto;display: flex;flex-direction: column;justify-content: start;align-items: end;padding: 20px 0;}
.header{width: 100%;display: flex;flex-direction: row;justify-content: end;gap: 92px;padding-right: 212px;z-index: 0;}
.header .text-right{min-width: 455px;padding: 0;margin: -14px 0 0;}
.header .text-right p{font-size: 48px;font-weight: 700;line-height: 60px;text-transform: uppercase;margin: 0;}
.header .navigation{display: flex;flex-direction: row;gap:45px;margin-top: 25px;}
.header .navigation li a{color:#000;text-decoration: none;text-transform: uppercase;font-weight: 700;font-size: 19px;}
.header .navigation li a:hover,
.header .navigation li a.active{text-decoration: underline;}
.header .logo {flex-basis: 100%;height: 50px;margin-left: 85px;}
.header .logo img{max-width: 65px;margin-top: 110px;margin-left: 40px;}

/* [HOME MAIN] */
main{padding: 50px 325px 50px 0;}
#angebot_id,
#wir_id,
#kontakt_id{align-items: flex-start;}
#wir_id .col_left ul li a,
#kontakt_id .col_left ul li a,
#wir_id #angebot .modal .close,
#kontakt_id #angebot .modal .close{display: none;} 
#wir_id #angebot .modal .left,
#kontakt_id #angebot .modal .left{background-color: #FFFFFF;}
#angebot {display: flex;margin-left: 250px;padding-right: 0;}
#angebot .col_left{width: 855px;display: flex;flex-direction: row;justify-content: space-between;position:relative;}
#angebot .col_right{width: 800px;padding-top: 85px;margin-left: -35px;z-index: 1;min-width: 800px;}
#angebot .col_left ul{display: flex;flex-direction: column;list-style: none;gap: 90px;padding-top: 25px;}
#angebot .col_left ul a{text-decoration: none;color: #000;font-size: 45px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.8px;line-height: 55px;}
#angebot .col_left ul a:hover{color: #35EADF;}

/* SUB CONTENT DETAIL*/
#angebot .modal{position:absolute;top:10px;min-height:80vH;display:none;box-sizing:border-box;z-index: 1;}
#angebot .modal .left{background-color: #F8FCBE;padding: 40px 100px 40px 40px;flex-basis:100%;position:relative;min-width: 950px;}
#angebot .page-content{display:none;}
#angebot .modal .close{width: 50px;height: 50px;position:absolute;display: flex;justify-content: center;align-items: center;top: 25px;right: 25px;cursor:pointer;}
#angebot .modal .close .line{background: #000;width:100%;height:5px;position:relative;transform: rotate(45deg);}
#angebot .modal .close .line:after{position:absolute;content:'';background: #000;width:100%;height:5px;transform: rotate(-90deg);}
#angebot .modal .modal-title{text-decoration: none;color: #000;font-size: 45px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.8px;line-height:55px;}
#angebot .modal .modal-content{font-size: 33px;font-weight: 300;line-height: 40px;font-family:var(--font-secondary);}

/* [projekte] */
#portfolio_id {
  align-items: flex-start;
}
#projekte{display: flex;margin-left: 250px;padding-right: 0;}
#projekte .project-list .page-content{display:none;}
#projekte .project-list {display:flex;flex-direction:row;gap:7px;justify-content:space-between;margin-top: 15px;margin-left: 50px;}
#projekte .project-list .project-left,
#projekte .project-list .project-right{width:450px;display:flex;flex-direction:column;gap:10px;max-width:550px;}
#projekte .project-list .project-card{background-color:#F4CCF6;padding:20px 10px;width:100%;height:auto;position:relative;cursor:pointer;}
#projekte .project-list .project-card .project-card-title{margin: 0;font-size: 24px;font-weight: 700;text-transform: uppercase;}
#projekte .project-list .project-card:after{position:absolute;background:#000;width:180px;height:8px;content:'';top:0;left:0;}
#projekte .project-list .project-card .project-card-lead{font-weight:400;font-family:var(--font-secondary);font-size:22px;}
/*#projekte .col_right {width: 60%;padding-top: 15px;margin-left: -100px;position: absolute;right: -50%;}*/
#projekte .col_right{width: 650px;padding-top: 85px;margin-left: -35px;z-index: 1;min-width: 650px;}

/*.project-modal{position:absolute;width: 895px;background-color: #eeeded;min-height: 80vH;display:none;padding: 40px 100px 40px 40px;box-sizing:border-box;margin-top: -75px;z-index: 0;}
.project-modal .modal-title{text-decoration: none;color: #000;font-size: 45px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.8px;line-height:55px;}
.project-modal .modal-content{font-size: 33px;font-weight: 300;line-height: 40px;font-family:var(--font-secondary);}
.project-modal .close{width: 50px;height: 50px;float:right;position:relative;display: flex;justify-content: center;align-items: center;top: -20px;right: -90px;cursor:pointer;}
.project-modal .close .line{background: #000;width:100%;height:5px;position:relative;transform: rotate(45deg);}
.project-modal .close .line:after{position:absolute;content:'';background: #000;width:100%;height:5px;transform: rotate(-90deg);}*/

.project-modal{position:absolute;top:0;min-height:80vH;display:none;box-sizing:border-box;z-index: 1;margin-left: 10%;max-width: 90%;}
.project-modal .left{background-color: #eeeded;padding: 40px 100px 40px 40px;flex-basis:100%;position:relative;min-width: 950px;}
#projekte .page-content{display:none;}
.project-modal .close{width: 50px;height: 50px;position:absolute;display: flex;justify-content: center;align-items: center;top: 25px;right: 25px;cursor:pointer;}
.project-modal .close .line{background: #000;width:100%;height:5px;position:relative;transform: rotate(45deg);}
.project-modal .close .line:after{position:absolute;content:'';background: #000;width:100%;height:5px;transform: rotate(-90deg);}
.project-modal .modal-title{text-decoration: none;color: #000;font-size: 45px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.8px;line-height:55px;}
.project-modal .modal-content{font-size: 33px;font-weight: 300;line-height: 40px;font-family:var(--font-secondary);}

.modal,
.mobile-content{display:none;}
.modal-content iframe{max-width: 100%!important;}

@media only screen and (max-width: 1950px) {
    body {background-size: contain;}
    body.page_3,
    body.page_5{background-size: cover;background-position: right 15% top -5px !important;}
    body.page_3{background-position: right 55% top -5px !important;background-size: auto;}
    body.page_5{background-position: right 40% top 0 !important;background-size: auto;}
    main {margin-left: 250px;padding-right: 150px;}
    #angebot {padding-top: 25px;width:75%;}
    #angebot .modal .left,
    .project-modal .left{min-width: 60%;}
    #angebot,
    #projekte {margin-left: 15%;padding-right: 25px;}
    #projekte {margin-left: 10%;width: 90%;}
    #angebot .col_right,
    #projekte .col_right {width: auto;padding-right: 10%;min-width:50%;}
    .header {padding-right: 0;gap: 0;justify-content: space-between;}
    .header .text-right p {font-size: 42px;line-height: 58px;}
    .header .logo {margin-left: 0;flex-basis: auto;}
    .navigation {padding-left: 0;}
    #angebot .col_left {width: 60%;}
    #angebot .col_left ul{gap: 40px;}
    #angebot .col_left ul a{font-size: 35px;line-height: 40px;}
    #angebot .modal .modal-title,
    .project-modal .modal-title{font-size: 35px;font-weight: 700;line-height:45px;margin-top: 50px;}
    #angebot .modal .modal-content,
    .project-modal .modal-content{font-size: 26px;line-height: 32px;}
}
@media only screen and (max-width: 1050px) {
    body.page_3,
    body.page_5{background-size: 200vW;background-position: right 65% top -10px !important;}
    main {padding-right: 50px;margin-left: 18%;}
    #angebot,
    #projekte{margin-left: 10%;padding-right: 0;width:90%;padding-top: 0;}
    .header {flex-wrap: wrap;padding-right: 50px;}
    .header .logo img {max-width: 45px;margin-top: 45px;margin-left: 25px;}
    .header .navigation {margin-top: 0;gap: 25px;}
    .header .text-right {text-align: right;flex-basis:100%;min-width: auto;}
    .header .text-right p {font-size: 32px;line-height: 44px;}
    #angebot .col_left,
    #projekte .col_left{width:100%;margin-right: 25px;margin-left: 25px;}
    #angebot .col_left{width:80%}
    #angebot .modal,
    .project-modal{margin-right: 25px;margin-left: 25px;}
    #angebot .modal .left,
    .project-modal .left{padding-right: 40px;}
    #angebot .col_right,
    #projekte .col_right{width: auto;}
    #angebot .col_left ul{width: 100%;}
    #angebot .col_left ul a{font-size: 26px;line-height: 32px;}
    .col_right{display:none!important;}
    .mobile-content{display:block;}
    #angebot .modal .modal-title,
    .project-modal .modal-title{font-size: 30px;font-weight: 700;line-height:40px;}
    #angebot .modal .modal-content,
    .project-modal .modal-content{font-size: 22px;line-height: 30px;}
    #projekte .project-list{flex-direction: column;gap: 10px;margin-right: 25px;}
    #projekte .project-list .project-left,
    #projekte .project-list .project-right{width:100%;}
    #projekte .project-list .project-card .project-card-title {font-size: 22px;}
}
@media only screen and (max-width: 550px) {
    body {background-size: 200vW;background-position-x: left -250px !important;}
    body.page_3,
    body.page_5{background-size: 185vW;}
    body.page_3{background-position: left -100px top 10px !important;}
    body.page_5{background-position: left -145px top 5px !important;}
    main,#angebot,#projekte {padding-right: 0;padding-top: 10px;}
    #angebot {padding-top: 0;margin-top: -10px;}
    .header {padding-right: 25px;}
    .header .logo img {max-width: 35px;margin-top: 35px;margin-left: 25px;}
    .header .navigation {margin-top: 0;gap: 15px;}
    .header .navigation li a {font-size:16px;}
    .header .text-right p {font-size: 26px;line-height: 32px;}
    #angebot .col_left ul a{font-size: 20px;line-height: 26px;}
    #projekte .project-list .project-card .project-card-title {font-size: 20px;}
    #angebot .modal .modal-title,
    .project-modal .modal-title{font-size: 26px;font-weight: 700;line-height:36px;}
    .modal-title{hyphens:auto;}
    #angebot .modal .modal-content,
    .project-modal .modal-content{font-size: 20px;line-height: 28px;}
}