/*  Übersicht
/*----------------------------------------------------------------------------------------------------------------------------------
1. generelle Einstellungen (für alle Seiten)
1.1. Header (Navigation) 
1.2. Section Footer
2. Startseite
2.1. Section Main
2.2. Section Parallax
2.3. Section Beschreibung
2.4. Section Slider
2.5. Section Leistungsbeschreibung
2.6. Section Kontakt
2.7. Secttion About
3. Leistungen
3.1. Section Leistungen Main
3.2. Section Leistungen
4. Referenzen
4.1. Section Referenzen
5. Karriere
5.1. Section Main Job
5.2. Section Job Philo
5.2. Template Bewerbung
6. Danke
7. Datenschutz
8. Impressum
9. AGB´s
----------------------------------------------------------------------------------------------------------------------------------*/


/* 1. generelle Einstellungen */

:root {
  --first-color: rgba(0, 0, 255, 1);
  --second-color:rgba(255, 255, 255, 1);
  --text-color: #000;
  --bg-main: rgba(242, 242, 242, 1);
  --bg-main-opacity: rgba(0,0,255,0.02);
  --bg-color-white: rgba(255,255,255,1);
  --bg-color-blue: rgba(0, 0, 255, 1);
  --btn-bg-color: rgba(0, 0, 255, 1);
  --bg-opacity: rgba(255,255,255,0.9);
  --btn-text-color: rgba(255,255,255,1);
  --box-shadow: -1px -5px 15px #0000ff;
  --text-shadow: -1px 1px 1px hsl(174, 100%, 1%),
                 -1px 2px 1px hsl(174, 100%, 2%),
                 -2px 3px 1px hsl(174, 100%, 3%);
  --color-a-visited: green;
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  hyphens: auto;
  font-family: 'OS';
  scroll-behavior: smooth;
 
}
body {
  min-height: 100vh;
  background-color: var(--bg-main);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

hr {
  border-top: 0.01em solid var(--first-color);
}
/* Scrollbar */

::-webkit-scrollbar {
  width: 0.5vw;
}
::-webkit-scrollbar-track {
  background: var(--bg-color-white);
}
::-webkit-scrollbar-thumb {
  background: var(--first-color);
  border: 0.1vw solid var(--first-color);
  border-bottom-left-radius: 1em;
  border-top-left-radius: 1em;
}

/* Fonts */


@font-face { font-family: 'OS'; src: url('../fonts/OpenSans-Regular.ttf') ; }
@font-face { font-family: 'ADer'; src: url('../fonts/ArchitectsDaughter.ttf') ; }
@font-face { font-family: 'Lora'; src: url('../fonts/Lora-Regular.ttf') ; }




/* Size Fonts */

h1 {
  font-size: clamp(2.369rem, calc(2.369rem + ((1vw - 0.2625rem) * 1.2309)), 5rem);
  min-height: 0vw;
}
h2 {
  font-size: clamp(1.77rem, calc(1.77rem + ((1vw - 0.2625rem) * 0.9731)), 3.85rem);
  min-height: 0vw;
}
h3 {
  font-size: clamp(1.33rem, calc(1.33rem + ((1vw - 0.2625rem) * 0.7345)), 2.9rem);
  min-height: 0vw;
}
h4 {
  font-size: clamp(1.11rem, calc(1.11rem + ((1vw - 0.2625rem) * 0.5567)), 2.3rem);
  min-height: 0vw;
}
h5, p {
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.2625rem) * 0.3743)), 1.8rem);
  min-height: 0vw;
}
.footer p {
  font-size: clamp(0.55rem, calc(0.55rem + ((1vw - 0.225rem) * 0.5605)), 1.5rem);
  min-height: 0vw;
}
.footer h5 {
  font-size: clamp(0.7rem, calc(0.7rem + ((1vw - 0.2625rem) * 0.2807)), 1.3rem);
  min-height: 0vw;
}

a {
  font-size: clamp(0.7rem, calc(0.7rem + ((1vw - 0.2625rem) * 0.2807)), 1.3rem);
  min-height: 0vw;
  padding: 0.5em;
}
h1, h2, h3, h4, h5 {
  font-family: 'Lora';
  color: var(--first-color);
}
h1 span, h2 span, h3 span, h4 span, h5 span {
  font-family: 'Lora';
  color: var(--first-color);
}
a:visited {
  color: var(--first-color);
}



h1, h2, h3, h4, h5 {
  font-family: 'Lora';
  color: var(--first-color);
}

h1 span, h2 span, h3 span, h4 span, h5 span {
  font-family: 'Lora';
  color: var(--first-color);
}
a:visited {
  color: var(--first-color);
}


/*  2. Startseite  */

/* 2.1. Section Main */


section.main {
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
}
section.main .box1 {
  grid-column: 1/2;
  grid-row: 2/3;
}
section.main .box1 video {
  width: 100%;
}
section.main .box2 {
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto;
}
section.main .box2 .headline {
  position: relative;
  width: 100%;
  text-align: center;
  animation: heading;
  -webkit-animation: heading;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes heading {
  0% {
      top: -400%;
  }
  100% {
      top: 0px;
  }
}
section.main .box2 .headline h1 {
  margin: 8vw auto 0;
}
section.main .box2 .headline span {
  margin: 10px 0;
  font-size: 0.8rem;
}
section.main .box2 .text {
  position: relative;
  width: 90%;
  margin: 5vw auto 0;
  padding: 2vw 0;
  text-align: justify;
  animation-name: box2;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  z-index: 1 ;
}
@keyframes box2 {
  0% {
      left: -100vw;
      opacity: 0;
  }
  50% {
      opacity: 0;
  }
  100% {
      left: 0;
      opacity: 1;
  }
}
section.main .box2 .text p {
  margin-top: 1em;
}
section.main .box2 .box-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation-name: btn;
  animation-duration: 2s;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
  transition-property: transform;
  transition-duration: 0.2s;
}
@keyframes btn {
  0% {
      transform: scale(0);
      opacity: 0;;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}
section.main .box2 .box-btn .btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--first-color);
  margin: 5vw 0 10vw;
  border-radius: 0.5em;
}
section.main .box2 .box-btn .btn a {
  color: var(--bg-color-white);
  font-weight: 900;
  text-decoration: none;
  border: 2px solid var(--first-color);
  border-radius: 0.5em;
  transition: all 0.5s ease;
}
section.main .box2 .box-btn .btn a:hover {
  background: var(--bg-color-white);
  color: var(--first-color);
  border:  2px solid var(--first-color);
  font-weight: bolder;
}


@media only screen and (min-width: 600px) {
  section.main .box2 {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
  }
}

@media only screen and (min-width: 992px) {
  section.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section.main .box1 {
    width: 50%;
    margin: 0 0 0 5%;
  }
  section.main .box2 {
    width: 50%;
  }
  section.main .box2 .headline {
    margin: 0;
    padding: 0;
  }
  section.main .box2 .headline h1 {
    margin: 0;
    padding: 0;
  }
  section.main .box2 .headline span {
    margin: 0;
    padding: 0;
    font-size: 1rem;
  }
  section.main .box2 .text {
    position: relative;
    width: 60%;
    margin: 3vw auto;
    padding: 0;
  }
  section.main .box2 .box-btn .btn {
    margin: 0;
  }
}

@media only screen and (min-width: 1200px) {
  section.main .box2 .box-btn .btn a {
    margin: 0;
  }
  section.main .box2 .headline span {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 3000px) {
  section.main .box2 .headline span {
    font-size: 2.5rem;
  }
}