/*
Theme Name:  EVOQON Baugesellschaft mbH
Theme URI: https://www.intermedia-werbeagentur.de
Author: Intermedia Peters GmbH | Werbeagentur
Author URI: https://www.intermedia-werbeagentur.de
Version: 1.0
Text Domain: evoqon
*/
html,body{height:100%;margin:0;scroll-behavior:smooth}
body{display:flex;flex-direction:column}
header,footer{flex-shrink:0}
main{flex:1;display:flex;justify-content:center;align-items:center;text-align:left;z-index:4;padding:64px 0;color:#fff}
main.position-relative{padding-top:0;padding-bottom:0}
footer{z-index:3;font-family:'Open Sans';color:#fff;padding:24px 0}
.container{max-width:1800px}
#headwrap{width:100%;background-color:#e34331;color:#fff;height:96px;position:relative;z-index:5}
#headwrap a{transition:.75s}
#headwrap a:hover{color:#023866;text-decoration:none}
#menutoggle{display:none}
#mega-menu{display:flex;justify-content:flex-end;gap:64px;margin:0;padding:0;list-style:none;color:#fff;text-decoration:none;font-size:16px;font-family:'Open Sans';font-weight:700;text-transform:uppercase;height:96px;align-items:center;padding-right:64px}
#mega-menu > li{cursor:pointer;display:block;padding:37px 0}
#mega-menu > li > a{color:#fff;text-decoration:none}
#mega-menu li > ul{position:absolute;left:0;right:0;width:auto;background-color:#fff;opacity:0;visibility:hidden;transition:opacity 0.25s,transform 0.25s,visibility .25s;display:flex;justify-content:center;gap:15px;margin-top:36px;padding:15px;list-style:none;transform:translateY(40px);font-size:16px}
#mega-menu li:hover > ul{opacity:1;visibility:visible;transform:translateY(0);height:auto}
#mega-menu li > ul li a{color:#fff;text-decoration:none}
#mega-menu li:hover{color:#163767}
#mega-menu li > ul li a{color:#163767;display:flex;width:222px;height:120px;align-items:center;justify-content:center;border:1px solid #ccc;flex-direction:column}
#mega-menu li > ul li a:hover{color:#fff;background-color:#163767;border-color:#163767}
#mega-menu li > ul li a i{font-size:26px;margin-bottom:8px}
#mega-menu li.text{font-weight:300;max-width:420px;text-transform:none;padding-top:0;hyphens:auto;text-align:justify;padding-right:48px}
#mega-menu li > ul li.text a.inline-link{display:inline-block;padding:0;border:0;height:auto}
#mega-menu li > ul li.text a.inline-link:hover{background:none;color:#e34331}
#mega-menu li > ul li.text a.inline-link i{font-size:14px;margin-right:4px;margin-left:8px;margin-top:-3px}
#mega-menu li.li-dienstleistungen > ul li a{font-size:12px;width:180px;height:100px}
ul.social-media{margin:0;padding:0;list-style:none;display:flex;justify-content:flex-end;gap:32px;height:100%;align-items:center}
ul.social-media li a{color:#fff;text-decoration:none;transition:.5s;font-size:20px}
ul.social-media li a:hover{color:#023866;text-decoration:none}
.contact-box{display:flex;justify-content:flex-end;align-items:center;height:96px;gap:16px}
.contact-box i{margin-right:12px}
.contact-phone,.contact-button{color:#fff;text-decoration:none;display:block;padding:12px 24px}
.contact-button{background-color:#fff;border-radius:6px;color:#e34331}
.contact-button a{color:#e34331;text-decoration:none}
.contact-phone a{color:#fff;text-decoration:none}
#flexit{display:flex;justify-content:flex-end;gap:32px}
.logo{width:100%;height:auto;margin-top:15px}
#hero{width:100%;height:100vh;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover;position:fixed;z-index:0}
#hero:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:1}
.bg{animation:slide 6s ease-in-out infinite alternate;background-image:linear-gradient(-60deg,#000 50%,#111 50%);bottom:0;left:-50%;opacity:.1;position:fixed;right:-50%;top:0;z-index:2}
.bg2{animation-direction:alternate-reverse;animation-duration:7s}
.bg3{animation-duration:8s}
.bg4{animation-duration:9s}
.bg5{animation-duration:10s}
@keyframes slide {
0%{transform:translateX(-25%)}
100%{transform:translateX(25%)}
}
.slideshow-container{position:relative;width:100%;height:100vh;overflow:hidden;z-index:0}
.mySlides{position:absolute;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out}
.mySlides.active{opacity:1}
@keyframes slide {
0%{transform:translateX(-25%)}
100%{transform:translateX(25%)}
}
h1{font-family:'Open Sans';font-size:64px;font-weight:900;color:#fff;text-align:center}
h1.content-page{padding-top:64px}
h1:after{content:"";display:block;width:300px;height:10px;background:rgba(193,50,42,0.9);margin:32px auto}
h1.page-head{font-size:32px;text-align:left;padding-bottom:32px}
h1.page-head:after{display:none}
p.slogan{font-size:24px;color:#fff;line-height:40px;max-width:1200px;display:block;margin:0 auto;text-align:center}
ul.regions{margin:40px 0 0;padding:0;list-style:none;font-size:20px;color:#fff;font-weight:700;display:flex;justify-content:center;gap:16px}
ul.regions li{display:block;padding:16px 32px;background-color:rgba(227,67,49,0.7)}
.page-text a{color:rgba(227,67,49,1);text-decoration:underline}
.page-text a:hover{text-decoration:none;color:#163767}
footer a{color:#fff;transition:.5s;text-decoration:none}
footer a:hover{color:#e34331;text-decoration:none}
footer ul{display:flex;justify-content:flex-end;align-items:center;gap:24px;margin:0;padding:0;list-style:none}
footer p {margin: 0px; padding: 0px;}
.login-container{background:rgba(0,0,0,0.2);padding:2rem;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.1);width:500px;text-align:center;margin:0 auto}
.login-container input[type="text"],.login-container input[type="password"]{width:100%;padding:.8rem;margin:.5rem 0;border:1px solid #ccc;border-radius:5px;box-sizing:border-box}
.login-container button{width:100%;padding:.8rem;margin-top:1rem;border:none;border-radius:5px;background:#e34331;color:#fff;font-size:1rem;cursor:pointer;transition:background .3s ease}
.login-container button:hover{background:#b91013}
.login-container p{margin-top:1rem}
.login-container a{color:#e34331;text-decoration:none}
.login-container a:hover{text-decoration:underline}
.custom-gallery{text-align:center;position:relative}
.large-image-container{position:relative;display:inline-block}
.large-image{width:auto;height:auto;max-width:100%;max-height:650px;transition:opacity .3s ease;cursor:pointer}
.large-image.fade-out{opacity:0}
.thumbnail-strip-container{position:relative;margin:32px auto 0;max-width:80%}
.thumbnail-strip{display:flex;overflow-x:hidden;margin:0 30px}
.thumbnail-strip img{width:100px;height:auto;margin:0 5px;cursor:pointer;border:2px solid #000;transition:all .5s ease}
.thumbnail-strip img.thumbnail-active{opacity:1;border:2px solid #fff}
.thumbnail-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2em;cursor:pointer;z-index:10}
.thumbnail-nav.left{left:0}
.thumbnail-nav.right{right:0}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:2em;cursor:pointer;z-index:10}
.nav-arrow.left{left:-50px}
.nav-arrow.right{right:-50px}
.nav-arrow.left,.nav-arrow.right,.thumbnail-nav.left,.thumbnail-nav.right{opacity:.4;transition:.25s;color:#fff}
.nav-arrow.left:hover,.nav-arrow.right:hover,.thumbnail-nav.left:hover,.thumbnail-nav.right:hover{opacity:1}
#image-overlay{display:none;z-index:6}
#image-overlay img{max-width:90%;max-height:90%}
.text-justify{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Start - Kontaktseite */

body.page-template-page-kontakt{background-color:#e34331!important;height: 100%; position: relative; overflow-y: hidden;}
body.page-template-page-kontakt main {  flex: 1;display: flex;justify-content: center;align-items: center;width: 100%;}
body.page-template-page-kontakt main .container{width:100%!important; height: 100% !important; margin:0!important;padding:0!important;max-width:none!important}
body.page-template-page-kontakt main .container .row-12 {height: 100%;}
.contactpage {display: flex;width: 100%; height: 100%}
#contactmap {width: 50%;height: 100%;}
#contactmap iframe {width: 100%; height: 100%;}
.contact-info {display: flex;flex-direction: column;width: 50%;}
#contactform {flex: 1;width: 100%;height: 70%;background-color: #163767;}
#contactform form {padding: 64px 64px 64px 64px; width: auto; height: auto;}
#contactform form .form-control {border-radius: 0px;}
#contactform form textarea {height: 150px;}
#contactform form .wpcf7-list-item {margin: 0px; }
#contactform form label {display: block; width: 100%;}
#contactdata {flex: 1;width: 100%;height: 30%; font-size: 18px;display: flex;align-items: center;justify-content: center;}
.btn-white{color:#163767;background-color:#FFF;border-color:#FFF}
.btn-white:hover,.btn-white:focus,.btn-white:active,.btn-white.active,.open .dropdown-toggle.btn-white{color:#163767;background-color:#e34331;border-color:#FFF}
.btn-white:active,.btn-white.active,.open .dropdown-toggle.btn-white{background-image:none}
.btn-white.disabled,.btn-white[disabled],fieldset[disabled] .btn-white,.btn-white.disabled:hover,.btn-white[disabled]:hover,fieldset[disabled] .btn-white:hover,.btn-white.disabled:focus,.btn-white[disabled]:focus,fieldset[disabled] .btn-white:focus,.btn-white.disabled:active,.btn-white[disabled]:active,fieldset[disabled] .btn-white:active,.btn-white.disabled.active,.btn-white[disabled].active,fieldset[disabled] .btn-white.active{background-color:#FFF;border-color:#FFF}
.btn-white .badge{color:#FFF;background-color:#163767}
div.absolute {position: absolute; z-index: 500; width: 100%; bottom: 0px; left: 0px; font-size: 18px !important;}
div.absolute a {color:#fff;transition:.5s;text-decoration:none; font-size: 16px;}
div.absolute a:hover{color:#e34331;text-decoration:none}
div.absolute .col-md-8 a:hover {color: #eaeaea;}
*, *::before, *::after {box-sizing: border-box;}

/* Ende  - Kontaktseite */

main.page-about-us{position:relative;color:#fff}
main.page-about-us p{font-size:18px}
main.page-about-us h1,main.page-about-us h2,main.page-about-us h3,main.page-about-us h4,main.page-about-us h5,main.page-about-us h6{color:#fff}
.main-page,.subpage-section{position:relative;padding:120px 0;display:none}
.active-section{display:block!important}
.scroll-arrow{text-align:center}
.scroll-arrow a{position:absolute;left:50%;transform:translateX(-50%);z-index:10;font-size:3rem;color:#fff;text-decoration:none;animation:pulse 1.5s infinite}
.scroll-arrow a.arrow-down{bottom:0}
.scroll-arrow a.arrow-up{top:0}
@keyframes pulse {
0%{transform:translateX(-50%) scale(1);opacity:.4}
50%{transform:translateX(-50%) scale(1.1);opacity:1}
100%{transform:translateX(-50%) scale(1);opacity:.4}
}
.scroll-arrow a:hover{animation-play-state:paused}
.subpage-section,.main-page{opacity:0;transform:translateY(50px) scale(0.95);filter:blur(10px);transition:all .5s ease}
.active-section{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.card-img-top{width:100%;height:350px;object-fit:cover;object-position:center}
.card-title{font-weight:700;font-size:24px}
.card a.btn{width:100%;padding:.8rem;margin-top:1rem;border:none;border-radius:5px;background:#e34331;color:#fff;font-size:1rem;cursor:pointer;transition:background .3s ease}
.card a.btn i{padding-right:8px}
.card a.btn :hover{background:#b91013}
.lfont p{font-size:18px}
.page-icon{width:120px;margin-top:-25px;height:auto;float:right}
.page-icon img{width:auto;height:75px;float:right}
.head-icon{height:35px;width:auto;margin-bottom:20px}
.text-right{text-align:right}
.inner-data{display:block;margin:0 auto;width:255px}

ul.cloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 1.50rem;
  width: 100%;
}

ul.cloud li {
  --size: 12px; /* Standard-Fallback */
  --color: #ddd; /* Standardfarbe */
  color: var(--color);
  font-size: var(--size);
  display: block;
  padding: 0.125rem 0.5rem;
  position: relative;
  text-decoration: none;
  font-weight: bold;
}

ul.cloud li[data-weight="1"] { --size: 10px; }
ul.cloud li[data-weight="2"] { --size: 12px; }
ul.cloud li[data-weight="3"] { --size: 14px; }
ul.cloud li[data-weight="4"] { --size: 16px; }
ul.cloud li[data-weight="5"] { --size: 18px; }
ul.cloud li[data-weight="6"] { --size: 20px; }
ul.cloud li[data-weight="7"] { --size: 22px; }
ul.cloud li[data-weight="8"] { --size: 24px; }
ul.cloud li[data-weight="9"] { --size: 26px; }
ul.cloud li[data-weight="10"] { --size: 28px; }

/* Leichte Farbvariation für Abwechslung */
ul.cloud li:nth-child(2n+1) { --color: #bbb; }
ul.cloud li:nth-child(3n+1) { --color: #ccc; }
ul.cloud li:nth-child(4n+1) { --color: #eee; }

/* Effekte für Fokus und Hover */
ul.cloud li:focus {
  outline: 1px dashed;
}

ul.cloud li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: var(--color);
  transform: translate(-50%, 0);
  opacity: 0.15;
  transition: width 0.25s;
}

ul.cloud li:hover::before {
  width: 100%;
}

/* Animationen deaktivieren, falls der User Bewegungen reduziert hat */
@media (prefers-reduced-motion) {
  ul.cloud * {
    transition: none !important;
  }
}


@media (max-width: 1800px) {
    #mega-menu li.li-dienstleistungen ul {flex-wrap: wrap; justify-content: flex-start;}
}
/* Responsive Settings - www.intermedia-werbeagentur.de */
@media (max-width: 1680px) {
    .logo {margin-top: 25px;}
    #flexit {gap:16px;}
    #mega-menu { gap:32px; padding-right: 32px; font-size: 14px; }
    #mega-menu li > ul { font-size: 14px; }
    #mega-menu li > ul li a i {font-size: 20px;}
    #mega-menu li > ul li a { height: 100px;}
}
@media (max-width: 1440px) { 
    /* col-xl */
}
@media (max-width: 1399px) { 
    /* col-lg */
    div.contact-phone {display: none;}
    .contact-box { padding-left: 48px;}
    body.page-template-page-kontakt { overflow-y: auto; }
    div.absolute {position: relative; text-align: center !important;}
    .col-12.col-md-8.text-end {width: 100%; text-align: center !important; padding-top: 12px;}
}
@media (max-width: 1199px) { 
    /* col-lg */
    .logo {margin-top: 34px;}
    #mega-menu { gap:16px; padding-right: 16px; }
    .contact-box {padding-left: 16px;}
    #mega-menu li > ul {font-size: 12px;}
    #mega-menu li > ul li a {width: 150px; }
    .contactpage {display: block; height: auto;}
    #contactmap { width: 100%; height: 500px;}
    #contactmap iframe {width: 100%;height: 500px;}
    .contact-info {width: 100%;}
    #contactform form { padding: 24px;}
    #contactdata { padding: 32px 0px; }
}
@media (max-width: 991px) { 
    /* col-md */
      .logo {margin-top: 23px;}
    #menutoggle {display: block; border:1px solid #fff; color:#fff; font-size: 16px; font-weight: 700;padding: 12px 16px;border-radius: 6px; cursor: pointer; transition: 0.5s; margin-top: 16px;margin-top: 24px;
    left: -29px;position: relative;}
    #menutoggle.active { color: #fff; background-color: #163767;}
    #menutoggle i {margin-right: 8px;}
    #mega-menu {display: none; gap:0px; padding: 16px;background-color: #e34331; height: auto;position: absolute;left: 0;right: 0;top: 96px;}
    #mega-menu li {display: block; padding: 8px 16px;}
    #mega-menu li ul {display:block; height:0px;position: relative;transform: translateY(0px); margin-top: 0px; padding: 0px; background: none;}
    #mega-menu li a {display: block; padding: 0px; }
    #mega-menu li > ul li {padding: 0px 0px 6px 0px;}
    #mega-menu li > ul li:first-child {padding-top: 15px;}
    #mega-menu li > ul li.text-center {text-align: left !important;}
    #mega-menu li > ul li a, #mega-menu li.li-dienstleistungen > ul li a { display: block; height: auto; padding: 8px 16px; width: auto; position: relative; color: #fff;}
    #mega-menu li > ul li a i, #mega-menu li > ul li a img { position: absolute; right: 16px; top: 5px; width:20px; height: auto; }
    footer .col-md-8, footer .col-md-4 {width: 100%; text-align: center;}
    footer ul { justify-content: center; }
    #mega-menu li.text {color: #fff !important;}
    #mega-menu li.text a {text-decoration: underline;}
    #mega-menu li > ul li.text a.inline-link i { display: none; }
    .large-image-container {max-width: 80%;}
}
@media (max-width: 767px) { 
    /* col-sm */
    #headwrap { height: auto; }
    .logo {display:block; margin: 16px auto 0px; max-width: 350px;}
    #flexit {flex-direction: row; justify-content: center;}
    #mega-menu {top: auto;}
    h1 { font-size: 36px; }
    h1:after {content: "";display: block;width: 200px;height: 5px;background: rgba(193, 50, 42, 0.9);margin: 16px auto 16px auto;}
    p.slogan {font-size: 18px; line-height: 32px;}
    ul.regions { font-size: 16px; }
    .large-image-container {max-width: 70%;}
    
}
@media (max-width: 575px) { 
    /* col */
    ul.social-media {display: none;}
    .contact-button, #menutoggle { padding: 8px 16px;}
    #menutoggle {left: 0px;margin-top: 28px;}
    ul.regions {display: block; margin: 0 auto; margin: 16px 0px; }
    ul.regions li {margin-bottom: 8px;}
}
@media (max-width: 460px) { 
    /* col */
    #menutoggle { font-size: 12px; margin-top: 30px; }
    .contact-button {font-size: 12px;font-weight: 700;}
}
@media (max-width: 350px) { 
    /* col */
    body {min-width: 330px;}
    #menutoggle { font-size: 11px; margin-top: 30px; }
    .contact-button {font-size: 11px;font-weight: 700;}
}