/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 23-11-2022
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/karthik-dulam/pen/VwamJma */
/* info     -> page2one */
/* ------------------------------------------------------------------------------ */
/* ROOT and VARIABLES */

@font-face {
  font-family:'Oxanium';
  src:url('fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight:100;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Anodina-Light';
  src:url('fonts/Anodina-Light.woff2') format('woff2');
  font-weight:100;
  font-style:normal;
  font-display:swap;
}

/* COLORS - CUSTOMER */
/* https://materialui.co/colors */
/* main -> orange #e47312 - rgba(238,116,29,1) */

:root {
  --sel-col: rgb(255,255,255,1);   /* #fff white */
  --sel-bgr: rgb(228,115,18,.8);  /* #e47312 MD-orange */
/*	--sel-bgr: rgb(25,118,210,.8);    /* #1976D2 MD-blue */

  --font-fam: 'Oxanium','Anodina-Light',Arial;
  --font-fam: 'Anodina-Light','Oxanium',Arial;
  --text-trf: uppercase; /* OR normal; */

  --back2top: 0; /* def=0 MAX 100px control when the button appear */

  --menu-it0: 'Start';
  --menu-it1: 'Leistungen';
  --menu-it2: 'Referenzen';

/* client-colors */

  --main-col: #fff;
  --main-bgr: #B92B4A;
  --grad-2nd: rgb(168, 3, 41,.5);
  --head-col: #B92B4A;
  --text-col: #fff;
  --menu-col: #505050;
  --link-col: #B92B4A;
  --link-hov: rgb(168, 3, 41,.8);
  --deft-bgr: rgb(255,255,255,.8);
  --foot-bgr: #858789;

/* MD-orange */
/*
  --main-col: #fff;
  --main-bgr: #F4511E;
  --grad-2nd: rgb(228,115,18,.5);
  --head-col: #F4511E;
  --text-col: #fff;
  --menu-col: #505050;
  --link-col: #F4511E;
  --link-hov: rgba(255,153,51,.8);
  --deft-bgr: rgb(255,255,255,.8);
  --foot-bgr: #D84315;
*/

/* MD-blue */
/*
  --main-col: #fff;
  --main-bgr: #1976D2; 
  --grad-2nd: rgb(79,195,247,.5);
  --head-col: #1976D2;
  --text-col: #fff;
  --menu-col: #505050;
  --link-col: #1976D2;
  --link-hov: rgb(79,195,247,.8);
  --deft-bgr: rgb(255,255,255,.8);
  --foot-bgr: #01579B;
*/
/* MD-blue-grey */
/*
  --main-col: #fff;
  --main-bgr: #455A64; 
  --grad-2nd: rgb(144,164,174,.5);
  --head-col: #455A64;
  --text-col: #fff;
  --menu-col: #505050;
  --link-col: #455A64;
  --link-hov: rgb(120,144,156,.8);
  --deft-bgr: rgb(255,255,255,.8);
  --foot-bgr: #78909C;
*/
/* MD-grey */
/*
--main-col: #fff;
--main-bgr: #616161; 
--grad-2nd: rgb(189,189,189,.5);
--head-col: #616161;
--text-col: #fff;
--menu-col: #505050;
--link-col: #616161;
--link-hov: rgb(158,158,158,.8);
--deft-bgr: rgb(255,255,255,.8);
--foot-bgr: #424242;
*/
/* MD-red */
/*
--main-col: #fff;
--main-bgr: #D32F2F; 
--grad-2nd: rgb(229,115,115,.5);
--head-col: #D32F2F;
--text-col: #fff;
--menu-col: #505050;
--link-col: #D32F2F;
--link-hov: rgb(229,57,53,.8);
--deft-bgr: rgb(255,255,255,.8);
--foot-bgr: #B71C1C;
*/

}




/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 22-11-22 */
::selection				  {background:var(--sel-bgr);color:var(--sel-col)} 
::-moz-selection		{background:var(--sel-bgr);color:var(--sel-col)}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 22-11-22 */
/* RESET COUNTER -> SEE design.css */
/* PAGE2ONE */

html {
  /*box-sizing: border-box;*/
  font-family: var(--font-fam), sans-serif;
  scroll-behavior: smooth;
  }

* {
  box-sizing: border-box;
}

body {
  position: relative;  
  display: grid;
  /*grid-template-columns: 1fr 0px;*/
  margin: 2%;
  margin-bottom: .5%; /* .5% self */
  overflow:auto;
  color: rgb(0,0,0,.6); /* self */
  z-index: 2000;
  }
  
/* progress-bar - with -> add-script.js */
/* link -> https://codepen.io/MarkBoots/pen/VwbbLLV */
.progress-bar {
  position:fixed;
  top:0;
  left:0;
  height:.2rem;
  background:var(--main-bgr);
  z-index:9999;
  }

/* back2top - without JS */
/* link -> https://codepen.io/maddesigns/pen/dymVqar */
.back2top {
    position:sticky;
    right:0; 
    bottom: .55rem;      
    place-self:end;
    margin-top: calc(2vh + var(--back2top));
    width: 60px;
    font-size: 0;
    aspect-ratio: 1;
    background:var(--grad-2nd);
    /*border-radius: .4rem;*/
    z-index: 9999;
  }
.back2top:before {
    content: '';
    position: absolute;
    inset: 30%;
    transform: translateY(20%) rotate(-45deg);
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
  }


section :where(h1, h2, h3, h4) {
     text-transform:var(--text-trf);
  }

:where(.sec-headings) {
/*  padding: 0 .4rem;
  background:rgb(73,73,73,.02);
*/
  color:rgb(145,145,145,1);
 }

a {
  text-decoration:none;
  color: inherit;
  }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 23-11-22 */
/* TEST ONLY !!! */
section {
  border:0px solid green /* rgb(255,255,255,.2) */ ;
  margin: 1rem 0;
  }
section:nth-child(odd) {
  background: rgb(238,238,238,1); /* #F5F5F5; */
}




/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 23-11-22 */
/* SECTION1 TOP */
#main-sec1 {
  position: relative;
  height: calc(100vh - 4vh);
  }
#section1 {
  height: 85vh;
  background-size: auto, cover;
  background-attachment: fixed;
  background-image: linear-gradient(76deg, rgba(193,195,204,.9) 35%, rgba(193,195,204,.3) 65%), 
  url('../content/image-01-1920.webp');
  background-position: 0 0, 50% 0%;
  padding-right: 5%;
  padding-left: 5%;
  /*box-sizing: border-box;*/
  }
/* TOPBAR */
.logo-client {
  box-sizing:content-box;
  width: 128px;
  /*height: 20px;*/
  padding:45px 35px;
  background:var(--main-bgr);
  cursor:pointer;
  }
#topbar
{
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 2%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0%;
  padding-left: 0%;
  box-sizing: border-box;
}
#menu
{
  width: 77%;
  background:var(--deft-bgr);
  height: 90px;
  padding-right: 10px;
}
#menu > div
{
  display: flex;
  justify-content: flex-end;
  height: 90px;
}
#menu > div > h3:first-of-type {
  color:var(--link-col);
  }
.menu-items {
  position:relative;
  display:flex;
  align-items:center;
  margin:0;
  padding: 14px;
  letter-spacing: 1px;
  font-size: 1rem;
  font-weight: 400;
  text-transform:var(--text-trf);
  color: #505050;
  transition:color .2s;
  }
.menu-items:hover {
  color:var(--link-col);
  cursor:pointer;
  }
.menu-items::before {
  content:'';
  position:absolute;
  top:0%;
  right:0%;
  left:0%;
  width:1px;
  height:0;
  margin-right:auto;
  margin-left:auto;
  background:var(--main-bgr);
  transition: .2s;
  }
.menu-items::after {
  content:'';
  position:absolute;
  right:0%;
  bottom:0%;
  left:0%;
  width:1px;
  height:0;
  margin-right:auto;
  margin-left:auto;
  background:var(--main-bgr);
  transition: .2s;
  }
.menu-items:hover::before, .menu-items:hover::after {
  height: 30px;
}
#menu > div > h3:last-of-type
{
  position: relative;
}
#menu > div > h3:last-of-type:hover ~ #page-hidden
{
  display: block;
  z-index:9999;
}
#page-hidden:hover
{
  display: block;
  z-index: 9999;
}
#page-hidden {
  position:absolute;
  padding: 10px;
  top: 114px;
  right: 11.5%;
  background:var(--deft-bgr);
  display:none;
  }
#page-hidden > p {
  position: relative;
  margin: 0;
  padding: 10px 20px;
  line-height: 20px;
  letter-spacing: 0px;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(73, 73, 73, 0.685);
  z-index:10;
  }
#page-hidden > p:hover {
  background: #f3f3f3;
  color:var(--link-col);
  cursor:pointer;
  }

/* MENU - TOP right -> link to aktuell */
#free-quote {
  position:relative;
  display:flex;
  align-items:center;
  height: 90px;
  padding: 0 25px;
  background:var(--main-bgr);
  cursor:pointer;
  transition: background 300ms;
  z-index: 12;
  }

#free-quote > h4 {
  width: 103px;
  font-size: 1rem;
  }
  
.h4-class {
  margin: 0;
  letter-spacing: 1.6px;
  font-weight: 600;
  font-size: 1.2rem;
  color:var(--text-col);
  }
.fa-caret-down
{
  padding-left: 10px;
  color: #858585;
}
svg
{
  background:var(--deft-bgr);
  width: 50px;
  height: 60px;
  cursor: pointer;
  display: none;
  padding-right: 10px;
}
#close
{
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  display: none;
}
@media screen and (max-width: 991px)
{
  body
  {
      margin: 0;
      position: relative;
  }
  #main-sec1
  {
      height: 800px;
  }
  #topbar
  {
      padding-top: 0%;
      padding-right: 0%;
      padding-left: 0%;
      position: relative;
      width: 100%;
      top: 0;
  }
  #section1
  {
      height: 800px;
      padding: 0%;
      position: static;
  }
  #topbar > img
    {
    width: 90px;
    padding: 20px 30px;
    background:var(--main-bgr);
    cursor:pointer;
    }
  #menu {
      width:100%;
      height: 60px;
      background:var(--deft-bgr);
    }

  #free-quote
  {
      /* display: flex;
      height: 7vh;
      position: relative; */
      display: none;
  }
  .menu-items
  {
      display: none;
  }
  .menu-items::before {
      top: -7px;
  }
  .menu-items::after {
      bottom: -7px;
  }
  .menu-items:hover::before, .menu-items:hover::after {
      height: 20px;
  }
  svg
  {
      display: block;
  }
  #k1:checked ~ #open > svg > line:first-of-type
  {
      stroke-width: 3px;
      transform: rotate(50deg);
      transform-origin: 2px 25px;
  }
  #k1:checked ~ #open > svg > line:last-of-type
  {
      stroke-width: 3px;
      transform: rotate(-50deg);
      transform-origin: 11px 39px;
  }
  svg line:first-of-type
  {
      transition: .5s;
  }
  svg line:last-of-type
  {
      transition: .5s;
  }
  #k1:checked ~ #close
  {
      display: block;
  }
  #menu > div {
    position:absolute;
    top: 60px;
    left: 0;
    flex-direction:column;
    width:100%;
    height:auto;
    justify-content:unset;
    background:var(--deft-bgr);
    z-index:10;
    }
  #menu-items-div > h3:nth-of-type(1), #menu-items-div > h3:nth-of-type(5)
  {
      width: 60px;
  }
  #menu-items-div > h3:nth-of-type(2), #menu-items-div > h3:nth-of-type(4)
  {
      width: 80px;
  }
  #menu-items-div > h3:nth-of-type(3)
  {
      width: 70px;
  }
  #k1:checked ~ #menu > div > .menu-items
  {
      display: block;
      position: relative;
      z-index: 100;
  }
  #page-hidden {
      display:none;
      position:absolute;
      top:100%;
      left:0;
      width:100%;
      padding: 10px;
      background:var(--deft-bgr);
      z-index: 200;
  }
}
@media screen and (max-width: 600px)
{
  #section1
  {
      height: 78vh;
      padding: 0%;
      position: relative;
  }
  #main-sec1
  {
      height: 78vh;
  }
}
/* FORM */
#form
{
  height: 100vh;
  width: 100%;
  max-width: 460px;
  padding: 95px 50px 35px 70px;
  background:var(--deft-bgr);
  position: absolute;
  z-index: 20;
  right: 0%;
  top: 0%;
  display: none;
  position: fixed;
}
#form:after { 
  content: "QUOTE"; 
  top: 6%; 
  left: 10%; 
}
#form > h1
{
  font-size: 35px;
  font-weight: 600;
}
.form-para
{
  margin-top: 20px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 5px;
  color: rgba(128, 128, 128, 0.733);
}
#form > input, #form > textarea
{
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 0.5px rgba(187, 182, 182, 0.8) solid;
  outline: none;
}
#form > input:hover, #form > textarea:hover {
  border-bottom-color: var(--main-bgr);
  }
.radio-class
{
  display: none;
}
#form > button {
  color:var(text-col);
  outline: none;
  border: none;
  font-family: 'Dosis', sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  margin-top: 10px;
  padding: 20px 20px;
  width: 100%;
  background:var(--main-bgr);
  }
#r1:checked ~ #form ,#r1:checked ~ #remover
  {
  display:block;
}
#remover {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  padding: 25px 30px;
  background:var(--main-bgr);
  z-index: 21;
  cursor: pointer;
  transition: .2s;
  position: fixed;
  }
#remover > div > i {
  font-size: 30px;
  color:var(--text-col);
  }
@media screen and (max-width: 991px)
{
  #form
  {
      max-width: 100vw;
      z-index: 100;
  }
  #remover
  {
      right: 0;
      top: 0;
      z-index: 200;
  }
}
@media screen and (max-width: 600px)
{
  #form
  {
      padding: 50px 20px;
  }
  #form:after { 
      display: none;
  }
}
/* SEC1 TEXT - HERO */
#sec1-items {
  max-width:1200px;
  margin-right:auto;
  margin-left:auto;
  transform:translateY(50%);
  }
#sec1-items > h1
  {
  position:relative;
  margin:0;
  line-height: 70px;
  letter-spacing: 1px;
  font-size: 3.8rem; /* self 62px; */
  font-weight: 600;
  text-transform:var(--text-trf);
  color:var(--text-col);
  z-index: 6;
}
#sec1-items > p {
  margin-top: 10px;
  line-height: 26px;
  font-size: 1.4rem; /* self 20px */
  }

.light-para {
  margin-top: 10px;
  margin-bottom: 5px;
  line-height: 20px;
  font-size: 1.2rem;
  color:var(--text-col);
  }

#sec1-items div {
  box-sizing:content-box;
  display:inline-block;
  margin-top: 20px;
  padding: 18px 30px;
  letter-spacing: 1.5px;
  font-weight: 550;
  font-size: .8rem; /* self 12px */
  background:var(--main-bgr);;
  color:var(--text-col);
  transition:background 300ms;
  cursor:pointer;
  }
#free-quote:hover, #sec1-items div:hover, #remover:hover {
  background:var(--link-hov); /*#f89844;*/
}
@media screen and (max-width: 991px)
{
  #sec1-items
  {
      margin-left: 7%;
      margin-right: 7%;
      transform: translateY(100%);
  }
  #sec1-items > h1
  {
      font-size: 50px;
      line-height: 60px;
      letter-spacing: 1px;
  }
}
@media screen and (max-width: 700px)
{
  #sec1-items
  {
      transform: translateY(60%);
  }
  #sec1-items > h1
  {
      font-size: 40px;
      line-height: 50px;
      letter-spacing: 1px;
  }
  #sec1-items div
  {
      position: relative;
      z-index: 0;
  }
}
@media screen and (max-width: 600px)
{
  #sec1-items
  {
      transform: translateY(36%);
      width: 280px;
  }
}
/* SEC1 DETAILS */
.contact-icons
{
  width: 24px;
  margin-bottom: 15px;
}
#top-details
  {
  position: absolute;
  /*box-sizing: border-box;*/
  display: flex;
  right: 0;
  bottom: 0;
  width: 970px;
  padding: 15px 50px 5px 50px;
  background:var(--main-bgr);
  background-image: linear-gradient(186deg, var(--main-bgr), var(--grad-2nd)); /* self */
  z-index: 1;
}
#top-details-div
{
  z-index: 1;
  display: flex;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  align-items: flex-start;
  box-sizing: border-box;
}
#top-details-div > div
{
  width: 30%;
  display: flex;
  padding-top: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  box-sizing: border-box;
}

/* LINKS FOOTER -> CONTACT and BACK to SECTIONS */
.link-hovers-white {
  position: relative;
  height: 18px;
  margin-top: 15px;
  text-transform:var(--text-trf);
  cursor:pointer;
  }
.link-hovers-white::after {
  content:'';
  position:absolute;
  right: 0;
  bottom:-5px;
  left: 0;
  width:50%; /* self 100%; */
  height:1px;
  background:transparent;
  transition: .4s;
  }
.link-hovers-white:hover::after {
  background:var(--text-col);
  }

/* SEC1 SIDE APPS */
.app-logos
{
  position: absolute;
  right: 0;
  bottom: 213px;
  text-align: center;
  background-color: #0a1229;
  padding: 10px;
}
.app-logos > i
{
  text-align: center;
  display: block;
  color: rgb(226, 226, 226);
  font-size: 17px;
  padding: 16.5px 11px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.14);
  cursor: pointer;
}
.app-logos > i:last-of-type{
  border: none;
  margin-bottom: 0;
}
.app-logos > hr
{
  border-color: rgb(145, 145, 145);
}
@media screen and (max-width: 991px)
{
  #top-details
  {
      width: 100%;
      padding: 15px 20px 5px 0px;
      /* transform: translateY(16.5vh); */
      position: absolute;
  }
  #top-details-div > div
  {
      padding-left: 18px;
      padding-right: 18px;
      text-align: center;
  }
  .app-logos
  {
      position: absolute;
      width: 60px;
      bottom: 220px;
      z-index: 9;
  }
}

@media screen and (max-width: 700px)
{
  #top-details
  {
      padding: 15px 20px 5px 0px;
  }
  .app-logos
  {
      width: 55px;
      padding: 0px 11px;
      z-index: 9;
  }
}
@media screen and (max-width: 600px)
{
  #top-details
  {
      display: none;
  }
  .app-logos
  {
      position: absolute;
      bottom: 0;
      width: auto;
      padding: 10px;
  }
}

/* section2 */
/* headlines - at background */
.background-text::after {
  position:absolute;
  top: -20px; 
  left: -50px; 
  font-size: 6rem; /* self */
  letter-spacing: .6rem; /* self */
  font-weight: 600;
  text-transform:var(--text-trf);
  color: rgba(187,182,182,.2);
  z-index: -1; 
}
.sec-headings
{
  position: relative;
  line-height: 50px;
  letter-spacing: 1px;
  font-size: 2.6rem; /* self */
  font-weight: 600;
  text-transform:var(--text-trf);
  /* color:var(--text-col); */
  }
.sec-link-hovers {
  position:relative;
  margin-top: 50px;
  margin-bottom: 0;
  height: 24px;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 1rem; /* self */
  color: #919198;
  cursor:pointer;
  }
.sec-link-hovers::after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height: 2px;
  background: transparent;
  transition:.4s; /* self */
  }
.sec-link-hovers:hover::after {
  background: var(--main-bgr);
  }

/* SECTION 2 */
#section2
{
  margin-top: 50px;
  padding: 40px 5%;
  position: relative;
}
#sec2-top .background-text::after { 
  content: "Service"; 
}
.heads-links
{
  display: flex;
  justify-content: space-between;
}
#sec2-top
{
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#sec2-div-container
{
  display: flex;
  margin-top: 50px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#sec2-div-container > div
{
  margin-bottom: 5%;
  padding-right: 3%;
  width: 25%;
}
#sec2-div-container > div > img
{
  width: 60px;
}
.normal-headings
{
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 1px;
}
.normal-texts
{
  margin-top: 10px;
  color: #919197;
  font-size: 17px;
  line-height: 25px;
}
#sec2-div-container > div > h4:last-of-type
{
  margin-top: 30px;
  width: 80px;
}
@media screen and (max-width: 991px)
{
  #section2
  {
      margin-top: 50px;
      padding: 40px 50px;
  }
  .sec-headings
  {
      font-size: 32px;
      line-height: 40px;
  }
  .background-text::after { 
      top: -20px; 
      left: -10px; 
  }
  .background-text::after
  {
      font-size: 80px;
      letter-spacing: 10px;
      position: absolute;
  }
}
@media screen and (max-width: 600px)
{
  #section2
  {
      margin-top: 0px;
      padding: 40px 30px;
  }
  #sec2-top
  {
      display: flex;
      flex-direction: column;
  }
  .sec-headings
  {
      font-size: 26px;
      margin-bottom: 0;
  }
  .background-text::after { 
      display: none;
  }
  .slh-mobile
  {
      margin: 0;
      width: 125px;
  }
  #sec2-div-container
  {
      margin-top: 10px;
      flex-direction: column;
  }
  #sec2-div-container > div
  {
      margin-top: 10%;
      padding-right: 4px;
      width: 100%;
  }
}

/* section3 */
/* sec3 content1 */
#section3
{
  margin-top: 10px;
  padding: 40px 5%;
}
#sec3-content1 > div > img
{
  max-width: 100%;
  width: 600px;
  margin-top: 5%;
}
#sec3-content1
{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#sec3-content1 > div
{
  width: 50%;
  box-sizing: border-box;
}
#sec3-content1 > div:last-of-type
{
  padding-left: 100px;
}
#sec3-content1 .sec-headings::after
{
  content: "Firma";
}
#sec3-content1 .sec-link-hovers
{
  width: 100px;
  margin-top: 40px;
}

/* sec3 content2 */
#sec3-content2
{
  display: flex;
  margin-top: 5%;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#sec3-content2 > div
{
  margin-right: 10%;
  width: 25%;
}
#sec3-content2 h1 {
  margin-bottom: 10px;
  line-height: 70px;
  font-size: 60px;
  font-weight: 500;
  color:var(--head-col);
  }
@media screen and (max-width: 991px)
{
  #sec3-content1
  {
      display: flex;
      flex-direction: column;
  }
  #sec3-content1 > div
  {
      width: 100%;
  }
  #section3
  {
      margin-top: 0px;
      padding: 40px 50px;
  }
  #sec3-content1 > div > img
  {
      max-width: 100%;
      width: 750px;
  }
  #sec3-content1 > div:last-of-type
  {
      padding-left: 0px;
      margin: 60px 0px;
  }
  #sec3-content2
  {
      margin-top: 0%;
  }
}
@media screen and (max-width: 765px)
{
  #section3
  {
      padding: 40px 30px;
  }
  #sec3-content2
  {
      display: block;
  }
  #sec3-content2 > div
  {
      margin-right: 10%;
      margin-top: 15px;
      width: 100%;
  }
  #sec3-content1 > div:last-of-type
  {
      margin-bottom: 0px;
  }
  #sec3-content2 h1
  {
      margin: 0px;
      margin-top: 5px;
  }
  #sec3-content1 > div > img
  {
      margin-top: 3%;
  }
}

/* SECTION 4 - REFERENZEN */
#section4
{
  background-color: #f7f8fc;
}
#sec4-art1-top
{
  padding: 50px 0;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#sec4-art1-top .background-text::after { 
  content:var(--menu-it2); 
  text-transform:var(--text-trf);
  z-index: 1;
}
#sec4-article2
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#sec4-article2 > div
{
  width: calc(33% - 20px);
  margin: 10px;
  position: relative;
  cursor: pointer;
}
#sec4-article2 > div > aside
{
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  transition: .2s;
  opacity: 0;
}
#sec4-article2 > div > aside:hover
{
  opacity: 1;
}
#sec4-article2 > div > img
{
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
#sec4-article2 > div > aside > div {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  right: 50%;
  width: 90px;
  height: 90px;
  padding-right: 11px;
  padding-left: 11px;
  transform: translate(50%, -50%);
  border-radius: 100%;
  background-image: linear-gradient(59deg, var(--grad-2nd), var(--main-bgr));
  z-index: 5;
  }
#sec4-article2 > div > aside > div > p {
  line-height: 18px;
  letter-spacing: 1px;
  font-size: .8rem; /* self 12px; */
  font-weight: 500;
  text-align: center;
  color:var(--text-col);
}
@media screen and (max-width: 991px)
{
  #sec4-art1-top
  {
      padding: 30px 20px;
  }
}
@media screen and (max-width: 765px)
{
  #sec4-article2
  {
      justify-content: center;
      margin: 30px;
      margin-bottom: 0;
      padding-top: 0px;
  }
  #sec4-article2 > div
  {
      width: 100%;
      margin: 0;
      margin-bottom: 20px;
  }
}
@media screen and (max-width: 600px)
{
  #sec4-article2
  {
      margin: 15px;
  }
  #sec4-art1-top
  {
      flex-direction: column;
  }
  #sec4-art1-top > h4
  {
      width: 110px;
  }
}

/* SECTION 4 - ARTICLE 3 */
#sec4-article3 {
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top: 7%;
  padding-bottom: 7%;
  background:var(--main-bgr);
  background-image: linear-gradient(72deg, var(--main-bgr), var(--grad-2nd)), 
  url('../content/image-back-q10-1200-bw.jpg'); /* reduced to q10 and bw - filesize 58Kb */
  background-position: 0 0, 50% 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
  background-attachment: scroll, fixed;
  }
#sec4-article3 > div
{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#sec4-article3 > div > h1
{
  margin: 0;
  margin-top: 15px;
}
#sec4-article3 > div > h4
{
  width: 110px;
}
#sec4-article3 > div > p
{
  margin-top: 10px;
  font-size: 20px;
  letter-spacing: .8px;
  line-height: 26px;
  font-weight: 300;
  margin-bottom: 30px;
  color: hsla(0, 0%, 100%, 0.7);
}
@media screen and (max-width: 600px)
{
  #sec4-article3 > div
  {
      display: block;
  }
  #sec4-article3 > div
  {
      margin: 15px;
  }
  #sec4-article3 .link-hovers-white
  {
      width: 110px;
  }
}
/* article 4 */
#sec4-article4
{
  padding: 50px 5%;
  padding-top: 100px;
}
#sec4-art2-top .background-text::after { 
  content: 'KompetenZ'; 
  z-index: 1;
}
#sec4-article4 > div
{
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#sec4-article4 > div > aside
{
  display: flex;
  justify-content: space-between;
}
#sec4-article4 > div > aside > div
{
  width: 25%;
  height: 100%;
  min-height: 300px;
  margin: 20px;
  position: relative;
}
#sec4-article4 > div > aside > div:first-of-type
{
  margin-left: 0;
}
#sec4-article4 > div > aside > div > div:first-of-type
{
  height: 100%;
  min-height: 300px;
  background-position: 50% 0%;
  background-size: cover;
  background-repeat: no-repeat;
}
#sec4-article4 > div > aside > div:first-of-type > div:first-of-type
{
  background-image: url('../content/team.png');
}
#sec4-article4 > div > aside > div:nth-of-type(2) > div:first-of-type
{
  background-image: url('../content/team.png');
}
#sec4-article4 > div > aside > div:nth-of-type(3) > div:first-of-type
{
  background-image: url('../content/team.png');
}
#sec4-article4 > div > aside > div:nth-of-type(4) > div:first-of-type
{
  background-image: url('../content/team.png');
}
#sec4-article4 > div > aside > div > div:nth-of-type(2) {
  padding: 29px 66px 29px 29px;
  background:var(--deft-bgr);
  }
#sec4-article4 > div > aside > div > div:nth-of-type(2) > h3
{
  margin: 0;
  padding: 0;
}
#sec4-article4 > div > aside > div > div:nth-of-type(2) > p
{
  margin: 0;
}
#sec4-article4 > div > aside > div > div:nth-of-type(3)
{
  bottom: 0;
  background:var(--main-bgr);
}
#sec4-article4 > div > aside > div > div:nth-of-type(3) > i
{
  color:var(--text-col);
}
@media screen and (max-width: 991px)
{
  #sec4-article4
  {
      padding: 50px 30px;
  }
  #sec4-article4 > div > aside > div > div:nth-of-type(3)
  {
      position: absolute;
      transform: unset;
  }
  #sec4-article4 > div > aside > div
  {
      min-height: 200px;
      margin: 10px;
  }
  #sec4-article4 > div > aside > div > div:first-of-type
  {
      min-height: 200px;
  }
}
@media screen and (max-width: 765px)
{
  #sec4-article4
  {
      padding: 50px 40px;
  }
  #sec4-article4 > div > aside
  {
      flex-direction: column;
  }
  #sec4-article4 > div > aside > div
  {
      width: 100%;
      height: 100%;
      min-height: 300px;
      margin: 20px;
      margin-left: 0;
      position: relative;
  }
  #sec4-article4 > div > aside > div > div:first-of-type
  {
      min-height: 300px;
  }
}
@media screen and (max-width: 600px)
{
  #sec4-article4
  {
      padding: 10px 25px;
  }
  #sec4-art2-top
  { 
      flex-direction: column;
  }
  #sec4-art2-top h4
  {
      width: 62px;
  }
}
/* article 5 */
#sec4-article5 .background-text::after
{
  content: "Kunden";
  z-index: 1;
}
#sec4-article5
{
  padding: 100px 5%;
}
#sec4-article5 > div
{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#sec4-article5 > div > aside:first-of-type
{
  width: 41%;
  padding-right: 100px;
  margin-bottom: 70px;
}
#sec4-article5 > div > aside:first-of-type h1
{
  margin-bottom: 30px;
}
#sec4-article5 > div > aside:first-of-type h4
{
  width: 90px;
  margin-top: 30px;
}
#testimonal-divs
{
  width: 59%;
  display: flex;
  align-items: flex-end;
}
#testimonal-divs > div
{
  width: 50%;
}
#testimonal-divs > div:last-of-type
{
  transform: translateY(30px);
}
.testimonal-blocks
{
  position: relative;
  background:var(--deft-bgr);
  margin: 60px 20px;
  text-align: center;
  padding: 40px 30px 10px;
  z-index: 1;
}
.testimonal-blocks > p:nth-of-type(1)
{
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
.testimonal-blocks > p:nth-of-type(2)
{
  color: rgba(155, 155, 155, 0.541);
  margin-top: 5px;
}
.quote-divs {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: stretch;
  top: -30px;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translateX(-50%);
  padding-top: 13px;
  line-height: 80px;
  font-size: 80px;
  border-radius: 100%;
  background-image: linear-gradient(8deg, var(--grad-2nd), var(--main-bgr));
  opacity: 1;
  color:var(--text-col);
  }
@media screen and (max-width: 991px)
{
  #sec4-article5
  {
      padding: 0px 5%;
  }
  #sec4-article5 > div
  {
      padding: 50px 40px;
      display: flex;
      flex-direction: column;
      align-items: unset;
  }
  #sec4-article5 > div > aside:first-of-type
  {
      width: 100%;
      padding-right: 0px;
      margin-bottom: 50px;
  }
  #testimonal-divs
  {
      width: 100%;
      display: flex;
      align-items: flex-start;
  }
}
@media screen and (max-width: 765px)
{
  #sec4-article5
  {
      padding-bottom: 0;
  }
  #testimonal-divs > div
  {
      width: 100%;
  }
  #testimonal-divs
  {
      display: flex;
      flex-direction: column;
  }
  #testimonal-divs > div:last-of-type
  {
      transform: translateY(-50px);
  }
}
@media screen and (max-width: 600px)
{
  #sec4-article5
  {
      padding: 20px 23px;
      padding-bottom: 0;
  }
  #testimonal-divs > div:last-of-type > div:last-of-type
  {
      margin-bottom: 0;
  }
  #sec4-article5 > div
  {
      padding: 0;
  }
}
/* section 5 */
#section5
{
  padding: 50px 5%;
  margin-bottom: 1%; /* 7%; self */
}
#sec5-top
{
  margin-bottom: 4%;
  margin-top: 4%;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#section5 .sec-headings::after
{
  content: "News";
}
#section5 > aside > article > img
{
  max-width: 100%;
}
#section5 > aside
{
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#section5 > aside > article {
  position: relative;
  display: flex;
  width: 32.2%;
  flex-direction: column;
  color:var(--text-col);
  cursor: pointer;
}
.date-block
{
  position: absolute;
  right: 0;
  top: 0;
}
.date-block > h4 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  background-image: linear-gradient(45deg, var(--grad-2nd), var(--main-bgr));
  color:var(text-col);
  }
.date-block > h5 {
  display:flex;
  justify-content:center;
  align-items:center;
  width: 70px;
  height: 40px;
  margin:0;
  letter-spacing: 2px;
  font-size: .8rem; /* self 13px */
  font-weight: 600;
  background:var(--deft-bgr);
  color: #9d9da5;
  }

#section5 > aside > article > div:last-of-type {
  width: 100%;
  padding: 25px 56px 25px 30px;
  background:var(--main-bgr);
  background-image: linear-gradient(158deg, var(--main-bgr), var(--grad-2nd));
}
#section5 > aside > article > div:last-of-type > h1
{
  margin-right: 0px;
  margin-bottom: 15px;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 0px;
}
#section5 > aside > article > div:last-of-type > p
{
  font-size: 17px;
  line-height: 25px;
  margin-bottom: 5px;
  color: hsla(0, 0%, 100%, 0.7);
  margin-top: 0;
}
#section5 > aside .sec-link-hovers {
  width: 72px;
  margin-top: 20px;
  color:var(--text-col);
  }
#section5 > aside .sec-link-hovers::after {
  height: 2px;
  background:var(--deft-bgr);
  opacity:.4;
  }
#section5 > aside .sec-link-hovers:hover::after
{
  opacity: 1;
}
@media screen and (max-width: 991px)
{
  #section5
  {
      padding: 50px 50px;
      margin-bottom: 4%;
  }
}
@media screen and (max-width: 765px)
{
  #section5
  {
      padding: 50px 40px;
      margin-bottom: 4%;
  }
  #section5 > aside
  {
      padding: 0 10px;
      flex-direction: column;
  }
  #section5 > aside > article
  {
      width: 100%;
      margin-bottom: 7%;
  }
}
@media screen and (max-width: 600px)
{
  #section5
  {
      padding: 50px 20px;
      margin-bottom: 0;
      padding-bottom: 30px;
  }
  #sec5-top
  {
      display: block;
      margin-bottom: 50px;
  }
  #section5 > aside > article > div:last-of-type > p
  {
      line-height: 23px;
  }
  #section5 > aside > article > div:last-of-type
  {
      padding: 25px 10px 25px 30px;
  }
  #section5 > aside > article
  {
      margin-bottom: 50px;
  }
  #section5 .slh-mobile
  {
      width: 68px;
  }
}
/* SECTION 6 - PARTNER */
#section6 {
  padding: 3% 5%; /* 4.5% 5% self */
  background-image:linear-gradient(56deg, var(--main-bgr), var(--grad-2nd));
  }
#section6 > div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  }
#section6 > div > h4 {
  margin-top:0;
  margin-bottom:0;
  line-height: 20px;
  letter-spacing: 1px;
  font-size: 1.2rem;
  font-weight: 600;
  color:var(--text-col);
  }
#section6 > div > div {
  display:flex;
  justify-content:space-between;
  width: 75%;
  }
#section6 > div > div > div > img {
  width: 100px; /* 100px > not so good */
  cursor:pointer;
  }
@media screen and (max-width: 991px) {
  #section6 > div {
  flex-direction:column;
  }
  #section6 > div > h4 {
  margin-bottom:30px;
  }
  #section6 > div > div {
  width:100%;
  }
}
@media screen and (max-width: 765px) {
  #section6 > div > div {
  flex-wrap:wrap;
  justify-content:unset;
  align-items:center;
  }
  #section6 > div > div > div {
  width:33.33%;
  text-align:center;
  }
  #section6 > div > div > div > img {
  margin:5% 0;
  }
}
@media screen and (max-width: 600px) {
  #section6 > div > div {
  flex-direction:column;
  }
  #section6 > div > div > div > img {
  margin:20% 0;
  }
  #section6 > div > h4 {
  margin-top:40px;
  }
}

/* FOOTER */
footer {
  width:90%;
  margin:0 auto;
  padding: 70px 50px;
  padding-bottom:0;
  border-top: 1px solid #2f3038;
  background:var(--foot-bgr);
  color:var(--text-col);
  }
footer > article {
  display:flex;
  width: 100%;
  max-width:1200px;
  margin-right:auto;
  margin-left:auto;
  }
footer > article > div {
  width:33.33%;
  }
footer > article > div > div {
  padding-right:20%;
  }
footer .contact-icons {
  box-sizing:content-box;
  width:20px;
  margin-bottom:0;
  padding-right:10px;
  transform:translateY(5px);
  }
footer h1 {
  position: relative;
  margin-top: 0px;
  margin-bottom: 30px;
  padding-right: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  font-size:1rem;
  font-weight:600;
  }
footer h1::after {
  content:'';
  position:absolute;
  top:50%;
  width: 65%;
  height: 1px;
  margin-left: 14px;
  transform:translateY(-50%);
  background:var(--head-col);
  }
footer > article > div > div > p {
  margin-top:0;
  line-height: 25px;
  font-size: 1.1rem;
  }
footer .h4-class + p {
  margin-left: 30px;
  margin-bottom: 15px;
  color: hsla(0, 0%, 100%, 0.7);
  }
footer > aside {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin-top: 80px;
  margin-right:auto;
  margin-left:auto;
  }
footer .logo-client {
  margin-bottom:0;
  }
footer > article > div:nth-of-type(2) .h4-class {
  letter-spacing: 1px;
  }
footer > article > div:last-of-type .h4-class {
  margin-bottom: 10px;
  }
@media screen and (max-width:991px) {
  footer {
  width:100%;
  margin-bottom: 10px;
  padding: 70px 30px;
  padding-bottom:0;
  }
  footer h1::after {
  width: 55%;
  }
  footer .logo-client {
  margin-bottom: 30px;
  padding: 20px 35px;
  }
}
@media screen and (max-width:765px) {
  footer {
  margin-bottom: 7px;
  padding: 30px;
  padding-bottom: 0;
  }
  footer > article {
  flex-direction:column;
  }
  footer > article > div {
  width: 100%;
  }
  footer > article > div > div {
  padding-right: 0;
  }
  footer h1::after {
  width: 85%;
  }
  footer h1 {
  margin-top: 45px;
  }
  footer > aside {
  margin-top: 40px;
  }
  footer .logo-client {
  margin-bottom: 0;
  }
}
@media screen and (max-width:600px) {
  footer h1::after {
  width: 70%;
  }
  footer {
  padding-top: 0px;
  }
  footer > aside {
  margin-top: 50px;
  }
  footer > article > div:last-of-type {
  padding-left: 20px;
  }
  footer > article > div:last-of-type h1 {
  transform:translateX(-20px);
  }
  footer > article > div:nth-of-type(2) .h4-class {
  padding-bottom: 5px;
  }
}

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */