@charset "UTF-8";
/* +--- Import der Variablen + Base SCSS Datei ---+ */
/* +--- Variablen ---+ */
/* +--- Navigation + Footer ---+ */
/* +--- (in alter Schreibweise, sodass sie geändert werden können) ---+ */
:root {
  --nav-height: 80px;
  --footer-height: 160px;
}

/* +--- Schriftarten ---+ */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/Space Grotesk/space-grotesk.woff2") format("woff2"), url("../fonts/Space Grotesk/space-grotesk.woff") format("woff");
}
/* +--- Farben ---+ */
/* +--- Form ---+ */
/* +--- Media Breakpoints (Bootstrap) ---+ */
/* +--- Media Queries ---+ */
/* +--- Desktop | Gross (max. 1399px) ---+ */
/* +--- Desktop | Normal (max. 1199px) ---+ */
/* +--- Tablet (max. 991px) ---+ */
@media (max-width: 991px) {
  :root {
    --nav-height: 80px;
    --footer-height: 280px;
  }
}
/* +--- Wide Smartphone (max. 767px) ---+ */
/* +--- Smartphone (max. 575px) ---+ */
/* +--- Import der Variablen SCSS Datei ---+ */
/* +--- Variablen ---+ */
/* +--- Navigation + Footer ---+ */
/* +--- (in alter Schreibweise, sodass sie geändert werden können) ---+ */
:root {
  --nav-height: 80px;
  --footer-height: 160px;
}

/* +--- Schriftarten ---+ */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/Space Grotesk/space-grotesk.woff2") format("woff2"), url("../fonts/Space Grotesk/space-grotesk.woff") format("woff");
}
/* +--- Farben ---+ */
/* +--- Form ---+ */
/* +--- Media Breakpoints (Bootstrap) ---+ */
/* +--- Media Queries ---+ */
/* +--- Desktop | Gross (max. 1399px) ---+ */
/* +--- Desktop | Normal (max. 1199px) ---+ */
/* +--- Tablet (max. 991px) ---+ */
@media (max-width: 991px) {
  :root {
    --nav-height: 80px;
    --footer-height: 280px;
  }
}
/* +--- Wide Smartphone (max. 767px) ---+ */
/* +--- Smartphone (max. 575px) ---+ */
/* +--- Navigation ---+ */
nav.navbar {
  height: var(--nav-height);
  position: fixed;
  background-color: white;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 2px solid #14285A;
  align-items: center;
  /* +--- Mobile Navbar (Max: 992px) ---+ */
}
nav.navbar .navbar-logo {
  height: 70%;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}
nav.navbar .navbar-logo img {
  height: 100%;
}
nav.navbar .navbar-logo:focus-visible {
  outline: 2px solid #4FC6CE;
  box-shadow: none;
  background-color: #1B8A8F;
}
nav.navbar .nav-item {
  /* +--- Desktop (Min: 1199px) ---+ */
}
nav.navbar .nav-item .nav-link {
  position: relative;
  text-decoration: none;
  padding-right: 1rem;
  padding-left: 1rem;
  transition: all 0.3s ease-in-out;
  font-size: 20px;
  color: #4FC6CE;
  padding-bottom: 0;
  padding-top: 0;
}
nav.navbar .nav-item .nav-link:hover {
  color: #4FC6CE;
}
nav.navbar .nav-item .nav-link:focus-visible {
  outline: 2px solid #4FC6CE;
  box-shadow: none;
  background-color: #1B8A8F;
  color: #4FC6CE;
}
@media (min-width: 1199px) {
  nav.navbar .nav-item a::after {
    background-color: #4FC6CE;
    content: "";
    height: 3px;
    left: 50%;
    width: calc(100% - 40px);
    position: absolute;
    top: 100%;
    transition: transform 0.4s;
    transform: translateX(-50%) scaleX(0);
  }
  nav.navbar .nav-item:hover a::after {
    transform: translateX(-50%) scaleX(1);
  }
}
nav.navbar #navbar-toggler {
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  border-radius: 100%;
  position: relative;
  z-index: 99;
}
nav.navbar #navbar-toggler .nav-toggler-line {
  position: absolute;
  width: 50%;
  height: 5px;
  background-color: #4FC6CE;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}
nav.navbar #navbar-toggler .nav-toggler-line#nav-toggler-line-top {
  top: 30%;
}
nav.navbar #navbar-toggler .nav-toggler-line#nav-toggler-line-top.selected {
  top: 24%;
  transform: rotate(-45deg) translateX(-70%);
}
nav.navbar #navbar-toggler .nav-toggler-line#nav-toggler-line-center {
  top: 50%;
}
nav.navbar #navbar-toggler .nav-toggler-line#nav-toggler-line-center.selected {
  opacity: 0;
}
nav.navbar #navbar-toggler .nav-toggler-line#nav-toggler-line-bottom {
  top: 70%;
}
nav.navbar #navbar-toggler .nav-toggler-line#nav-toggler-line-bottom.selected {
  top: 74%;
  transform: rotate(45deg) translateX(-70%);
}
@media (max-width: 991px) {
  nav.navbar #mobile-nav {
    position: absolute;
    width: 100%;
    left: 0;
    background-color: white;
    text-align: center;
    transition: all 0.3s ease-in-out;
    top: -180px;
    z-index: 0;
    border-bottom: 2px solid #14285A;
    padding-top: 10px;
  }
  nav.navbar #mobile-nav .nav-link {
    padding-top: 0.3rem;
    padding-bottom: 0.5rem;
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    width: fit-content;
    margin-inline: auto;
  }
  nav.navbar #mobile-nav.open-nav {
    top: var(--nav-height);
  }
  nav.navbar #nav-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
  }
}

/* +--- Footer ---+ */
footer {
  position: absolute;
  height: var(--footer-height);
  bottom: 0;
  background-color: white;
  color: white;
  border-top: 2px solid #14285A;
}
footer .footer-link {
  text-align: center;
  align-content: center;
  font-size: 90%;
  margin-inline: 0.5rem;
}
footer .footer-link a {
  color: #4FC6CE;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  outline: none;
}
footer .footer-link a:hover {
  color: #4FC6CE;
}
footer .footer-link a:focus-visible {
  background-color: #1B8A8F;
  outline: 2px solid #4FC6CE;
}
footer .footer-link .footer-logo {
  height: 100%;
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 0.5rem;
}
footer .footer-link .footer-logo img {
  height: 3rem;
  transition: all 0.3s ease-in-out;
}
footer .footer-link .footer-logo:focus-visible {
  outline: 2px solid #4FC6CE;
  background-color: #1B8A8F;
}
@media screen and (max-width: 1199px) {
  footer .footer-link .footer-link {
    font-size: 1rem;
  }
}
@media screen and (max-width: 991px) {
  footer .footer-link {
    margin-inline: 0;
  }
}
@media screen and (max-width: 575px) {
  footer .footer-link .footer-link {
    margin-inline: auto;
  }
}

/* +--- Import der Variablen SCSS Datei ---+ */
/* +--- Variablen ---+ */
/* +--- Navigation + Footer ---+ */
/* +--- (in alter Schreibweise, sodass sie geändert werden können) ---+ */
:root {
  --nav-height: 80px;
  --footer-height: 160px;
}

/* +--- Schriftarten ---+ */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/Space Grotesk/space-grotesk.woff2") format("woff2"), url("../fonts/Space Grotesk/space-grotesk.woff") format("woff");
}
/* +--- Farben ---+ */
/* +--- Form ---+ */
/* +--- Media Breakpoints (Bootstrap) ---+ */
/* +--- Media Queries ---+ */
/* +--- Desktop | Gross (max. 1399px) ---+ */
/* +--- Desktop | Normal (max. 1199px) ---+ */
/* +--- Tablet (max. 991px) ---+ */
@media (max-width: 991px) {
  :root {
    --nav-height: 80px;
    --footer-height: 280px;
  }
}
/* +--- Wide Smartphone (max. 767px) ---+ */
/* +--- Smartphone (max. 575px) ---+ */
/*
    Styling Datei zum Stylen von FORM ELEMENTEN wie Textbox, DropDown, DatePicker, NumericTextbox, MultiSelect, Upload, Radio, Checkboxes
    +-------------------------------------------------------------------------------------------------------------------------------------+
    Interessante Klassen:
    +---------------+                                                                   +---------------+
    +-------------------------------------- FORM CONTROL -----------------------------------------------+
    +-------------- ↓                                                                   ↓ --------------+
    Typ:                                    Textbox, DropDown, DatePicker, NumericTextbox, Multiselect
    Zeile:
    Klassen:
        .form-control:                      Standard Form Control
    +---------------+                                                                   +---------------+
    +-------------------------------------- CHECKBOX ---------------------------------------------------+
    +---------------+                                                                   +---------------+
    Typ:                                    Checkbox (TNB, DS, SOP, etc.)
    Zeile:
    Klassen:
        .form-ckeck:                        Standard Checkbox
            .form-switch:                       Checkbox Slider (ähnlich iPhone)
    +---------------+                                                                   +---------------+
    +-------------------------------------- RADIO ------------------------------------------------------+
    +-------------- ↓                                                                   ↓ --------------+
    Typ:                                    Radio
    Zeile:
    Klassen:
        .radio-wrapper:                     Standard Radio Selection
            .radio-box:                         Radio Selection als auswählbare Rechtecke
    +---------------------------------------------------------------------------------------------------+
    +--- UPLOAD ---+
    Typ:                                    Upload
    Zeile:
    Klassen:
        .upload:                            Standard Upload Element
            .upload-half-button:                Upload Element mit Upload Button auf Hälfte des Elements
            .upload-full-button:                Upload Element mit Upload Button auf ganzer Breite des Elementes
            .arrow-show:                        Anzeigen des "Pfeil Oben"-Icons
*/
form {
  /* +--- VALIDIERUNG | Feld-Validierung, Validation-Summary, Upload Validierung ---+ */
}
form .control-label {
  /*font-family: $font-primary;*/
  color: clr-third;
}
form .form-control {
  height: 45px;
  border-radius: 5px;
  padding: 0.6em 0.75em 0.275em 0.75em;
  border: 2px solid #14285A;
  background-color: white;
}
form .form-control::placeholder {
  color: #777;
}
form .form-control.events-none {
  pointer-events: none;
  user-select: none;
  background-color: #b6b6b6;
  border-color: transparent;
}
form .form-control:has(.k-input-inner) {
  display: flex;
  padding: 0;
  box-shadow: none;
}
form .form-control:has(.k-input-inner) .k-input-inner {
  height: 100%;
  border: none;
}
form .form-control:has(.k-input-inner) .k-input-inner::placeholder {
  color: #777;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect .k-input-button {
  background-repeat: no-repeat;
  background-color: #14285A;
  width: 2.5rem;
  background-size: 50%;
  background-position: center;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-dropdownlist .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-dropdownlist.k-datepicker .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-datepicker.k-dropdownlist .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-datepicker.k-datepicker .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-numerictextbox.k-dropdownlist .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-numerictextbox.k-datepicker .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-multiselect.k-dropdownlist .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-multiselect.k-datepicker .k-input-button .k-svg-icon, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect .k-input-button .k-svg-icon {
  display: none;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-dropdownlist.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-dropdownlist.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-datepicker.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-datepicker.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-dropdownlist.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-dropdownlist.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-datepicker.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-datepicker.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-dropdownlist.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-dropdownlist.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-datepicker.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-datepicker.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-dropdownlist.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-dropdownlist.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-datepicker.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-datepicker.k-multiselect .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect.k-dropdownlist .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect.k-multiselect .k-input-button {
  background-image: url("../assets/icons/chevron.svg");
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-dropdownlist.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-datepicker.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-dropdownlist.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-datepicker.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-dropdownlist.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-datepicker.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-dropdownlist.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-datepicker.k-datepicker .k-input-button, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect.k-datepicker .k-input-button {
  background-image: url("../assets/icons/calender.svg");
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-dropdownlist.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-dropdownlist.k-dropdownlist.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-dropdownlist.k-datepicker.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-dropdownlist.k-datepicker.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-datepicker.k-dropdownlist.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-datepicker.k-dropdownlist.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-datepicker.k-datepicker.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-datepicker.k-datepicker.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-numerictextbox.k-dropdownlist.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-numerictextbox.k-dropdownlist.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-numerictextbox.k-datepicker.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-numerictextbox.k-datepicker.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-multiselect.k-dropdownlist.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-multiselect.k-dropdownlist.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-multiselect.k-datepicker.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-multiselect.k-datepicker.k-datepicker .k-input-button:focus-visible, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect.k-datepicker .k-input-button:hover, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect.k-datepicker .k-input-button:focus-visible {
  background-color: #1B8A8F;
  background-image: url("../assets/icons/calender-focus.svg");
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-numerictextbox .k-input-spinner, form .form-control:has(.k-input-inner).k-datepicker.k-numerictextbox .k-input-spinner, form .form-control:has(.k-input-inner).k-numerictextbox.k-numerictextbox .k-input-spinner, form .form-control:has(.k-input-inner).k-multiselect.k-numerictextbox .k-input-spinner {
  width: 2.5rem;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-numerictextbox .k-input-spinner .k-button, form .form-control:has(.k-input-inner).k-datepicker.k-numerictextbox .k-input-spinner .k-button, form .form-control:has(.k-input-inner).k-numerictextbox.k-numerictextbox .k-input-spinner .k-button, form .form-control:has(.k-input-inner).k-multiselect.k-numerictextbox .k-input-spinner .k-button {
  background-color: #14285A;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-numerictextbox .k-input-spinner .k-button svg, form .form-control:has(.k-input-inner).k-datepicker.k-numerictextbox .k-input-spinner .k-button svg, form .form-control:has(.k-input-inner).k-numerictextbox.k-numerictextbox .k-input-spinner .k-button svg, form .form-control:has(.k-input-inner).k-multiselect.k-numerictextbox .k-input-spinner .k-button svg {
  fill: black;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-numerictextbox .k-input-spinner .k-button:hover, form .form-control:has(.k-input-inner).k-datepicker.k-numerictextbox .k-input-spinner .k-button:hover, form .form-control:has(.k-input-inner).k-numerictextbox.k-numerictextbox .k-input-spinner .k-button:hover, form .form-control:has(.k-input-inner).k-multiselect.k-numerictextbox .k-input-spinner .k-button:hover {
  background-color: #1B8A8F;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-numerictextbox .k-input-spinner .k-button:hover svg, form .form-control:has(.k-input-inner).k-datepicker.k-numerictextbox .k-input-spinner .k-button:hover svg, form .form-control:has(.k-input-inner).k-numerictextbox.k-numerictextbox .k-input-spinner .k-button:hover svg, form .form-control:has(.k-input-inner).k-multiselect.k-numerictextbox .k-input-spinner .k-button:hover svg {
  fill: black;
}
form .form-control:has(.k-input-inner).k-dropdownlist.k-multiselect .k-chip, form .form-control:has(.k-input-inner).k-datepicker.k-multiselect .k-chip, form .form-control:has(.k-input-inner).k-numerictextbox.k-multiselect .k-chip, form .form-control:has(.k-input-inner).k-multiselect.k-multiselect .k-chip {
  background-color: #4FC6CE;
  color: white;
}
form .form-control:is(textarea) {
  min-height: 250px;
}
form .form-control.input-validation-error, form .form-control:has(.input-validation-error) {
  border-color: #CA0733;
}
form .form-control.input-validation-error.input-validation-error, form .form-control.input-validation-error:has(.input-validation-error),
form .form-control.input-validation-error .k-input-inner, form .form-control:has(.input-validation-error).input-validation-error, form .form-control:has(.input-validation-error):has(.input-validation-error),
form .form-control:has(.input-validation-error) .k-input-inner {
  background-color: #FFE3E3;
}
form .form-control.valid, form .form-control:has(.valid) {
  border-color: lime;
}
form .form-control.valid.valid, form .form-control.valid:has(.valid),
form .form-control.valid .k-input-inner, form .form-control:has(.valid).valid, form .form-control:has(.valid):has(.valid),
form .form-control:has(.valid) .k-input-inner {
  background-color: #E1FDE1;
}
form .form-control:hover, form .form-control:focus, form .form-control.k-hover, form .form-control.k-focus {
  border-color: #1B8A8F;
  outline: none;
}
form .form-control:hover:focus, form .form-control:hover.k-focus, form .form-control:focus:focus, form .form-control:focus.k-focus, form .form-control.k-hover:focus, form .form-control.k-hover.k-focus, form .form-control.k-focus:focus, form .form-control.k-focus.k-focus {
  outline: 2px solid #1B8A8F;
  box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1), inset 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.using-mouse form .form-control:hover:focus:focus, .using-mouse form .form-control:hover:focus.k-focus, .using-mouse form .form-control:hover.k-focus:focus, .using-mouse form .form-control:hover.k-focus.k-focus, .using-mouse form .form-control:focus:focus:focus, .using-mouse form .form-control:focus:focus.k-focus, .using-mouse form .form-control:focus.k-focus:focus, .using-mouse form .form-control:focus.k-focus.k-focus, .using-mouse form .form-control.k-hover:focus:focus, .using-mouse form .form-control.k-hover:focus.k-focus, .using-mouse form .form-control.k-hover.k-focus:focus, .using-mouse form .form-control.k-hover.k-focus.k-focus, .using-mouse form .form-control.k-focus:focus:focus, .using-mouse form .form-control.k-focus:focus.k-focus, .using-mouse form .form-control.k-focus.k-focus:focus, .using-mouse form .form-control.k-focus.k-focus.k-focus {
  border-color: #1B8A8F;
  outline: none;
}
form .form-control:hover.k-hover.k-dropdownlist .k-input-button, form .form-control:hover.k-hover.k-multiselect .k-input-button, form .form-control:hover.k-focus.k-dropdownlist .k-input-button, form .form-control:hover.k-focus.k-multiselect .k-input-button, form .form-control:focus.k-hover.k-dropdownlist .k-input-button, form .form-control:focus.k-hover.k-multiselect .k-input-button, form .form-control:focus.k-focus.k-dropdownlist .k-input-button, form .form-control:focus.k-focus.k-multiselect .k-input-button, form .form-control.k-hover.k-hover.k-dropdownlist .k-input-button, form .form-control.k-hover.k-hover.k-multiselect .k-input-button, form .form-control.k-hover.k-focus.k-dropdownlist .k-input-button, form .form-control.k-hover.k-focus.k-multiselect .k-input-button, form .form-control.k-focus.k-hover.k-dropdownlist .k-input-button, form .form-control.k-focus.k-hover.k-multiselect .k-input-button, form .form-control.k-focus.k-focus.k-dropdownlist .k-input-button, form .form-control.k-focus.k-focus.k-multiselect .k-input-button {
  background-color: #1B8A8F;
  background-image: url("assets/icons/chevron-focus.svg");
}
form .form-check {
  display: flex;
}
form .form-check .form-check-label {
  margin-top: 4px;
}
form .form-check .form-check-label:hover {
  cursor: pointer;
}
form .form-check .form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 10px;
  background-color: white;
  border: 2px solid #14285A;
  border-radius: 5px;
  vertical-align: middle;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 70%;
  background-position-x: 50%;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0), inset -1px -1px 4px rgba(0, 0, 0, 0.5);
}
form .form-check .form-check-input:focus-visible {
  outline: 2px solid #1B8A8F;
}
form .form-check .form-check-input:checked {
  transition: all 0.3s ease-in-out;
  background-image: url(/Content/assets/icons/check.svg);
  background-size: 80%;
  border: 2px solid #14285A;
  background-repeat: no-repeat;
  background-position-y: 55%;
  background-position-x: 50%;
  background-color: #14285A;
  box-shadow: inset -1px -1px 4px rgba(0, 0, 0, 0), inset 1px 1px 4px rgba(0, 0, 0, 0.3);
}
form .form-check .form-check-input.input-validation-error {
  border-color: #CA0733;
  background-color: #FFE3E3;
}
form .form-check.form-switch .form-check-input {
  width: 3rem;
  margin-left: -2.5rem;
  margin-right: 0.75rem;
  border-radius: 20px;
  background-size: auto;
  background-repeat: no-repeat;
  background-position-y: unset;
  background-position-x: unset;
  height: 25px;
  background-image: url("/Content/assets/icons/switch-circle.svg");
}
form .form-check.form-switch .form-check-input:focus {
  box-shadow: none;
  background-image: url("/Content/assets/icons/switch-circle-focus.svg");
}
form .form-check.form-switch .form-check-input:checked {
  background-color: #14285A;
  background-position-x: 100%;
  background-image: url("/Content/assets/icons/switch-circle-checked.svg");
}
form .upload-wrapper .k-upload {
  border-radius: 5px;
  border: 2px solid #14285A;
}
form .upload-wrapper .k-upload .k-upload-dropzone {
  flex-direction: row-reverse;
}
form .upload-wrapper .k-upload .k-upload-dropzone .k-dropzone-hint {
  text-align: start;
}
form .upload-wrapper .k-upload .k-upload-button {
  background-color: #14285A;
  box-shadow: none;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}
form .upload-wrapper .k-upload .k-upload-button .k-button-text {
  align-items: center;
  font-weight: bold;
}
form .upload-wrapper .k-upload .k-upload-button:hover, form .upload-wrapper .k-upload .k-upload-button:focus-visible {
  background-color: #1B8A8F;
}
form .upload-wrapper .k-upload .k-upload-button:hover:focus-visible, form .upload-wrapper .k-upload .k-upload-button:focus-visible:focus-visible {
  outline: 2px solid #1B8A8F;
}
form .upload-wrapper .k-upload .k-upload-status:has(span.k-svg-i-exclamation-circle) {
  color: #CA0733;
}
form .upload-wrapper .k-upload .k-upload-status:has(span.k-svg-i-check) {
  color: var(--kendo-color-success-on-surface);
}
form .upload-wrapper .k-upload .k-upload-actions {
  border-radius: 5px;
  width: 2rem;
  aspect-ratio: 1/1;
}
form .upload-wrapper .k-upload .k-upload-actions .k-upload-action {
  width: 100%;
  height: 100%;
  background-color: #14285A !important;
}
form .upload-wrapper .k-upload .k-upload-actions .k-upload-action:hover {
  cursor: pointer;
  background-color: #1B8A8F !important;
}
form .upload-wrapper .k-upload.input-validation-error {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-color: #CA0733;
}
@media (max-width: 575px) {
  form .upload-wrapper .k-upload .k-dropzone-hint {
    display: none;
  }
  form .upload-wrapper .k-upload .k-upload-dropzone {
    flex-direction: column;
  }
  form .upload-wrapper .k-upload .k-upload-dropzone .k-upload-button-wrap {
    width: 100%;
  }
  form .upload-wrapper .k-upload .k-upload-dropzone .k-upload-button-wrap .k-upload-button {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  form .upload-wrapper .k-upload .k-upload-dropzone .k-upload-status {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
form .upload-wrapper.upload-half-button .k-upload-button-wrap {
  width: 50%;
}
form .upload-wrapper.upload-half-button .k-upload-button-wrap .k-upload-button {
  width: 100%;
}
form .upload-wrapper.upload-full-button {
  border-color: #4FC6CE;
}
form .upload-wrapper.upload-full-button .k-upload .k-upload-dropzone {
  flex-direction: column;
  padding: 0px;
}
form .upload-wrapper.upload-full-button .k-upload .k-upload-dropzone .k-upload-button-wrap {
  width: 100%;
  height: 8rem;
}
form .upload-wrapper.upload-full-button .k-upload .k-upload-dropzone .k-upload-button-wrap .k-upload-button {
  border: none;
}
form .upload-wrapper.upload-full-button .k-upload .k-upload-dropzone .k-upload-button-wrap .k-button-text {
  flex-direction: column-reverse;
  font-size: 1.2rem;
}
form .upload-wrapper.upload-full-button .k-upload .k-upload-dropzone .k-upload-status {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
form .upload-wrapper.upload-full-button .k-upload .k-upload-dropzone .k-dropzone-hint {
  display: none;
}
form .upload-wrapper.arrow-show .k-upload-button-wrap .k-button-text {
  display: flex;
  flex-direction: row;
}
form .upload-wrapper.arrow-show .k-upload-button-wrap .k-button-text::after {
  content: url(assets/icons/arrow.svg);
  display: flex;
  height: 20px;
  width: 20px;
  margin-left: 0.5rem;
  justify-content: center;
}
form .upload-wrapper.arrow-show .k-upload-button-wrap:hover .k-button-text::after, form .upload-wrapper.arrow-show .k-upload-button-wrap:focus-visible .k-button-text::after {
  content: url(assets/icons/arrow-focus.svg);
}
form .upload-wrapper.arrow-show.upload-full-button .k-button-text::after {
  height: 50px;
  width: 50px;
  margin-left: 0rem;
  margin-bottom: 0.5rem;
}
form .radio-wrapper .radio-item {
  display: flex;
  align-items: center;
  border-radius: 5px;
}
form .radio-wrapper .radio-item .radio-input {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
form .radio-wrapper .radio-item .radio-input:checked ~ .radio-style {
  background-color: black;
  border: 5px solid #14285A;
}
form .radio-wrapper .radio-item .radio-style {
  background-color: white;
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  border: 2px solid #14285A;
}
form .radio-wrapper .radio-item .radio-text {
  font-size: 1.2rem;
}
form .radio-wrapper .radio-item:hover {
  cursor: pointer;
}
form .radio-wrapper .radio-item:focus-visible {
  outline: none;
}
form .radio-wrapper .radio-item:focus-visible .radio-style {
  border-color: #1B8A8F;
  outline: 3px solid #1B8A8F;
}
form .radio-wrapper:has(.field-validation-error) .radio-style {
  background-color: #FFE3E3;
  border-color: #CA0733;
}
form .radio-wrapper.radio-box .radio-item .radio-input:checked ~ .radio-text {
  background-color: #14285A;
  border-color: #14285A;
  box-shadow: inset -1px -1px 4px rgba(0, 0, 0, 0), inset 1px 3px 4px rgba(0, 0, 0, 0.5);
  color: black;
}
form .radio-wrapper.radio-box .radio-item .radio-style {
  display: none;
}
form .radio-wrapper.radio-box .radio-item .radio-text {
  height: 45px;
  margin: 0;
  border: 2px solid #14285A;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  background-color: white;
  color: #777;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0), inset -1px -1px 4px rgba(0, 0, 0, 0.5);
  padding-inline: 0.6em;
  text-align: center;
  align-content: center;
  font-size: 1rem;
}
form .radio-wrapper.radio-box .radio-item:hover {
  cursor: pointer;
}
form .radio-wrapper.radio-box .radio-item:hover .radio-text, form .radio-wrapper.radio-box .radio-item:focus-visible .radio-text {
  background-color: #1B8A8F;
  border-color: #14285A;
  color: black;
}
form .radio-wrapper.radio-box .radio-item:focus-visible {
  outline: 2px solid #1B8A8F;
}
form .radio-wrapper.radio-box .radio-item:has(.input-validation-error) .radio-text {
  background-color: #FFE3E3;
  border-color: #CA0733;
}
form .field-validation-error,
form .validation-summary-errors {
  color: white;
  font-size: 80%;
  background-color: #CA0733;
  /* +--- Feld-Validierung ---+ */
  /* +--- Validation-Summary ---+ */
}
form .field-validation-error.field-validation-error,
form .validation-summary-errors.field-validation-error {
  display: block;
  width: fit-content;
  padding-bottom: 0.2rem;
  padding-inline: 0.5rem;
  margin-bottom: 5px;
  padding-top: 2px;
  /* +--- Upload Validierung ---+ */
}
form .field-validation-error.field-validation-error#upload-validierung,
form .validation-summary-errors.field-validation-error#upload-validierung {
  width: 100%;
  text-align: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.2rem;
}
form .field-validation-error.validation-summary-errors,
form .validation-summary-errors.validation-summary-errors {
  padding-bottom: 0.5rem;
  width: fit-content;
  padding-top: 0.5rem;
  padding-inline: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
form .field-validation-error.validation-summary-errors::before,
form .validation-summary-errors.validation-summary-errors::before {
  content: "Folgende Fehler sind aufgetreten:";
}
form .field-validation-error.validation-summary-errors > ul,
form .validation-summary-errors.validation-summary-errors > ul {
  margin-bottom: 0;
}

.k-animation-container .k-dropdownlist-popup,
.k-animation-container .k-multiselect-popup {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.k-animation-container .k-dropdownlist-popup .k-list-item,
.k-animation-container .k-multiselect-popup .k-list-item {
  background-color: white;
}
.k-animation-container .k-dropdownlist-popup .k-list-item:nth-of-type(odd),
.k-animation-container .k-multiselect-popup .k-list-item:nth-of-type(odd) {
  background-color: #F2F2F2;
}
.k-animation-container .k-dropdownlist-popup .k-list-item:hover, .k-animation-container .k-dropdownlist-popup .k-list-item:focus,
.k-animation-container .k-multiselect-popup .k-list-item:hover,
.k-animation-container .k-multiselect-popup .k-list-item:focus {
  background-color: rgba(20, 40, 90, 0.3);
}
.k-animation-container .k-dropdownlist-popup .k-list-item.k-selected,
.k-animation-container .k-multiselect-popup .k-list-item.k-selected {
  background-color: #14285A;
  color: black;
}
.k-animation-container .k-dropdownlist-popup.k-dropdownlist-popup .k-list-optionlabel.k-selected,
.k-animation-container .k-multiselect-popup.k-dropdownlist-popup .k-list-optionlabel.k-selected {
  background-color: rgba(20, 40, 90, 0.1);
  color: black;
}
.k-animation-container .k-dropdownlist-popup.k-dropdownlist-popup .k-list-optionlabel:hover, .k-animation-container .k-dropdownlist-popup.k-dropdownlist-popup .k-list-optionlabel:focus-visible,
.k-animation-container .k-multiselect-popup.k-dropdownlist-popup .k-list-optionlabel:hover,
.k-animation-container .k-multiselect-popup.k-dropdownlist-popup .k-list-optionlabel:focus-visible {
  background-color: rgba(20, 40, 90, 0.3);
}
.k-animation-container .k-dropdownlist-popup.k-dropdownlist-popup .k-searchbox,
.k-animation-container .k-multiselect-popup.k-dropdownlist-popup .k-searchbox {
  box-shadow: none;
  border: 2px solid #14285A;
}

/* +--- Import der Variablen SCSS Datei ---+ */
/* +--- Variablen ---+ */
/* +--- Navigation + Footer ---+ */
/* +--- (in alter Schreibweise, sodass sie geändert werden können) ---+ */
:root {
  --nav-height: 80px;
  --footer-height: 160px;
}

/* +--- Schriftarten ---+ */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/Space Grotesk/space-grotesk.woff2") format("woff2"), url("../fonts/Space Grotesk/space-grotesk.woff") format("woff");
}
/* +--- Farben ---+ */
/* +--- Form ---+ */
/* +--- Media Breakpoints (Bootstrap) ---+ */
/* +--- Media Queries ---+ */
/* +--- Desktop | Gross (max. 1399px) ---+ */
/* +--- Desktop | Normal (max. 1199px) ---+ */
/* +--- Tablet (max. 991px) ---+ */
@media (max-width: 991px) {
  :root {
    --nav-height: 80px;
    --footer-height: 280px;
  }
}
/* +--- Wide Smartphone (max. 767px) ---+ */
/* +--- Smartphone (max. 575px) ---+ */
/* +--- Base Styling ---+ */
html {
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html body {
  background-color: #F6F6FA;
  color: #14285A;
  /*font-family: $font-space-grotesk;*/
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5555555556;
  position: relative;
  padding-top: var(--nav-height);
  padding-bottom: var(--footer-height);
  min-height: 100%;
  /* +--- Verlinkungen ---+ */
}
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: Space Grotesk, Arial, Helvetica, sans-serif;
  color: #14285A;
  line-height: 1;
  letter-spacing: 0;
  font-weight: bold;
}
html body header {
  border-bottom: 2px solid #14285A;
}
html body .clr-petrol-teal {
  color: #1B8A8F;
}
html body .link-style {
  display: inline-block;
  color: #14285A;
  transition: all 0.3s ease-in-out;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  position: relative;
  /*border-bottom: 1px solid $clr-deep-tech-blue;*/
  /* +--- hover ---+ */
}
html body .link-style:hover, html body .link-style:focus, html body .link-style:active {
  cursor: pointer;
  transform: translateY(-2px);
}
html body .link-style:hover::before, html body .link-style:focus::before, html body .link-style:active::before {
  background: #1B8A8F;
}
html body .link-style::before {
  position: absolute;
  content: "";
  z-index: -1;
  width: 100%;
  height: 2px;
  background: #14285A;
  bottom: 0;
  left: 0;
  position: absolute;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
html body .btn-primary,
html body .btn-secondary {
  position: relative;
  border-radius: 5px;
  font-weight: 600;
  padding-inline: 40px;
  border: none;
  transition: all 0.3s ease-in-out;
  border-radius: 50px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  letter-spacing: 0.5px;
}
html body .btn-primary.btn-primary,
html body .btn-secondary.btn-primary {
  background-color: #14285A;
  color: #F6F6FA;
  font-size: inherit;
  background: linear-gradient(135deg, #14285A 0%, #14285A 100%);
  box-shadow: 0 8px 20px rgba(20, 40, 90, 0.3);
  overflow: hidden;
}
html body .btn-primary.btn-primary:hover, html body .btn-primary.btn-primary:focus-visible, html body .btn-primary.btn-primary:focus, html body .btn-primary.btn-primary:active,
html body .btn-secondary.btn-primary:hover,
html body .btn-secondary.btn-primary:focus-visible,
html body .btn-secondary.btn-primary:focus,
html body .btn-secondary.btn-primary:active {
  background-color: #1B8A8F;
  border-color: #1B8A8F;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(20, 40, 90, 0.5);
}
html body .btn-primary.btn-primary:hover::before, html body .btn-primary.btn-primary:focus-visible::before, html body .btn-primary.btn-primary:focus::before, html body .btn-primary.btn-primary:active::before,
html body .btn-secondary.btn-primary:hover::before,
html body .btn-secondary.btn-primary:focus-visible::before,
html body .btn-secondary.btn-primary:focus::before,
html body .btn-secondary.btn-primary:active::before {
  left: 100%;
}
html body .btn-primary.btn-secondary,
html body .btn-secondary.btn-secondary {
  background-color: #14285A;
  color: #F6F6FA;
}
html body .btn-primary.btn-secondary:hover, html body .btn-primary.btn-secondary:focus-visible, html body .btn-primary.btn-secondary:focus, html body .btn-primary.btn-secondary:active,
html body .btn-secondary.btn-secondary:hover,
html body .btn-secondary.btn-secondary:focus-visible,
html body .btn-secondary.btn-secondary:focus,
html body .btn-secondary.btn-secondary:active {
  background-color: #14285A;
  color: white;
  border-color: #14285A;
}
html body .btn-primary::before,
html body .btn-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s;
}
html body .tooltip-wrapper {
  display: flex;
  align-items: center;
}
html body .tooltip-wrapper .info-icon {
  width: 15px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: baseline;
  margin-left: 5px;
}
html body .tooltip-wrapper .info-icon .icon-bg {
  fill: white;
}
html body .tooltip-wrapper .info-icon .icon-border {
  fill: #14285A;
}
html body .tooltip-wrapper .info-icon .icon-inner {
  fill: #4FC6CE;
}
html body .tooltip-wrapper .info-icon:hover {
  cursor: help;
}
html body .tooltip-wrapper .info-icon:hover .icon-bg {
  fill: #14285A;
}
html body .scroll-element {
  scroll-margin-top: calc(var(--nav-height) + 20px);
}
html body .clr-placeholder {
  color: #777;
}
html body .table {
  border-color: #14285A;
  font-weight: normal;
}
html body .table tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(27, 138, 143, 0.35);
}
html body .table > * th {
  background-color: #14285A;
  color: white;
  text-align: center;
}
@media (max-width: 575px) {
  html body .table {
    font-size: 0.8rem;
  }
}
html body hr {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #14285A, rgba(0, 0, 0, 0));
  height: 1px;
  border: 0;
  opacity: 1;
}
html body .modal .modal-content {
  border: 2px solid white;
}
html body .modal .modal-content .modal-header {
  border-bottom: 0px;
}
html body .modal .modal-content .modal-header .btn-close {
  --bs-btn-close-bg: url("/Content/assets/icons/close.svg");
}
html body .modal .modal-content .modal-header .btn-close:hover, html body .modal .modal-content .modal-header .btn-close:focus, html body .modal .modal-content .modal-header .btn-close:focus-visible {
  --bs-btn-close-bg: url("/Content/assets/icons/close-focus.svg");
  box-shadow: none;
  background-color: white;
  outline: none;
  opacity: 1;
}
html body .modal .modal-content .modal-body {
  color: white;
}
html body .modal .modal-content .modal-footer {
  border-top: 0px;
}

/* +--- Hilfe Seite | FAQ ---+ */
#hilfe .faq-panel {
  border-radius: 5px;
  background-color: #1B8A8F;
}
#hilfe .faq-panel .faq-panel-clickable {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  background-color: #14285A;
  border-radius: 5px;
  padding-left: 20px;
  font-size: 1.4rem;
}
#hilfe .faq-panel .faq-panel-clickable .faq-panel-heading {
  width: 100%;
  color: black;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  align-content: center;
}
#hilfe .faq-panel .faq-panel-clickable .faq-panel-heading + .faq-panel-icon {
  width: 24px;
  aspect-ratio: 1/1;
  display: block;
  margin-right: 20px;
}
#hilfe .faq-panel .faq-panel-clickable .faq-panel-heading + .faq-panel-icon .panel-icon-line {
  width: inherit;
  display: block;
  background-image: url("../Content/assets/icons/line.svg");
  background-size: 100% 100%;
  top: 0;
  left: 50%;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  aspect-ratio: 1/1;
}
#hilfe .faq-panel .faq-panel-clickable .faq-panel-heading + .faq-panel-icon .panel-icon-line.rotated {
  transform: translateX(-50%) rotate(-90deg);
  transition: all 0.3s ease-in-out;
}
#hilfe .faq-panel .faq-panel-clickable + .faq-panel-body {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 1px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: white;
  color: #4FC6CE;
}
#hilfe .faq-panel .faq-panel-clickable + .faq-panel-body .link-style {
  color: #4FC6CE;
}
#hilfe .faq-panel .faq-panel-clickable:hover {
  cursor: pointer;
}
#hilfe .faq-panel .faq-panel-clickable:focus-visible {
  outline: 2px solid #1B8A8F;
}
@media (max-width: 991px) {
  #hilfe .faq-panel .faq-panel-clickable {
    font-size: 1.2rem;
  }
}
@media (max-width: 767px) {
  #hilfe .faq-panel .faq-panel-clickable {
    font-size: 1.1rem;
  }
}
@media (max-width: 767px) {
  #hilfe .faq-panel .faq-panel-clickable {
    font-size: 1rem;
  }
}
#hilfe .hr-faq {
  padding-top: 20px;
  padding-bottom: 20px;
}
#hilfe .hr-faq > hr {
  margin: 0;
}

#how-to .step {
  position: relative;
}
#how-to .step .step-img-wrapper {
  width: 60%;
  aspect-ratio: 1/1;
  background-color: #1B8A8F;
  border-radius: 100%;
  align-content: center;
  margin-inline: auto;
  box-shadow: inset -1px -1px 4px rgba(0, 0, 0, 0), inset 1px 3px 4px rgba(0, 0, 0, 0.5);
  border: 2px solid #14285A;
}
#how-to .step .step-img-wrapper .step-img {
  width: 50%;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  #how-to .step .step-img-wrapper {
    width: 40%;
  }
}
#how-to .step .step-no {
  position: absolute;
  width: 16%;
  aspect-ratio: 1/1;
  background-color: #14285A;
  border: 2px solid #14285A;
  border-radius: 100%;
  align-content: center;
  right: 25%;
  top: 5%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  color: black;
  font-size: 1.6rem;
}
@media (max-width: 767px) {
  #how-to .step .step-no {
    width: 10%;
    right: 32%;
    top: 8%;
  }
}

#counter-wrapper #counter {
  display: flex;
  justify-content: center;
}
#counter-wrapper #counter .counter-number-bg {
  background-color: white;
  width: 6%;
  aspect-ratio: 1/1;
  color: #4FC6CE;
  text-align: center;
  align-content: center;
  container-type: size;
  border-radius: 100%;
  margin-inline: 1%;
  box-shadow: inset -1px -1px 4px rgba(0, 0, 0, 0), inset 1px 3px 4px rgba(0, 0, 0, 0.5);
}
#counter-wrapper #counter .counter-number-bg .counter-number {
  font-size: 50cqw;
  padding-top: 2px;
  font-weight: bold;
}
@media (max-width: 991px) {
  #counter-wrapper #counter .counter-number-bg {
    width: 10%;
  }
}
@media (max-width: 767px) {
  #counter-wrapper #counter .counter-number-bg {
    width: 12.5%;
  }
}

/* +--- Upload Modal ---+ */
#upload-modal h2 {
  color: #14285A;
}
#upload-modal .kb-img-big {
  position: relative;
}
#upload-modal .kb-img-big .kb-icon {
  position: absolute;
  width: 18%;
}
#upload-modal .kb-img-big .kb-icon path {
  fill: #14285A;
}
#upload-modal .kb-img-big .kb-icon .kb-icon-wrapper {
  position: relative;
  container-type: size;
  width: 100%;
  aspect-ratio: 1/1;
}
#upload-modal .kb-img-big .kb-icon .kb-icon-wrapper .zahl {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -60%);
  top: 50%;
  font-size: 40.5cqw;
  color: white;
  font-weight: bold;
}
#upload-modal .kb-img-big .kb-icon.kb-icon-left {
  left: 0%;
  transform: rotate(-90deg);
}
#upload-modal .kb-img-big .kb-icon.kb-icon-left .zahl {
  transform: translate(-50%, -67%) rotate(90deg);
}
#upload-modal .kb-img-big #kb-icon-1 {
  top: -1.5%;
  /*aspect-ratio: 1/1;*/
  left: 45.5%;
}
#upload-modal .kb-img-big #kb-icon-2 {
  top: 7%;
}
#upload-modal .kb-img-big #kb-icon-3 {
  top: 23.6%;
}
#upload-modal .kb-img-big #kb-icon-4 {
  top: 63.9%;
}
#upload-modal .kb-img-big .kb-ap-text {
  top: 27.4%;
}
#upload-modal .kb-img-big .kb-ap-text,
#upload-modal .kb-img-big .kb-datum-text {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  left: 18.7%;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.5px;
}
@media (max-width: 1199px) {
  #upload-modal .kb-img-big .kb-ap-text,
  #upload-modal .kb-img-big .kb-datum-text {
    left: 19.2%;
    font-size: 10.5px;
    letter-spacing: 1px;
  }
}
@media (max-width: 991px) {
  #upload-modal .kb-img-big .kb-ap-text,
  #upload-modal .kb-img-big .kb-datum-text {
    font-size: 13.5px;
    left: 19%;
  }
}
@media (max-width: 575px) {
  #upload-modal .kb-img-big .kb-ap-text,
  #upload-modal .kb-img-big .kb-datum-text {
    font-size: 2.56cqw;
    top: 27.5%;
    left: 19.3%;
  }
}
#upload-modal .kb-img-big .kb-datum-text {
  top: 67.8%;
}
#upload-modal .kb-tipp-wrapper {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}
#upload-modal .kb-tipp-wrapper .kb-ap-text,
#upload-modal .kb-tipp-wrapper .kb-datum-text {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  left: 13.6%;
  font-size: 7px;
  font-weight: bold;
  letter-spacing: 0.3px;
}
@media (max-width: 1199px) {
  #upload-modal .kb-tipp-wrapper .kb-ap-text,
  #upload-modal .kb-tipp-wrapper .kb-datum-text {
    left: 13.6%;
  }
}
#upload-modal .kb-tipp-wrapper .kb-ap-text {
  top: 24.7%;
}
#upload-modal .kb-tipp-wrapper .kb-datum-text {
  top: 66.9%;
}
#upload-modal #kb-tipp-1 .kb-ap-text,
#upload-modal #kb-tipp-1 .kb-datum-text {
  letter-spacing: 0.8px;
}
#upload-modal #kb-tipp-2 .kb-ap-text,
#upload-modal #kb-tipp-2 .kb-datum-text {
  letter-spacing: 0.8px;
  filter: blur(0.7px);
}
#upload-modal #kb-tipp-3 .kb-ap-text,
#upload-modal #kb-tipp-3 .kb-datum-text {
  left: 18%;
}
@media (max-width: 1199px) {
  #upload-modal #kb-tipp-3 .kb-ap-text,
  #upload-modal #kb-tipp-3 .kb-datum-text {
    letter-spacing: 0.7px;
  }
}
#upload-modal > * .kaufbeleg-bubble {
  min-width: 45px;
  max-width: 45px;
  position: relative;
  height: fit-content;
  display: flex;
}
#upload-modal > * .kaufbeleg-bubble rect {
  fill: #14285A;
}
#upload-modal > * .kaufbeleg-bubble > .kaufbeleg-bubble-zahl {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  color: white;
  padding-bottom: 2px;
}
#upload-modal > * .kaufbeleg-bubble + span {
  margin-left: 7px;
  margin-top: 2px;
}
#upload-modal > * .kaufbeleg-tipp-img {
  height: 500px;
}

/* +--- Media Queries ---+ */
/* +--- Desktop (max. 1399px) ---+ */
/* +--- Desktop (max. 1199px) ---+ */
/* +--- Tablet (max. 991px) ---+ */
/* +--- Wide Smartphone (max. 767px) ---+ */
/* +--- Smartphone (max. 575px) ---+ */
#header #header-left {
  container-type: size;
}
#header #header-left h1 {
  font-size: 13cqw;
}
#header #header-left .slogan {
  color: #1B8A8F;
  text-transform: uppercase;
  font-family: Space Grotesk, Arial, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 0.4cqw;
  font-size: 3cqw;
}
#header #header-left .header-check {
  display: inline-flex;
  align-items: center;
}
#header #header-left .header-check svg {
  width: 15px;
  margin-right: 8px;
  fill: #1B8A8F;
}