/*
██████  ███████ ███████  █████  ██    ██ ██   ████████     ███████ ████████ ██    ██ ██      ███████ ███████
██   ██ ██      ██      ██   ██ ██    ██ ██      ██        ██         ██     ██  ██  ██      ██      ██
██   ██ █████   █████   ███████ ██    ██ ██      ██        ███████    ██      ████   ██      █████   ███████
██   ██ ██      ██      ██   ██ ██    ██ ██      ██             ██    ██       ██    ██      ██           ██
██████  ███████ ██      ██   ██  ██████  ███████ ██        ███████    ██       ██    ███████ ███████ ███████
*/

* {
  margin: 0;
  padding: 0;
  /* color: #2f90b0; */
  box-sizing: border-box;
  scroll-behavior: smooth;
  /* font-family: 'Roboto Mono', monospace; */
  font-family: "Lato", "Trebuchet MS", "open sans", monospace;
}
img {
  max-width: 100%;
}
a {
  color: #000000;
}
.unselectable {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
div.headerContent.indexHeaderContent > h1 {
  transition: font-size 0.5s;
}
a.skipNav.hidden {
  padding: 8px;
  position: absolute;
  background: #2f90b0;
  left: 43%;
  height: 30px;
  transform: translateY(-200%);
  transition: transform 0.3s;
}
a.skipNav:focus {
  transform: translateY(-60%);
}

/* hamburger icon */

label.hamburg {
  display: block;
  background: #5550;
  width: 75px;
  height: 75px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}
input#hamburg {
  display: none;
}
.row {
  max-width: 75px;
  float: right;
  display: block;
  right: 0;
  position: absolute;
  z-index: 20 !important;
  margin: 10px;
}
.line {
  position: absolute;
  left: 10px;
  height: 4px;
  width: 55px;
  background: #d4d4d4;
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: center;
}
.line:nth-child(1) {
  top: 12px;
}
.line:nth-child(2) {
  top: 24px;
}
.line:nth-child(3) {
  top: 36px;
}
#hamburg:checked + .hamburg .line:nth-child(1) {
  transform: translateY(12px) rotate(-45deg);
}
#hamburg:checked + .hamburg .line:nth-child(2) {
  opacity: 0;
}
#hamburg:checked + .hamburg .line:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}
#hamburg:checked + .hamburg .line {
  background: #838383;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #919191;
}
p {
  margin-bottom: 20px;
}

/*
███    ███  █████  ██ ███    ██     ███████ ████████ ██    ██ ██      ███████ ███████
████  ████ ██   ██ ██ ████   ██     ██         ██     ██  ██  ██      ██      ██
██ ████ ██ ███████ ██ ██ ██  ██     ███████    ██      ████   ██      █████   ███████
██  ██  ██ ██   ██ ██ ██  ██ ██          ██    ██       ██    ██      ██           ██
██      ██ ██   ██ ██ ██   ████     ███████    ██       ██    ███████ ███████ ███████
*/

body {
  display: flex;
  flex-direction: column;
}

/* #main {
    display: flex;
    flex-direction: column;
  } */

main section > div {
  min-height: 100vh;
  /* max-height: 100vh; */
}
main section > div:nth-child(1) {
  /* background: linear-gradient(45deg, #3100ff 5%, #00d4ff 100%); */
  /* background: linear-gradient(45deg, #87ff00 5%, #00ff5e 100%); */
  background-image: url(../svg/left.svg);
  background-image: url(../svg/right.svg);
  background-image: url(../svg/bg_index_small.svg),
    linear-gradient(45deg, #5a5a5a 5%, #777777 100%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  min-height: 100vh;
  max-height: 110vh;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end; */
}
main section .backgroundFirst {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  min-height: 100vh;
  /* max-height: 110vh; */
  max-height: 100vh;
  width: 100%;
  background: linear-gradient(45deg, #212121 5%, #3a3a3a 100%);
  background: linear-gradient(45deg, #5a5a5a 5%, #777777 100%);
}
#logo {
  max-width: 60%;
  max-width: 160px;
}
.katjawiebking {
  max-width: 500px;
  height: auto;
}
.headerContent {
  margin: auto;
  margin-left: 20px;
  margin-top: 90px;
}
.indexHeaderContent {
  margin-top: 50px;
}
.headerContent h1 {
  color: #ffffff;
  font-size: 200%;
  font-size: 50px;
}
.headerContent a {
  font-size: 200%;
  color: white;
  text-decoration: none;
}
.headerContent b {
  color: #2f90b0;
}
#mainnavi a,
#mainnavi p {
  padding: 10px;
  text-decoration: none;
  display: block;
  font-family: Arial, sans-serif;
  font-weight: 700;
  border: 0 none;
  border-radius: 6px;
  color: white;
  margin-bottom: 0;
}
#split_nav a,
#split_nav p {
  display: none;
}
#split_nav a.visible,
#split_nav p.visible {
  display: contents;
}
.splitItems {
  font-size: 10px;
  height: 10px;
}
#mainnavi .katjawiebking {
  /* margin-left: auto; */
  display: block;
  font-size: 20px;
}
#mainnavi .katjawiebking b {
  font-size: 30px;
  line-height: 10px;
}

/*
███████  ██████   ██████  ████████ ███████ ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
█████   ██    ██ ██    ██    ██    █████   ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
██       ██████   ██████     ██    ███████ ██   ██
*/

footer {
  padding: 20px;
  background-color: #212325;
  display: flex;
  flex-direction: column;
}
footer h2 {
  color: #b1b1b1;
  font-size: 20px;
}
footer .info {
  margin-bottom: 50px;
}
footer .info p {
  font-size: 15px;
  font-weight: lighter;
  color: #e2e2e2;
}
footer .info a {
  color: #37a0c3;
}
footer .info .toContactPagebtn {
  height: 40px;
  width: auto;
  padding: 5px;
  border: 0;
  background-color: #43474a;
  /* outline: none; */
  font-size: 20px;
  color: #c1c1c1;
}
footer .info .toContactPagebtn:hover,
footer .info .toContactPagebtn:focus {
  background-color: #555a5d;
  cursor: pointer;
}
footer .contactField {
  max-width: 100%;
  max-width: 570px;
  font-size: 20px;
  /* font-size: 16px; */
}
footer .bottomRow * {
  text-align: center;
  color: #b1b1b1;
  text-decoration: none;
  font-size: 14px;
}
footer form {
  /* padding: 20px; */
  max-width: 100%;
  background-color: #212325;
}
footer form p {
  color: white;
}
footer form.submitted {
  transition: opacity 0.3s ease-out;
  opacity: 0.4;
  pointer-events: none;
}

form input,
form textarea {
  padding: 5px;
  width: 100%;
  border: 0;
  /* border-radius: 10px; */
  background-color: #43474a;
  outline: none;
  color: white;
}
form input::placeholder,
form textarea::placeholder {
  font-size: 18px;
}
form input {
  width: 100%;
  height: 40px;
  margin-bottom: 5px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: #43474a;
  -webkit-background-color: #43474a;
  outline: none;
  -webkit-text-fill-color: white;
  /* -webkit-box-shadow: 0 0 0px 1000px #43474a inset; */
  transition: background-color 5000s ease-in-out 0s;
}
form textarea {
  min-height: 120px;
  height: 120px;
  max-height: 370px;
  font-size: 16px;
  min-width: 100%;
  max-width: 100%;
}
#submit-button,
.toContactPagebtn {
  transition: background 0.2s;
  font-size: 18px;
  width: 100%;
}
#submit-button:hover,
#submit-button:focus {
  background-color: #555a5d;
  cursor: pointer;
}

/* form input[type="button"] {
    cursor: pointer;
    font-size: 20px;
    background-color: #716b73;
  }
  form input[type="button"]:hover {
    background-color: #8b848e;
  } */

/* errormessages */

#error-messages {
  padding: 20px;
  border: 2px solid #8e0000;
  color: #ff0000;
  display: none;
}
#error-messages.show {
  display: block;
}
label.error {
  color: red;
}
#scrollToTop {
  display: none;
}
.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 10;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #111;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  white-space: nowrap;
}

/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  margin: 10px 0;
}

/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.sidenav a:focus {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  display: none;
}

/* Style page content -
  use this if you want to push the page content to the right when you open the side navigation */

#main {
  transition: margin-left 0.5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px,
  change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
.mainContainer {
  /* padding: 10%; */
  flex: none;
}
.fadeIn {
  display: block;
  flex-direction: row;
  /* flex-wrap: nowrap; */
  height: 80vh;
  padding: 5px;
}
.fadeIn p {
  /* font-size: 18px; */
}
.fadeIn > div {
  opacity: 0;
  transition: opacity 0.6s 0.1s, transform 0.6s ease,
    -webkit-transform 0.6s ease;
  transform: translateY(50px);
}
svg {
  display: block;
  position: relative;
  /* width: 99vw; */
}
.alignBottom {
  bottom: -4px;
}
.alignTop {
  top: -1px;
}
.rotate {
  transform: rotate(180deg);
}
#page > main > section > div.mainContainer > svg:last-of-type path {
  fill: #212325;
}
.svgEmbed {
  position: relative;
}
div.mainContainer > img.svgEmbed:last-of-type,
img.svgEmbed:first-of-type {
  /* bottom: -2px; */
}

/* @keyframes seperator_anim {
    from {
      d: path("M -2.1381562,124.00944 C 436.17848,338.60524 742.46497,-144.81014 1401.0691,184.36101 L 1400,320 H 0 Z");
    }
    to {
      d: path("M -2.1381562,124.00944 C 535.60275,-106.13126 1183.9942,299.92636 1401.0691,184.36101 L 1400,320 H 0 Z");
    }
  } */

@-webkit-keyframes seperator_anim {
  from {
    d: path(
      "M -2.1381562,124.00944 C 436.17848,338.60524 742.46497,-144.81014 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
  to {
    d: path(
      "M -2.1381562,124.00944 C 535.60275,-106.13126 1183.9942,299.92636 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
}
@-moz-keyframes seperator_anim {
  from {
    d: path(
      "M -2.1381562,124.00944 C 436.17848,338.60524 742.46497,-144.81014 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
  to {
    d: path(
      "M -2.1381562,124.00944 C 535.60275,-106.13126 1183.9942,299.92636 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
}
@-o-keyframes seperator_anim {
  from {
    d: path(
      "M -2.1381562,124.00944 C 436.17848,338.60524 742.46497,-144.81014 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
  to {
    d: path(
      "M -2.1381562,124.00944 C 535.60275,-106.13126 1183.9942,299.92636 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
}
@keyframes seperator_anim {
  from {
    d: path(
      "M -2.1381562,124.00944 C 436.17848,338.60524 742.46497,-144.81014 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
  to {
    d: path(
      "M -2.1381562,124.00944 C 535.60275,-106.13126 1183.9942,299.92636 1401.0691,184.36101 L 1400,320 H 0 Z"
    );
  }
}
.fadeIn:nth-of-type(even) {
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
}
.mainContainer .fadeIn .video {
  flex: 1;
  height: auto;
  width: 100%;
  padding: 3%;
  order: 1;
}
.mainContainer .fadeIn .video video {
  height: auto;
  width: 100%;
  flex: 1;
  /* height: inherit; */
}
.mainContainer .fadeIn .contentContainer {
  flex: 1;
  height: auto;
  width: 100%;
  padding: 3%;
  order: 2;
}
.mainIndexContainer .fadeIn .contentContainer a {
  color: #808080;
  text-decoration: underline;
  transition: color 0.1s linear;
}
.mainIndexContainer .fadeIn .contentContainer a:hover,
.mainIndexContainer .fadeIn .contentContainer a:focus {
  color: #696767;
}
a.anchor {
  display: block;
  position: relative;
  top: -50px;
  visibility: hidden;
}
.menuIcon {
  position: absolute;
  right: 20px;
  color: #818181;
  font-size: 40px;
}
img.menuIcon {
  height: 40px;
  width: auto;
}

/*
██████  ███████ ███████ ██   ██ ████████  ██████  ██████      ██    ██ ██ ███████ ██     ██
██   ██ ██      ██      ██  ██     ██    ██    ██ ██   ██     ██    ██ ██ ██      ██     ██
██   ██ █████   ███████ █████      ██    ██    ██ ██████      ██    ██ ██ █████   ██  █  ██
██   ██ ██           ██ ██  ██     ██    ██    ██ ██           ██  ██  ██ ██      ██ ███ ██
██████  ███████ ███████ ██   ██    ██     ██████  ██            ████   ██ ███████  ███ ███
*/

@media screen and (min-width: 768px) {
  main section .backgroundFirst {
    display: block;
  }
  .sidenav {
    display: none;
  }
  .onMobile {
    display: none;
  }
  /* ::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: blue;
} */
  #logo {
    /* max-width: 100%; */
  }
  #menu-icon {
    display: none;
  }
  .row {
    display: none;
  }
  /* mainnavi */
  #mainnavi {
    display: flex;
    /* height: auto; */
    margin-top: 20px;
    width: 100%;
    /* justify-content: center; */
  }
  .katjawiebking {
    max-width: 400px;
    height: auto;
    margin-left: 20px;
    /* margin-right: auto; */
  }
  #mainnavi .kontaktbtn {
    margin-right: max(15px, 5%);
    border-radius: 100px;
    box-shadow: 7px 7px 14px #636363, -7px -7px 14px #858585;
    background: Transparent;
    height: 46px;
    /* min-width: 10px; */
    width: auto;
    align-items: center;
    cursor: pointer;
    transition: box-shadow 0.1s linear;
  }
  #mainnavi .kontaktbtn:hover,
  #mainnavi .kontaktbtn:focus {
    /* box-shadow: 0 8px 15px rgba(0,0,0,.2);
  box-shadow: 4px 4px 15px rgba(0,0,0,.5), -4px -4px 15px rgba(204, 204, 204, 0.2); */
    box-shadow: 7px 7px 14px #2e2e2e, -7px -7px 14px #454545;
    box-shadow: 7px 7px 14px #606060, -7px -7px 14px #8a8a8a;
  }
  #mainnavi .kontaktbtn a {
    /* color: #2F90B0; */
    color: white;
    /* letter-spacing: -1px; */
    font-weight: 800;
    height: 46px;
    padding: 13px 10px;
  }
  #mainnavi a {
    border: 0 none;
    border-radius: 6px;
    color: white;
  }
  #mainnavi ul {
    max-width: 850px;
    width: 60%;
    white-space: nowrap;
    justify-content: center;
    margin: auto;
    /* padding-left: revert; */
    height: 100px;
  }
  #mainnavi li {
    display: inline-block;
    margin-top: auto;
    padding: auto;
  }
  .headerContent {
    margin: auto;
  }
  .headerContent h1 {
    font-size: 300%;
  }
  /* main {
  display: flex;
} */
  section {
    flex: 1;
    /* margin: 0 20px 0 0; */
    /* height: auto; */
  }
  main section > div:nth-child(1) {
    background: url(../svg/bg_index.svg),
      linear-gradient(45deg, #5a5a5a 5%, #777777 100%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 600px;
    height: 110vh;
    /* min-height: 110vh; */
  }
  .mainIndexContainer .fadeIn,
  .fadeIn:nth-of-type(even) {
    display: flex;
    flex-direction: row;
    padding: 10%;
  }
  .mainContainer .fadeIn .video {
    flex: 1;
    height: auto;
    width: 50%;
    padding: 3%;
  }
  .fadeIn:nth-of-type(even) .video {
    order: 2;
  }
  .fadeIn:nth-of-type(even) .contentContainer {
    order: 1;
  }
  .mainContainer .fadeIn .video video {
    height: auto;
    width: 100%;
    flex: 1;
    height: inherit;
  }
  .mainContainer .fadeIn .contentContainer {
    flex: 1;
    height: auto;
    width: 50%;
    padding: 3%;
  }
  .fadeIn p {
    font-size: 20px;
  }
  /* footer */
  footer {
    display: grid;
    grid-template-rows: auto 30px;
    grid-template-columns: 50% 50%;
    grid-row-gap: 100px;
  }
  footer h2 {
    font-size: 24px;
  }
  footer .contactField {
  }
  footer .info {
    padding-left: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }
  footer .info p {
    font-size: 20px;
  }
  footer .bottomRow {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  footer .bottomRow a {
  }
  footer .bottomRow a::after {
    content: " \00B7";
    margin: 0 10px;
  }
  footer form {
    /* padding: 20px; */
    width: 570px;
  }
  form input,
  form textarea {
    padding: 5px;
    width: 100%;
    border: 0;
    /* border-radius: 10px; */
    outline: none;
    font-size: 18px;
  }
  form input::placeholder,
  form textarea::placeholder {
    font-size: 18px;
  }
  form input {
    width: 280px;
    width: 100%;
    height: 40px;
  }
  form input.input_name,
  form input.input_email,
  form textarea.input_message {
    margin: 0;
    margin-top: 5px;
  }
  #scrollToTop {
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 20px;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    cursor: pointer;
    position: fixed;
    background-color: #474747;
    transition: background 0.4s ease;
    padding-top: 5px;
  }
  #scrollToTop:hover,
  #scrollToTop:focus {
    background-color: #2f90b0;
  }
  #scrollToTop {
    /* content: "\f077"; */
    font-family: FontAwesome, arial;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 200%;
    color: #fff;
  }
  #scrollToTop.show {
    display: inline-block;
    text-align: center;
  }
}

/*
████████  █████  ██████  ██      ███████ ████████     ██    ██ ██ ███████ ██     ██
   ██    ██   ██ ██   ██ ██      ██         ██        ██    ██ ██ ██      ██     ██
   ██    ███████ ██████  ██      █████      ██        ██    ██ ██ █████   ██  █  ██
   ██    ██   ██ ██   ██ ██      ██         ██         ██  ██  ██ ██      ██ ███ ██
   ██    ██   ██ ██████  ███████ ███████    ██          ████   ██ ███████  ███ ███
*/

@media screen and (max-width: 1030px) {
  .sidenav {
    display: block;
  }
  .row {
    display: block;
  }
  .kontaktbtn {
    display: none;
  }
  #mainnavi {
    /* list-style-type: none; */
    position: relative;
  }
  #mainnavi ul {
    display: none;
  }
  form input,
  form textarea {
    padding: 5px;
    width: 100%;
    border: 0;
    /* border-radius: 10px; */
    background-color: #43474a;
    outline: none;
  }
  form input::placeholder,
  form textarea::placeholder {
    font-size: 18px;
  }
  form input {
    width: 100%;
    height: 40px;
    margin-bottom: 5px;
  }
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    background-color: #43474a;
    -webkit-background-color: #43474a;
    outline: none;
    -webkit-text-fill-color: white;
    /* -webkit-box-shadow: 0 0 0px 1000px #43474a inset; */
    transition: background-color 5000s ease-in-out 0s;
  }
  form textarea {
    height: 120px;
    max-height: 370px;
    font-size: 16px;
    max-width: 100%;
  }
  form input.input_name {
    margin-right: 0;
  }
  form input.input_email {
    margin-left: 0;
  }
  form .input_message {
    margin-top: 0;
  }
}
main section > div:nth-child(1) {
  /* background: none; */
}
main section .backgroundFirst {
  /* display: none; */
}
svg {
  /* display: none; */
}
#path56 {
  fill: red;
}
html body div#page main section div div#mainnavi ul li a.hygienekonzept {
  /* border-bottom: 3px solid red; */
  border-radius: 0px;
}

/* * {
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
} */