@import "layout.css?ver1.1";
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

:root {
  --padding-size: 100px;
  --margin-size: 100px;
  --padding-size-small: 50px;
  --margin-size-small: 30px;
  --menu-height: 85px;
  --menu-height-move: 70px;
  --default-color: #1A1818;
  --highlight-color: #1268B3;
  --light-grey:  #F7F7F7;
  --menu-padding: 25px;
  --large-text:1.4rem;
  --medium-text:1.1rem;
  --small-text:1rem;
  --dark-color: #151515;
}

html, input, textarea, select {font-family: 'Rubik', sans-serif;    -webkit-text-size-adjust: none;  -webkit-font-smoothing: subpixel-antialiased;}
body {color: var(--default-color); padding:0; overflow: hidden; background: #F7F7F7;}
.the-content a {color: var(--highlight-color)}
.the-content a:hover {text-decoration: underline;}
h2 {font-size: 2.5rem;    font-weight: 700; color: var(--highlight-color);  }
h1 {margin-bottom: 0;  font-size: 3.5rem;  font-weight: 700; line-height: 1.1em; }
h3  {font-size: 1.7rem; color: var(--highlight-color);}
h4 {font-size: 1.2rem; padding: 0; }
.img {max-width: 100%; height: auto;}
a {color:var(--highlight-color)}
a:hover {color: var(--red-color);}
.button {display: inline-block; padding: 0.7rem 3rem; border:2px solid #fff; color:#fff; border-radius: 3px; font-weight: 700; font-size: 1rem; margin:2rem 0 0 0;}
.button:hover {background: #fff; color:var(--highlight-color)}
.content {font-size: 1.1rem; margin: 0; padding: var(--padding-size) 0;}
.largeFont {font-size: var(--large-text); line-height: 1.25em;}
.smallFont {font-size: var(--small-text);}
.content p {margin: 0 0 var(--margin-size-small) 0; padding: 0;}
.content ul {margin: 0 0 var(--margin-size-small) -2rem; width: calc(100% + 4rem); background:var(--light-grey); padding:0 2rem; list-style: none;}
.content ul li::before {content: '•'; color: var(--highlight-color); font-weight: 700; display: inline-block; margin: 0 10px 0 0;}
.content ul li {padding: 0.1rem 0;}
.grey {background-color: var(--light-grey);}
.full {width: 100vw; margin-left: 50%; transform: translate(-50%, 0); }
.blue {color: var(--highlight-color);}
.border {border: 1px solid #D0D2D9; padding: var(--padding-size-small) var(--padding-size); margin: var(--margin-size-small) calc(-1 * var(--margin-size)); border-radius: 10px; width: calc(100% + (2 * var(--margin-size)) ); align-items: center;}
.border p:last-child {margin-bottom: 0;}


.border .wp-block-column {margin-left: 0 !important;}
.wp-block-button__link {border-radius: 10px; background: var(--default-color); text-transform: uppercase; font-size: var(--small-text); font-weight: 700; padding: 10px calc(1.5 * var(--padding-size-small)); border: 2px solid var(--default-color);}
.wp-block-button__link:hover {background: #fff; color: var(--default-color);}


/* Top nav */

.topNav {width: 100%; position: relative; z-index: 2;}
.topNav .width {height: var(--menu-height); line-height: var(--menu-height); position: relative; }
.topNav ul {text-align: center;}
.move {padding-top: var(--menu-height);}
.move .topNav { position: fixed;  -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.09);
  -moz-box-shadow:    0px 0px 13px 0px rgba(0, 0, 0, 0.09);  box-shadow:         0px 0px 13px 0px rgba(0, 0, 0, 0.09); z-index: 2; top:0; left: 0; background: #fff;}
.move .topNav .width {height: var(--menu-height-move); line-height: var(--menu-height-move); }
.logo {background:url(images/logo.svg) no-repeat center; background-size: 100% auto; width: 250px; height: 100%; position: absolute; z-index: 5; left:0; top:0; height: 100%; }
.move .logo {width: 160px;}
.topMenu {  width: auto;  margin:0 auto; padding:0}
.topMenu a {padding: 0 var(--menu-padding); color:var(--default-color); display: inline-block; position: relative; color:var(--dark-color); font-size: var(--medium-text); font-weight: 500;  }
.topMenu a:hover, .topMenu .current_page_item a{  color: var(--highlight-color);  }
.topText {text-align: center; padding: var(--padding-size-small) 3%; background: var(--highlight-color); color: #fff;}

/* topPicHome */

.topPicHome h1 {margin: 0; padding: 0;  line-height: 1.3em; color: var(--highlight-color);}
.topPicHome {width: 1450px; max-width: 92%; padding: 0; margin: 0 auto; background-size: auto 100% !important; background-repeat: no-repeat !important; background-position: right bottom !important; height: 670px; position: relative; margin-top: 0px; z-index: 1;} 
.topTextHome {position: absolute; width:50%; left:0; top:50%; transform: translate(0, -50%);}


/* boxes */

.box {background: #fff; }
.box img {width: 100%;}
.boxContent {padding: 2rem; font-size: 1.2rem; line-height: 1.4em;} 
.boxContent h3 {margin-bottom: 0.5em;}


/* foot */

.foot {padding: var(--padding-size-small) 0; background: var(--highlight-color); color: #fff;}
.foot a {color: #fff;}
.foot a:hover {text-decoration: underline;}
.foot ul {margin: 0; padding: 0; text-align: right;}
.foot li {list-style: none; display: inline-block; padding-left: var(--padding-size-small);}


@media only screen and (min-width: 801px) { 
  .topNav .menu li.kontaktTop {position: absolute; right: -4.5%; top:0; display: block; } 
  .topNav .menu li.kontaktTop a {background: var(--highlight-color); color: #fff; padding: 0 40px; font-size: 1rem;} 
  .topNav .menu li.kontaktTop a:hover {background: #000;}
}

@media only screen and (max-width: 1450px) { 
.topPicHome {height: 500px; margin-top: -20px;}
}

@media only screen and (max-width: 1250px) { 
  :root {
    --padding-size: 80px;
    --margin-size: 80px;
    --padding-size-small: 35px;
    --margin-size-small: 35px;
    --menu-height: 100px;
    --menu-padding: 15px;
  }
h3 {font-size: 1.7rem;}
h2 {font-size: 2rem;}
h1 {font-size: 2.7rem;}
}

@media only screen and (max-width: 1000px) { 
  .topNav .menu li:first-child {margin-left: 100px;}
  .topPicHome {height: 350px; margin-top: 0px;}
 }


@media only screen and (max-width: 800px) { 

  :root {
    --padding-size: 40px;
    --margin-size-small: 20px;
    --menu-height: 60px;
    --menu-height-move: 50px; 
  }

  html {font-size: 15px;}
  .logo {width: 160px !important;}
  h2 {font-size: 1.4rem;}
  h3 {font-size: 1.2rem;}
  h1 {font-size: 3rem;}

  #mobile-menu {width: 30px; height: 22px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out;  -o-transition: .5s ease-in-out;  transition: .5s ease-in-out;  cursor: pointer;  position:absolute;  right:3%;  top:50%;  z-index:10; margin-top: -11px; }
  #mobile-menu span {display: block; background: var(--highlight-color); position: absolute; height: 4px; width: 100%;  border-radius: 4px; opacity: 1; left: 0; -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
  #mobile-menu span:nth-child(1) {top: 0px;}
  #mobile-menu span:nth-child(2),#mobile-menu span:nth-child(3) {top: 9px;}
  #mobile-menu span:nth-child(4) {top: 18px;}      
  .menuOpen #mobile-menu span:nth-child(1) {top: 9px;  width: 0%; left: 50%;}
  .menuOpen  #mobile-menu span {background:#fff;}
  .menuOpen #mobile-menu span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
  .menuOpen  #mobile-menu span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
  .menuOpen #mobile-menu span:nth-child(4) {top: 9px; width: 0%; left: 50%;}
  .topMenu {display: block;    position: fixed;    height: -webkit-fill-available;  width: 100vw;    left: 0;    bottom: 300vw; background: var(--highlight-color); line-height: 1.2rem !important; z-index: 3; -webkit-transition: all 0.05s ease-in ;-moz-transition: all 0.05s ease-in; -o-transition: all 0.05s ease-in; transition: all 0.05s ease-in;}
  .menuOpen .topMenu {bottom: 0vw; z-index: 5;}
  .topMenu .menu {position: absolute; top:50%; transform: translate(0%, -50%); width: 100%; left: 0; }
  .topMenu .menu  li {display: block;}
  .topMenu .menu  a {display: block; color:#fff; padding: 0.7rem 0; text-align: center; font-size: 1.5rem;} 
  .topNav .menu li:first-child {margin-left:0 ;}
  .topPicHome h1 {font-size: 2rem; line-height: 1.35em;}
}

@media only screen and (max-width: 640px) { 
  .topPicHome {height: auto; background-position: bottom center !important; background-size: auto 60vw !important; padding-bottom: 63vw; text-align: center; padding-top: 2rem;}
  .topPicHome h1 {font-size: 1.5rem;}
  .topTextHome {position: relative; width:100%; left:0; top:0; transform: translate(0, 0);}
}

@media only screen and (max-width: 480px) { 
  :root {
    --padding-size: 25px;
    --margin-size: 25px;
    --padding-size-small: 20px;
    --margin-size-small: 20px;
    --large-text:1.3rem;
  }
.foot .col50 {width: 100%; text-align: center;}
.foot .col50:last-child {order: -1;}
.foot ul {text-align: center;}
.foot li {padding: 5px var(--padding-size-small);}
  html {font-size: 14px;}
  h2 {font-size: 1.7rem;}
  h1 {font-size: 2.3rem;}
  h3 {font-size: 1.1rem;}

}

.anim, .wpcf7-submit, .button, .box, .wp-block-button__link {-webkit-transition: all 0.3s ease-in ;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
.topMenu a::before  {-webkit-transition: all 0.1s ease-in ;-moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in;}