/* 
FARBEN
blau #004daa
grün #549820
text #e8e6e3
grau #8f949b
--background-default: #69be28;
  --background-hover: #6ecd37;
  --background-active: #48921e;
  --shadow-default: #69be28;
  --shadow-hover: #6ecd37;
*/
/* === FONTS === */
@font-face {
  font-display: swap;
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/raleway-v29-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Raleway";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/raleway-v29-latin-italic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/raleway-v29-latin-700.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Raleway";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/raleway-v29-latin-700italic.woff2") format("woff2");
}
/* === GLOBAL === */
:root {
  /* bsp:var(--XXX) */
  --blau: #004daa;
  --gruen: #549820;
  --hover-gruen: #6ecd37;
  --grau: #8f949b;
  --hell-grau: #f0f0f0;
  --rot: #a62c21;
  --weiss: #fff;
  --primaere-schriftart: Raleway;
  --sekundaere-schriftart: "Helvetica Neue";
  --tertiaere-schriftart: Arial;
  --fallback-schriftart: sans-serif;
}
html {
  font-size: 16px;
}
body {
  margin: 0;
  font-family: var(
    --primaere-schriftart,
    --sekundaere-schriftart,
    --tertiaere-schriftart,
    --fallback-schriftart
  );
}
* {
  box-sizing: border-box;
}
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
.intro-container {
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  color: var(--blau);
}
.btn1 {
  border: 2px solid var(--gruen);
  box-shadow: 0 0 10px 0 var(--hover-gruen);
  background-color: transparent;
  color: var(--dunkel-grau);
  font-size: 1rem;
}
.btn1:hover {
  border: 2px solid var(--gruen);
  box-shadow: 0 0 10px 0 var(--hover-gruen);
  background-color: var(--blau);
  color: var(--weiss);
  transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out,
    background-color 1s ease-in-out, color 1s ease-in-out;
}
/* === GRID SYSTEM === */
.container {
  width: 95%;
  margin-left: auto; /* margin left right auto zentriert das element, trick 17*/
  margin-right: auto; /* margin left right auto zentriert das element, trick 17*/ /* height wird nicht definiert, da der container immer so breit bleiben soll wie er muss*/
}
.row::after {
  /* clearfixhack, damit sie nicht eineinander floaten. sollen sich in der größe an ihren inhalt anpassen, also soviel wie noetig*/
  content: "";
  clear: both;
  display: block;
}
[class*="col-"] {
  /* attributselektor typ class col- > findet alle class elemente in denen col- steht */
  float: left;
  min-height: 1px;
}
.col-1 {
  width: 16.666%;
}
.col-2 {
  width: 33.333%;
}
.col-3 {
  width: 50%;
}
.col-4 {
  width: 66.666%;
}
.col-6 {
  width: 100%;
}
/* === HEADER-NAV === */
#header-nav {
  width: 100%;
  height: 50px;
  position: relative;
  background-color: var(--blau);
}
#header-nav .container,
#header-nav .row,
#header-nav .col-6 {
  height: 100%; /* damit die hoehe der header nav sich an den container anpasst*/
}
#logo-link {
  /* logo im nav */
  display: inline-block;
  width: auto;
  height: 40px;
  margin-top: 5px;
}
#links-ul {
  float: right;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
#links-ul > li {
  min-width: 140px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  list-style-type: none;
  height: 100%;
}
@media (max-width: 1280px) {
  #links-ul > li {
    min-width: 120px;
  }
}
@media (max-width: 900px) {
  #links-ul > li {
    min-width: 75px;
  }
}
#links-ul > li > a {
  padding-top: 1rem; /* ??????????????????????????????????????????????????????????? */
  padding-bottom: 0.9rem;
  display: inline-block;
  text-decoration: none;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 100%;
  font-weight: bold;
}
#header-nav .col-6 {
  padding-top: 0;
  padding-bottom: 0;
}
#header-nav ul > li > a:link {
  color: var(--weiss);
  text-decoration: none;
}
#header-nav ul > li > a:visited {
  color: var(--weiss);
  text-decoration: none;
}
#header-nav ul > li > a:hover {
  color: var(--hover-gruen);
  text-decoration: none;
  font-weight: bold;
}
#header-nav ul > li > a:active {
  color: var(--weiss);
  text-decoration: none;
}
.active {
  background-color: var(--gruen);
  padding: 0;
  color: var(--weiss);
}
#active-a:hover {
  color: var(--hell-grau) !important;
}
/* === MOBILE-NAV === */
#mobile-nav {
  display: none;
}
@media (max-width: 768px) {
  #desktop-nav {
    display: none;
  }
  #mobile-nav {
    display: block;
  }
}
#mobile-nav-dropdown {
  position: relative;
  float: right;
}
#mobile-nav-button {
  height: 37px;
  width: 37px;
  position: relative;
  font-size: 2rem;
  color: var(--weiss);
  float: right;
  border: 3px solid var(--gruen);
  margin-top: 6px;
  margin-bottom: 8px;
}
#mobile-nav-button > span {
  position: absolute;
  font-size: 2rem;
  color: var(--weiss);
  bottom: -2px;
  left: 6px;
}
#mobile-nav-content {
  display: none;
  position: absolute;
  float: right;
  right: 0;
  top: 50px;
}
#mobile-nav-dropdown:hover > #mobile-nav-content {
  display: block;
}
#mobile-nav-content > ul > li {
  display: block;
  background-color: var(--gruen);
  height: 50px;
  padding: 0 1.2rem; /* kurzschreibweise0 oben unten, 1.2 li re */
  text-align: center;
}
#mobile-a {
  box-shadow: 0 0 25px 10px var(--hover-gruen) inset;
}
/* === HEADER === */
#header-banner {
  background: url("../img/banner-groß.jpg") no-repeat;
  width: 100%;
  height: 0;
  padding-top: 20.83%;
  background-size: contain;
}
/* === FOOTER === */
.footer {
  height: 50px;
  background-color: var(--blau);
  color: var(--hell-grau);
  margin-top: 20rem;
}
#col-6-footer {
  padding: 0.9rem;
  margin-top: 0;
}
#footer-nav {
  float: right;
  text-decoration: none;
}
#footer-nav a:link {
  color: var(--weiss);
}
#footer-nav a:visited {
  color: var(--weiss);
}
#footer-nav a:active {
  color: var(--weiss);
}
#footer-nav a:hover {
  color: var(--hover-gruen);
}
#footer-nav > a {
  text-decoration: none;
}
@media (max-width: 768px) {
  .footer span {
    display: none;
  }
  #footer-nav {
    display: block;
    text-align: center;
    float: none;
  }
}

/* IMPRESSUM */
#impressum {
  text-align: center;
}
#impressum h1 {
  margin-top: 4rem;
}
#e-recht:link {
  color: var(--gruen);
  text-decoration: none;
}
#e-recht:visited {
  color: var(--gruen);
  text-decoration: none;
}
#e-recht:hover {
  color: var(--hover-gruen);
  text-decoration: none;
}
#e-recht:active {
  color: var(--gruen);
  text-decoration: none;
}
#barcode {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 33%;
}
#footer-impressum {
  height: 50px;
  background-color: var(--blau);
  color: var(--hell-grau);
  margin-top: 3rem;
}
@media (max-width: 850px) {
  #footer-impressum {
    margin-top: 11rem;
  }
}
@media (max-width: 768px) {
  #footer-impressum span {
    display: none;
  }
  #footer-nav {
    display: block;
    text-align: center;
    float: none;
  }
}
/* WILLKOMMEN */
@keyframes logoAnimation {
  0% {
    transform: rotateZ(0deg);
  }
  11.111% {
    transform: rotateZ(0deg);
  }
  22.222% {
    transform: rotateZ(90deg);
  }
  33.333% {
    transform: rotateZ(90deg);
  }
  44.444% {
    transform: rotateZ(180deg);
  }
  55.555% {
    transform: rotateZ(180deg);
  }
  66.666% {
    transform: rotateZ(270deg);
  }
  77.777% {
    transform: rotateZ(270deg);
  }
  88.888% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
#willkommen-logo-anim {
  height: 200px;
  width: 200px;
  background-color: var(--gruen);
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  padding: 25px;
  margin-bottom: 2rem;
}
#willkommen-logo-anim > img {
  display: block;
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  animation: logoAnimation 5s ease-in-out infinite alternate;
}
/* background-image: linear-gradient(135deg, var(--ff-aqua) 0%, var(--ff-blue) 50%, var(--ff-purple) 100%); */
@media (max-width: 640px) {
  #willkommen-logo-anim {
    height: 150px;
    width: 150px;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  #willkommen-logo-anim > img {
    height: 100px;
    width: 100px;
  }
}
#ansprache {
  position: relative;
  font-size: 1.5rem;
  color: var(--blau);
}
#ansprache > p {
  letter-spacing: 0.1rem;
  line-height: 2rem;
}
#willkommen {
  position: relative;
}
#vertikal-logo {
  position: absolute;
  top: 50px;
  right: 80px;
  height: 100%;
}
@media (max-width: 1024px) {
  #vertikal-logo {
    display: none;
  }
}
/* LEBENSLAUF */

#lebenslauf {
  background: url("../img/1-1920x1080.jpg") no-repeat;
  width: 100%;
  padding-top: 56.25%;
  background-size: cover;
  position: relative;
}
@media (max-width: 768px) {
  #lebenslauf {
    display: none;
  }
}
#mobile-lebenslauf > img {
  width: 100%;
}
@media (min-width: 769px) {
  #mobile-lebenslauf > img {
    display: none;
  }
}
#timlebenslauf {
  line-height: 1.2;
  position: absolute;
  top: 9rem;
  right: 6rem;
  color: var(--blau);
  text-align: right;
  font-weight: bold;
  font-size: 3vw;
}
@media (max-width: 19200px) {
  #timlebenslauf {
    top: 6rem;
    right: 4rem;
    font-size: 2.9vw;
  }
}
@media (max-width: 1440px) {
  #timlebenslauf {
    top: 6rem;
    right: 4rem;
    font-size: 2.9vw;
  }
}
@media (max-width: 1280px) {
  #timlebenslauf {
    top: 6rem;
    right: 3.3rem;
    font-size: 2.9vw;
  }
}
@media (max-width: 1100px) {
  #timlebenslauf {
    top: 6rem;
    right: 2.9rem;
    font-size: 2.9vw;
  }
}
@media (max-width: 1024px) {
  #timlebenslauf {
    top: 6rem;
    right: 2.9rem;
    font-size: 2.9vw;
  }
}
@media (max-width: 900px) {
  #timlebenslauf {
    top: 6rem;
    right: 2.9rem;
    font-size: 2.8vw;
  }
}
@media (max-width: 768px) {
  #timlebenslauf {
    display: none;
    /* top: 2rem;
    right: 1.8rem;
    font-size: 2.7vw; */
  }
}
#lebenslauf-container {
  line-height: 1.3;
  color: var(--blau);
  font-size: 1.5rem;
}

/* KONTAKT */

#kontakt {
  width: 95%;
  /* text-align: center; */
  margin-left: auto;
  margin-right: auto;
  padding: 0.8rem;
}
#kontakt-formular {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#kontakt-formular .col-3,
#kontakt-formular .col-6 {
  padding: 0.8rem;
}
#kontakt-formular input,
#kontakt-formular textarea {
  width: 100%;
  border: 2px solid var(--gruen);
  box-shadow: 0 0 10px 0 var(--gruen);
  padding: 0.5rem;
  font-size: 1rem;
  font-family: var(
    --primaere-schriftart,
    --sekundaere-schriftart,
    --tertiaere-schriftart,
    --fallback-schriftart
  );
  color: var(--blau);
}
@media (min-width: 768px) {
  #mailsend > p {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .col-3 {
    width: 100%;
  }
}

/* ABSENDEN BUTTON */
@keyframes extend {
  0% {
    width: 150px;
    height: 40px;
    border-radius: 100px;
  }
  10% {
    width: 150px;
    height: 40px;
    background: #fff;
    margin-left: auto;
    margin-top: auto;
  }
  20% {
    width: 150px;
    height: 40px;
    background: var(--hover-gruen);
    margin-left: auto;
    margin-top: auto;
  }
  100% {
    width: 150px;
    height: 150px;
    border-radius: 100px;
    margin-left: auto;
    margin-top: auto;
    background: var(--hover-gruen);
  }
}
@keyframes disappear {
  0% {
    opacity: 1;
  }
  20% {
    color: #fff;
  }
  100% {
    opacity: 0;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.cont {
  /* position: absolute; */
  width: 160px;
  height: 10px;
  left: 50%;
  top: 50%;
  /* margin:-100px 0 0 -300px; */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-top: 1rem;
}
.btn {
  border-width: 1px;
  width: 150px;
  height: 40px;
  /*border-radius*/
  border-radius: 40px;
  background: var(--hover-gruen);
  position: absolute;
  border: 3px solid var(--blau);
  box-shadow: 0 0 10px 0 var(--hover-gruen);
}
.btn > span {
  font-size: 1.2rem;
  color: var(--weiss);
}
.btn:hover > span {
  font-size: 1.2rem;
  color: var(--weiss);
}
.btn > img {
  height: "62px";
  width: "62px";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
button:hover {
  /*animation*/
  -webkit-animation: extend 1s ease-in-out;
  -ms-animation: extend 1s ease-in-out;
  animation: extend 1s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  /* Chrome, Safari, Opera */
  animation-fill-mode: forwards;
  box-shadow: 0 0 15px 0 var(--hover-gruen);
}
button:hover > span {
  /*animation*/
  -webkit-animation: disappear 1s ease-in-out;
  -ms-animation: disappear 1s ease-in-out;
  animation: disappear 1s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  /* Chrome, Safari, Opera */
  animation-fill-mode: forwards;
}
button:hover > img {
  /*animation*/
  -webkit-animation: appear 1s ease-in-out;
  -ms-animation: appear 1s ease-in-out;
  animation: appear 1s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  /* Chrome, Safari, Opera */
  animation-fill-mode: forwards;
}
/* BUTTON ENDE */

#kontakt-tmc {
  margin-top: 5rem;
  background: url("../img/tmc-logo-cut-blau.png") no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 0;
  padding-top: 18.66%;
  background-size: contain;
}
#kontakt-footer {
  margin-top: 4rem;
}

@media (max-width: 1366px) {
  #kontakt-tmc {
    background: url("../img/tmc-logo-cut-blau.png") no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: 0;
    padding-top: 18.66%;
    background-size: contain;
    margin-top: 5rem;
  }
}
@media (max-width: 768px) {
  #kontakt-tmc {
    margin-top: 7rem;
  }
}
@media (min-width: 1921px) {
  #kontakt-tmc {
    max-width: 70%;
  }
}