/* Template for Schiesser Architektur © */

:root {
    --dunkelrot: #a8001f;
}


html 
{
   height:			100%;
   scroll-behavior: smooth;
}


body
{
    height:         100%;
    margin:			0px;
    padding:		0px;
    font-family:	"CenturyGothicStdRegular";
    font-weight:	400;
    font-size:		16px;
    line-height:	180%;
    letter-spacing:	0.03em;
    background:     #000000;
    color:          #ffffff;
}





#anchor-jobs { position: absolute; height: 180px; margin-top: -180px; }


#system-message { margin: 0px; }
img { height: auto; max-width: 100%; vertical-align: middle; border: 0px; }


#header { position: fixed; z-index: 9999; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; flex-direction: row-reverse; padding: 30px 20px 30px 20px; transition: .3s ease-out; align-items:center;}

.shrink #header { background: #000000; padding: 30px 20px 30px 20px; }


#logo { width: 240px; transition: .3s ease-out; }
#logo #zweifel { width: 185px; transition: .3s ease-out; }   
#logo p { margin: 0px; }
#logo img { margin-bottom: 20px; }

#showbox { position: relative;}
#overlay { background: rgb(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 998; }

#container-lead { position: absolute; top:0; bottom:0; left: 0; right: auto; background: rgb(0,0,0,.6); display: flex; flex-wrap: wrap; align-items: end; z-index: 999; width: 285px; padding-top:80px; }
#lead { padding: 20px 20px 20px 20px; width: 100%; box-sizing: border-box; }
#leadtext { display: none; }
#einleitung-mobile { display: none; }


#titelbild p { margin: 0px; }
#titelbild { height: 400px; }
#titelbild img { position: absolute; object-fit: cover; height: 100%; width: 100%; }


.newsflash { display: grid; grid-template-columns: 1fr; gap: 20px; }

#jobsbutton { position: absolute; right: 30px; bottom: 30px; z-index: 9997; text-transform: uppercase; letter-spacing: 0.08em; transform: rotate(-15deg); line-height: 160%; font-size: 15px; }
#jobsbutton a { background: var(--dunkelrot); color: #ffffff; width: 100px; height: 100px; border-radius: 50%; display: block; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; text-align: center; transition: .3s ease-out; } 
#jobsbutton a:hover { background: #ffffff; color: var(--dunkelrot); }




.mitgliedschaft { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.logo-mitglied { flex: 1; }


.items-leading { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 60px 0px 120px 0px; }
.items-leading .blog-item { padding: 0px; position: relative; }
.items-leading .item-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.items-leading .item-content a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgb(0,0,0,.6) url(../images/arrow.png) no-repeat scroll left 20px bottom 20px; background-size: 80px 22px; padding: 20px 40px 60px 20px; transition: .3s ease-out; display: flex; flex-wrap: wrap; align-items: end; box-sizing: border-box; }
.items-leading .item-content a:hover { background: rgb(0,0,0,.3) url(../images/arrow.png) no-repeat scroll right 20px bottom 20px; background-size: 80px 22px; }



#content { margin: 0px 20px; padding: 40px 0px; }

video { width: 100%; height: auto; }
.wf-columns { gap: 40px; }

.jobs { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0px 0px 50px 0px; }
.jobs p { margin: 0px; }
     
.jobs-left { background: var(--dunkelrot); padding: 20px; box-sizing: border-box; font-family: "CenturyGothicStdBold"; }
.jobs-left ul { margin: 0px !important; }
.jobs-left li { padding: 5px 0px !important; background: none !important; border-bottom: 1px solid #ffffff; }
.jobs-left li:last-child { padding: 5px 0px 0px 0px !important; border: 0px; }


.blog-item:first-child { padding: 0px; }
.blog-item { padding: 30px 0px 0px 0px; }


#content a { color: var(--dunkelrot); }
#content ul { margin: 0px 0px 10px 0px; padding: 0px; }
#content li { margin: 0px; padding: 0px 0px 0px 25px; line-height: 180%; list-style: none; background: url(../images/list.png) no-repeat scroll 0 11px; }


.vorgehen ul { margin: 0px 0px 60px 0px !important; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; }
.vorgehen li { background: url(../images/next.png) no-repeat scroll center bottom 20px !important; background-size: 45px 20px !important; padding: 0px 0px 40px 0px !important; margin: 0px !important; }
.vorgehen li:last-child { background: none !important; padding: 0px !important; }
.vorgehen-inhalt { background: var(--dunkelrot); padding: 15px 20px 10px 20px; display: inline-block; flex-wrap: wrap; align-items: center; text-transform: uppercase; letter-spacing: 0.12em; }



.arrows { margin: 30px 0px 20px 0px !important; }
.arrows li { padding: 0px 0px 30px 90px !important; background: url(../images/arrow.png) no-repeat scroll 0 2px !important; background-size: 60px 16px !important; }


#container-more { background: #090909; padding: 50px 0px; position: relative; z-index: -2; }
#more { margin: 0px 20px; }
#submenu { margin: 0px 20px; padding: 0px 0px 40px 0px; }




.team .uk-inline-clip a { pointer-events: none; }

.nameemail { position: relative; }
.nameemail a { color: #ffffff !important; background: rgb(0,0,0,.5) url(../images/email.png) no-repeat scroll right 20px center; background-size: 25px 20px; height: 80px; width: 100%; margin: -80px 0px 20px 0px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 20px; display: flex; flex-wrap: wrap; align-items: center; padding: 5px 0px 0px 20px; box-sizing: border-box;}
.nameemail a:hover { background: rgb(0,0,0,.8) url(../images/email-negativ.png) no-repeat scroll right 20px center; background-size: 25px 20px; text-decoration: none; }


.vorteile ul { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0px 0px 40px 0px !important; }
.vorteile li { background: var(--dunkelrot) !important; padding: 20px !important; text-transform: uppercase; letter-spacing: 0.12em; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; }


#kontaktaufnahme { margin: 50px 0px 0px 0px; }
#kontaktaufnahme h2 { padding: 0px; }
#kontaktaufnahme a { color: #ffffff; }
#kontaktaufnahme .nameemail a { margin: -90px 0px 20px 0px; }

.ansprechperson { background: #161616; padding: 35px 40px; }

footer { background: #161616; position: relative; z-index: -2; }
#footer { margin: 0px 20px; padding: 50px 0px; }
#footer a { color: #ffffff; }
#footer a:hover { color: rgb(255, 255, 255, .4); }

#title-testimonials { margin: 0px 20px; }

#adresse { padding: 0px 0px 30px 0px; }
#sitemap { display: none; text-transform: uppercase;  }

#mitglied { margin-top: 50px; }


#container-bottom { background: var(--dunkelrot); padding: 15px 0px 10px 0px; color: rgb(255, 255, 255, .6);}
#bottom { margin: 0px 20px; }
#bottom p { margin: 0px; }
#copyright { padding: 0px 0px 20px 0px; }


.socialmedia { display: flex; flex-wrap: wrap; gap: 25px; }
.facebook { width: 11px; }
.instagram { width: 22px; padding: 1px 0px 0px 0px; }

.back-to-top { font-size: 0; background: url(../images/totop.png) no-repeat scroll 0 0; background-size: 30px 19px; width: 30px; height: 19px; bottom: 20px; right: 15px; position: fixed; left: 50%; margin: 0px 0px 0px -15px; }

.nebeneinander { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.nebeneinander .button { margin-top: 0px; }
.nebeneinander p { margin: 0px; }

h1 { margin: 0px; padding: 0px; font-size: 25px; line-height: 140%; font-weight: 300; text-transform: uppercase; letter-spacing: 0.11em; color: #ffffff; } 
h2 { margin: 0px 0px 20px 0px; padding: 40px 0px 0px 0px; font-size: 25px; line-height: 130%; font-weight: 400; text-transform: uppercase; letter-spacing: 0.11em; color: var(--dunkelrot); } 
h3 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 19px; line-height: 140%; font-weight: 700; letter-spacing: 0.04em; font-family: "CenturyGothicStdBold"; } 
h4 { margin: 0px; padding: 0px; font-size: 18px; line-height: 170%; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; } 
h5 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 25px; line-height: 120%; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dunkelrot); } 

h4 a { color: #ffffff !important; }

#pressemitteilungen h2 { padding: 10px 0px 0px 0px !important; }

hr { border: 0px; border-bottom: 1px solid #ffffff; margin: 0px 0px 50px 0px; padding: 50px 0px 0px 0px; }

h2:first-of-type { padding: 0px; }
p + h2 { padding: 40px 0px 0px 0px !important; }

#more h3 { text-transform: uppercase; letter-spacing: 0.11em; color: var(--dunkelrot); font-family: "CenturyGothicStdRegular"; margin: 0px 0px 30px 0px; }


.eapps-instagram-feed-posts-grid-load-more { padding: 14px 20px 10px 20px !important; }

.button { border: 1px solid var(--dunkelrot); text-transform: uppercase; padding: 14px 20px 10px 20px; color: var(--dunkelrot) !important; display: inline-block; margin: 20px 0px 0px 0px; letter-spacing: 0.1em; font-size: 17px; position: relative; overflow: hidden; transition: color .5s ease-out; }
.button::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--dunkelrot); transition: left .5s ease-out; z-index: -1; }
.button:hover::after { left: 0; }
.button:hover { color: #ffffff !important; }

.buttons { margin-top: 20px; }
.buttons .button { margin-top: 0px; }

.button.negativ { color: #ffffff !important; border: 1px solid #ffffff; }






a { text-decoration: none; outline: none; transition: .3s ease-out; }
a:hover { color: #ffffff; }
a:hover { text-decoration: none; outline: none; }
a:focus { text-decoration: none; outline: none; }



p { margin: 0px 0px 10px 0px; }
strong { font-weight: 700; font-family: "CenturyGothicStdBold"; }

.clear { line-height: 0; }

table { margin: 0px 0px 10px 0px; width: 100%; }
td { border-bottom: 1px solid var(--dunkelrot); padding: 13px 0px 10px 0px; }
td:first-child { width: 200px; font-family: "CenturyGothicStdBold"; }
tr:last-child td { border-bottom: 0px; }


figure { padding: 0px; margin: 0px; }


#container-testimonials { background: url(../images/testimonials.jpg) no-repeat scroll center center; background-size: cover; display: flex; flex-wrap: wrap; justify-content: end; }
#testimonials { background: rgb(0,0,0,.5); width: 100%; }


.uk-scope .testimonials .uk-slideshow-items > * { padding: 0px 50px; }
.uk-scope .testimonials .uk-dotnav { padding: 0px 50px 50px 50px; }



@media(min-width:500px)
{
    #header { padding: 40px 30px 0px 30px; }
    #logo { width: 300px; }
    #logo #zweifel { width: 230px; }   
  

    .shrink #header { padding: 40px 30px 30px 30px; }
    #mitglied .mitgliedschaft { width: 80%; }

    #container-lead { width: 460px; }
    #lead { padding: 30px 30px 20px 30px; }

    #content { margin: 0px 30px; }

    #more { margin: 0px 30px; }
    #submenu { margin: 0px 30px; }



    .newsflash { gap: 30px; }
    .items-leading { gap: 30px; }

    #title-testimonials { margin: 0px 30px; }

    #footer { margin: 0px 30px; }
    #bottom { margin: 0px 30px; }

}




@media(min-width:600px)
{
    #header { padding: 50px 30px 0px 30px; }
    #container-lead { width: 560px; }
    #logo #zweifel { width: 230px; }   
  

    #jobsbutton { right: 50px; bottom: 40px; font-size: 18px; }
    #jobsbutton a { width: 130px; height: 130px; } 

    .shrink #header { padding: 30px 30px 30px 30px; }

    .newsflash { grid-template-columns: 1fr 1fr; gap: 30px; }
    .jobs { gap: 30px; }
    .vorteile ul { grid-template-columns: 1fr 1fr; }

    #submenu { padding: 0px 0px 60px 0px; }
    .items-leading { grid-template-columns: 1fr 1fr; gap: 40px; }

    #kontaktaufnahme { width: 380px; }

    .buttons { display: flex; flex-wrap: wrap; gap: 20px; }

    .uk-scope .testimonials .uk-slideshow-items > * { padding: 0px 80px; }
    .uk-scope .testimonials .uk-dotnav { padding: 0px 80px 80px 80px; }

    h1 { font-size: 28px; }
    h2 { font-size: 28px; }
    h3 { font-size: 20px; line-height: 130%; } 
}





@media(min-width:800px)
{
    #logo { width: 350px; }  

    #leadtext .mitgliedschaft { width: 70%; }
    .mitgliedschaft { width: 50%; }
    #mitglied .mitgliedschaft { width: 50%; }

    #leadtext { display: block; }

    #header { padding: 50px 30px 0px 30px; }
    #titelbild { height: 500px; }
    #einleitung-mobile { display: none} ;

    #container-lead { top: 0; width: 760px; right: auto; }
    #lead { padding: 30px 30px 40px 30px; }

    #container-more { padding: 60px 0px; }
    .button { padding: 14px 40px 10px 40px; }
    .button.cam { padding: 10px 20px 6px 20px; }

    #footer { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 60px 0px; }


    h1 { font-size: 35px; } 
}



@media(min-width:1000px)
{
    #header { padding: 50px 50px 0px 50px; }

    .shrink #logo { width: 300px; }
    .shrink #logo #zweifel { width: 200px; }
    .shrink #header { padding: 30px 50px 30px 50px; }

    #titelbild { height: 500px; }
    #container-lead { width: 1220px;}
    #lead { padding: 50px 50px 40px 50px; }

    .jobs { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
    .jobs-left { display: flex; flex-wrap: wrap; align-items: center; }

    .newsflash { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
    .jobs .newsflash { grid-template-columns: 1fr 1fr; }

    .vorteile ul { grid-template-columns: 1fr 1fr 1fr; }

    .items-leading { padding: 50px 0px 70px 0px; }
    #content { margin: 0px auto; width: 900px; padding: 70px 0px; }

    .blog-item:first-child { padding: 0px; }
    .blog-item { padding: 50px 0px 0px 0px; }

    #more { margin: 0px auto; width: 900px; }
    #submenu { margin: 0px auto; width: 900px; padding: 0px 0px 80px 0px; }

    #container-testimonials { min-height: 600px; }
    #testimonials { width: 50%; }

    #title-testimonials { margin: 0px auto; width: 900px; }
    #footer { margin: 0px auto; width: 900px; }
    #sitemap { display: block; padding: 39px 0px 0px 0px; }
    #adresse { padding: 0px; }
    #copyright { padding: 0px; }

    #bottom { margin: 0px auto; width: 900px; display: flex; flex-wrap: wrap; justify-content: space-between; }
    .arrows { margin: 50px 0px 20px 0px !important; }

    h1 { font-size: 45px; } 
}







@media(min-width:1250px)
{
    #header { flex-direction: row; }
    #logo { width: 280px; }

    .shrink #header { padding: 30px 50px 25px 50px; }
    .shrink #logo { width: 260px; }
    .shrink #logo #zweifel { width: 200px; }
    #mitglied .mitgliedschaft { width: auto; }


    #content { width: 1100px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 100px; }
    #text { flex: 1; }
    #kontaktaufnahme { width: 380px; margin: 0px; }
    #title-testimonials { width: 1100px; }

    #container-more { padding: 80px 0px; }
    #more { width: 1100px; }

    .items-leading { grid-template-columns: 1fr 1fr 1fr; }
    .newsflash { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .jobs .newsflash { grid-template-columns: 1fr 1fr; }

    #submenu { width: 1100px; padding: 0px 0px 110px 0px; }

    #mitglied { margin-top: 60px; }

    .items-leading { grid-template-columns: 1fr 1fr 1fr; }

    #footer { width: 1100px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 150px; padding: 80px 0px; }
    #social { margin-left: auto; }
    #bottom { width: 1100px; }
}





@media(min-width:1400px)
{
    #logo { width: 350px; }
    #logo #zweifel { width: 265px; }   
    #header { padding: 60px 80px 0px 80px; }
    # { width: 1290px; }

    .shrink #header { padding: 30px 80px 25px 80px; }
    .shrink #logo { width: 260px; }
    .shrink #logo #zweifel { width: 200px; }

    #titelbild { height: 600px; }
    #lead { padding: 80px 80px 60px 80px; }

    #content { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 100px; width: 1300px; padding: 120px 0px; }
    #text { flex: 1; }
    #kontaktaufnahme { width: 400px; }

    .items-leading { padding: 50px 0px 120px 0px; }

    #more { width: 1300px; }
    #submenu { width: 1300px; padding: 0px 0px 140px 0px; }

    #title-testimonials { width: 1300px; }
    #footer { width: 1300px; }
    #bottom { width: 1300px; }


}