@charset "UTF-8";
@import url("https://use.typekit.net/wpg3fxy.css");
/*!
* Start Bootstrap - Coming Soon v6.0.7 (https://startbootstrap.com/theme/coming-soon)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-coming-soon/blob/master/LICENSE)
*/
/*!
 * Bootstrap  v5.2.3 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */


*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bluegray: #9EC5CC;
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(220, 220, 220, 0.3);
  border-radius: 10px;
}


@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

input, button, select, textarea {
  font: inherit;
}

html {
  height: 100%;
  color-scheme: dark;
}

body {
  height: 100%;
  position: relative;
  font-family: canada-type-gibson, Arial, Helvetica, sans-serif;
  color: white;
}

body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bluegray);
  opacity: 0.7;
  z-index: 1;
}

h1 {
  text-transform: uppercase;
  font-size: var( --step-3);
  letter-spacing: 0.1rem;
  margin-bottom: 1em;
  /* width: 50vw; */
}

h2 {
  font-size: var(--step-2);
  font-weight: 400;
  margin-bottom: 0.3em;
}

h3 {
  font-size: var(--step-1);
  font-weight: 400;
}

p {
  font-size: var( --step-0);
  line-height: 1.4;
  /* text-align: justify; */
}

ul {
  list-style-type: none;
  z-index: 3;
  /* overflow: hidden; */
}

li {
  float: left;
  margin-top: 0.5rem;
}

a {
  color: var(--bluegray);
}

.bg-img {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
}

/* Zum responsive machen von Bildern im Inhalt, funktioniert noch nicht  */
.image-embed-item {
  max-width: 100%;
}

.logo {
  position: fixed;
  /* width: 150px; */
  right: 12%;
  bottom: 5%;
  z-index: 1;
}

/* video.bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
}

@media (pointer: coarse) and (hover: none) {
  body {
    background: url("../assets/img/bg-mobile-fallback.jpg") #2a5555 no-repeat center center scroll;
    background-size: cover;
  }
  body video {
    display: none;
  }
} */

.main {
  position: relative;
  overflow: hidden;
  z-index: 2;
  display: flex;
}

.main:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}


.main .main-content {
  position: relative;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* align-items: flex-start; */
}

@media (min-width: 992px) {
  .main {
    height: 100%;
    width: 75vw;
    min-height: 0;
    padding-bottom: 0;
  }
  .main:before {
    transform: skewX(-9deg);
    transform-origin: top right;
  }
  .main .main-content {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 25%;
    padding-right: 15%;
  }

  .dropdown__button {
    display: none;
  }
}

.main-nav {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.main-nav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: var( --step-1);
  list-style-type: none;
  padding-right: 1em;
}

.main-nav a:hover, .main-nav a:focus .main-nav a:active {
  text-decoration: underline;
}

@media (max-width: 992px) {
.dropdown {
  position: relative;
}

.dropdown button {
  background-color: #1d1d1b;
  color: white;
  border: none;
  text-transform: uppercase;
}

.dropdown button img {
  height: 20px;
}

.dropdown__menu ul {
  position: absolute;
  background-color: #1d1d1b;
  border-radius: 5px;
  /* box-shadow: 0 2px 15px 0 rgba(255, 255, 255, .1); */
  display: none;
}
.dropdown:hover .dropdown__menu ul {
  display: flex;
  flex-direction: column;
}

.dropdown__menu li {
  padding: 10px;
}

.dropdown__menu li {
  padding: 10px;
}

.logo {
position: absolute;
width: 50px;
height: 50px;
top: 0;
padding-right: 100px;
z-index: 5;
}

}

.container-fluid {
  overflow: auto;
  padding-right: 1rem;
  margin-top: 3rem;
}

.footer {
  margin-bottom: 2rem;
  margin-top: 5rem;
}

.footer a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8rem;
  list-style-type: none;
  padding-right: 1em;
}

.footer a:hover, .footer a:focus {
  text-decoration: underline;
}

.footer a:active {
  text-decoration: underline;
}


/* Formular */

form {
  margin-top: 2rem;
  width: 100%;
  min-width: 300px;
}

form .form-group {
  position: relative;
  margin-bottom: 1rem;
}

form .form-group .form-control {
  width: 93%;
  padding: 0.625rem 10px;
  font-size: 1rem;
  /* letter-spacing: 0.062rem; */
  /* margin-bottom: 1.875rem; */
  border: 1px solid #ccc;
  background: rgba(70, 90, 126, 0.4);
  border-radius: 4px;
  color: white;
}

form .form-group .form-label {
  font-size: var(--step-1);
}

form .form-group .form-label .xxlarge {
  font-size: var(--step-1);
}

/* form .form-group .form-control:focus ~ .form-label,
form .form-group .form-control:valid ~ .form-label,
form .form-group .form-control:not([value=""]) ~ .form-label {
  top: -1.5rem;
  left: 10px;
  color: white;
  font-size: var( --step-0);
  height: 10px;
  padding-left: 5px;
  padding-right: 5px;
} */

form .form-group .form-control:focus {
  outline: none;
  border: 2px solid white;
}


input:focus { 
  outline:none; 
}

textarea {
  font-family: canada-type-gibson, Arial, Helvetica, sans-serif;
  font-size: var( --step-0);
  line-height: 1.4;
}


.actions .btn {
  margin-right: 1.76rem;
  margin-bottom: 2rem;
  border: none;
  outline: none;
  color: #000;
  background-color: white;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  border-radius: 0.312rem;
  font-size: 1rem;
  float: right;
  text-transform: uppercase;
}

.actions .btn:hover {
  background-color: black;
  color: white;
}


/* 
form input[type="submit"] {
  margin-right: 1.76rem;
  margin-bottom: 2rem;
  border: none;
  outline: none;
  color: #000;
  background-color: white;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  border-radius: 0.312rem;
  font-size: 1rem;
  float: right;
  text-transform: uppercase;
}

form input[type="submit"]:hover {
  background-color: black;
  color: white;
} */