/* ==========================================================================
   Variablen
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #00578E;
  --color-accent: #FFA400;
  --color-light: #FCFDFE;
  --color-lightgrey: #F5F7F9;
  --color-midgrey: #DEE2E6;
  --color-grey: #ADB5BD;
  --color-darkgrey: #6C757D;
  --color-dark: #00111C;
  --color-overlay: rgba(0, 17, 28, 0.8);
  --color-overlay-blue: rgba(0, 87, 142, 0.5);

  /* Fonts */
  --font-family-main: "Mulish", sans-serif;
  --font-family-accent: "Barlow", sans-serif;

  --font-weight-light: 300;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-default: 1rem;
  --font-size-s: 1rem;
  --font-size-xs: 0.8rem;
  --font-size-h1: 3.125rem;
  --font-size-h2: 3.125rem;
  --font-size-h3: 1.5rem;

  --font-size-default-mobile: 0.8rem;
  --font-size-default-tablet: 0.8rem;
  --font-size-h1-mobile: 1.75rem;
  --font-size-h1-tablet: 1.75rem;
  --font-size-h2-mobile: 1.75rem;
  --font-size-h2-tablet: 2.25rem;
  --font-size-h3-mobile: 1.25rem;


  /* Padding */
  --padding-xxs: 0.75rem;
  --padding-xs: 1rem;
  --padding-s: 1.25rem;
  --padding-default: 2rem;
  --padding-l: 2.75rem;
  --padding-xl: 3.75rem;
  --padding-xxl: 7.5rem;
  --padding-xxxl: 10rem;

  --padding-mobile-xxs: 0.5rem;
  --padding-mobile-xs: 0.75rem;
  --padding-mobile-s: 1rem;
  --padding-mobile-default: 1.25rem;
  --padding-mobile-l: 1.5rem;
  --padding-mobile-xl: 2rem;
  --padding-mobile-xxl: 3rem;
  --padding-mobile-xxxl: 4rem;

  --padding-tablet-xxs: 0.5rem;
  --padding-tablet-xs: 0.75rem;
  --padding-tablet-s: 1rem;
  --padding-tablet-default: 1.25rem;
  --padding-tablet-l: 1.5rem;
  --padding-tablet-xl: 3rem;
  --padding-tablet-xxl: 5rem;
  --padding-tablet-xxxl: 4rem;

  /* Gaps */
  --gap-xxxs: 0.5rem;
  --gap-xxs: 0.75rem;
  --gap-xs: 1rem;
  --gap-s: 1.25rem;
  --gap-default: 2rem;
  --gap-l: 2.75rem;
  --gap-xl: 3.75rem;
  --gap-xxl: 7.5rem;

  --gap-mobile-xxxs: 0.5rem;
  --gap-mobile-xxs: 0.75rem;
  --gap-mobile-xs: 0.75rem;
  --gap-mobile-s: 1.25rem;
  --gap-mobile-default: 1.75rem;
  --gap-mobile-l: 1.75rem;
  --gap-mobile-xl: 2.25rem;
  --gap-mobile-xxl: 3.25rem;

  --gap-tablet-xxxs: 0.5rem;
  --gap-tablet-xxs: 0.75rem;
  --gap-tablet-xs: 0.75rem;
  --gap-tablet-s: 1.25rem;
  --gap-tablet-default: 1.75rem;
  --gap-tablet-l: 1.75rem;
  --gap-tablet-xl: 2.25rem;
  --gap-tablet-xxl: 3.25rem;


  /* Border Radius */
  --border-radius-full: 999rem;
  --border-radius-m: 1rem;

  /* Transitions */
  --transition: all 0.3s ease;

  /* Cookie Bdnner Variablen */
  --cc-bg: #FCFDFE;
  --cc-primary-color: #00111C;
  --cc-secondary-color: #6C757D;

  --cc-btn-primary-bg: #00578E;
  --cc-btn-primary-color: #FCFDFE;
  --cc-btn-primary-border-color: #00578E;
  --cc-btn-primary-hover-bg: #FFA400;
  --cc-btn-primary-hover-color: #FCFDFE;
  --cc-btn-primary-hover-border-color: #FFA400;

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #00111C;
  --cc-btn-secondary-border-color: #00111C;
  --cc-btn-secondary-hover-bg: transparent;
  --cc-btn-secondary-hover-color: #FFA400;
  --cc-btn-secondary-hover-border-color: #FFA400;

  --cc-toggle-on-bg: #00578E;
  --cc-toggle-off-bg: #ADB5BD;
  --cc-toggle-on-knob-bg: #FCFDFE;
  --cc-toggle-off-knob-bg: #FCFDFE;
  --cc-toggle-readonly-bg: #DEE2E6;
  --cc-toggle-readonly-knob-bg: #FCFDFE;
  --cc-toggle-readonly-knob-icon-color: #DEE2E6;

  --cc-link-color: #00111C;

  --cc-separator-border-color: transparent;
  --cc-cookie-category-block-bg: #F5F7F9;
  --cc-cookie-category-block-border: transparent;
  --cc-cookie-category-block-hover-bg: #DEE2E6;
  --cc-cookie-category-block-hover-border: transparent;
  --cc-cookie-category-expanded-block-bg: #F5F7F9;
  --cc-cookie-category-expanded-block-hover-bg: #F5F7F9;

  --cc-pm-badge-bg: #DEE2E6;
  --cc-pm-badge-color: #00111C;

  --cc-footer-bg: #F5F7F9;
  --cc-footer-color: #6C757D;
  --cc-footer-border-color: #DEE2E6;

  --cc-overlay-bg: rgba(0, 17, 28, 0.8);

  --cc-font-family: "Mulish", sans-serif;

  --cc-modal-border-radius: 1rem;
  --cc-btn-border-radius: 999rem;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  font-size: 100%;
  font-family: var(--font-family-main);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

hr {
  border: none;
  margin: 0;
  padding: 0;

}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}

form {
  display: flex;
  margin: 0;
}

input {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--color-dark);
  color: var(--color-light);
  font: var(--font-family-main);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-light);
  line-height: 1.5;
  text-align: start;
  cursor: text;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-gray);
  opacity: 1;
}

textarea {
  display: inline-block;
  width: 100%;
  height: 5vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--color-dark);
  color: var(--color-light);
  font: var(--font-family-main);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-light);
  line-height: 1.5;
  text-align: start;
  cursor: text;
}

select {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--color-dark);
  color: var(--color-light);
  font-family: var(--font-family-main);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-light);
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FCFDFE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

select option {
  background-color: var(--color-dark);
  color: var(--color-light);
}

select:focus {
  outline: none;
}


/* ==========================================================================
   Typography & Fonts
   ========================================================================== */

h1,
h2 {
  margin: 0;
  font-family: var(--font-family-accent);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  line-height: 1.2;
  text-wrap: balance;
}

h3,
h4 {
  margin: 0;
  font-family: var(--font-family-accent);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  line-height: 1.5;
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-s);
}

p,
.source,
.text-s,
li {
  margin: 0;
  font-family: var(--font-family-main);
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  lang: de;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphenate-limit-chars: 8 3 4;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 4;
  -ms-hyphenate-limit-chars: 8 3 4;
  text-wrap: pretty;
}

p,
li {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-default);
  line-height: 1.5;
}

.source {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-s);
}

.text-s {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-s);
}

.text-xs {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xs);
}

.text-width {
  width: 60%;
}

.text-light {
  color: var(--color-light)
}

.text-lightgrey {
  color: var(--color-grey)
}

.text-dark {
  color: var(--color-dark)
}

.text-center {
  text-align: center;
}

/*===== MOBILE =====*/
@media (max-width: 810px) {

  h1,
  h2 {
    font-size: var(--font-size-h1-mobile);
    hyphens: auto;
    -webkit-hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }


  h3 {
    font-size: var(--font-size-h3-mobile);
    hyphens: auto;
    -webkit-hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  p,
  .text-s {
    font-size: var(--font-size-default-mobile);
  }

  li,
  a {
    font-size: var(--font-size-default-mobile);
  }

  button,
  .cookies {
    font-size: var(--font-size-default-mobile);
  }

  /*.btn {
    font-size: var(--font-size-default-mobile);
  }*/
}

/* ==========================================================================
   Helper & Utilities
   ========================================================================== */
.main-padding-h {
  padding-left: var(--padding-xxxl);
  padding-right: var(--padding-xxxl);
}

.main-padding-v {
  padding-top: var(--padding-xxl);
  padding-bottom: var(--padding-xxl);
}

.padding-h-xl {
  padding-left: var(--padding-xl);
  padding-right: var(--padding-xl);
}

.padding-v-xl {
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-xl);
}

.padding-h-xxs {
  padding-left: var(--padding-xxs);
  padding-right: var(--padding-xxs);
}

.padding-v-xxs {
  padding-top: var(--padding-xxs);
  padding-bottom: var(--padding-xxs);
}


.padding-h-s {
  padding-left: var(--padding-s);
  padding-right: var(--padding-s);
}

.padding-v-s {
  padding-top: var(--padding-s);
  padding-bottom: var(--padding-s);
}

.padding-top{
  padding-top: var(--padding-s);
}

.flex {
  display: flex;
}

.flex-h {
  display: flex;
  flex-direction: row;
}

.flex-v {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.wrap {
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
}

.align-center {
  align-items: center;
}

.align-self-center {
  align-self: center;
}

.align-end {
  align-items: end;
}

.align-left {
  align-items: flex-start;
}

.jc-even {
  justify-content: space-between;
}

.jc-start {
  justify-content: flex-start;
}

.jc-center {
  justify-content: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.gap-l {
  gap: var(--gap-l);
}

.gap-xl {
  gap: var(--gap-xl)
}

.gap-xxl {
  gap: var(--gap-xxl)
}

.gap-default {
  gap: var(--gap-default);
}

.gap-s {
  gap: var(--gap-s);
}

.gap-xs {
  gap: var(--gap-xs);
}

.gap-xxs {
  gap: var(--gap-xxs);
}

.round-corners {
  border-radius: 1rem;
}

.fill-light {
  background-color: var(--color-light);
}

.fill-dark {
  background-color: var(--color-dark);
}

.fill-lightgrey {
  background-color: var(--color-lightgrey);
}

.hidden-overflow {
  overflow: hidden;
}

.line {
  border-top: 0.1rem solid var(--color-primary);
  width: 100%;
}

path {
  transition: none;
}

.bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bg-img.parallax-bg {
  will-change: transform;
}

.bg-img.parallax-bg img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  object-fit: cover;
  object-position: center;
}

.content-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.bg-cover {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-overlay);
  z-index: 800;
  pointer-events: none;
}

.mobile-bg {
  display: none;
}

.width-half {
  width: 50%;
}

.width-full {
  width: 100%;
}

.width-45 {
  width: 45%;
}

.height-half {
  height: 50%;
}

.height-full {
  height: 100%;
}

.min-height {
  min-height: 25vh;
}

.mobile-menu {
  display: none !important;
}

.mobile-menu-toggle {
  display: none !important;
}

/*===== MOBILE =====*/
@media (max-width: 480px) {
  .main-padding-h {
    padding-left: var(--padding-mobile-xl);
    padding-right: var(--padding-mobile-xl);
  }

  .main-padding-v {
    padding-top: var(--padding-mobile-xxl);
    padding-bottom: var(--padding-mobile-xxl);
  }

  .padding-h-xl {
    padding-left: var(--padding-mobile-xl);
    padding-right: var(--padding-mobile-xl);
  }

  .padding-v-xl {
    padding-top: var(--padding-mobile-xl);
    padding-bottom: var(--padding-mobile-xl);
  }

  .gap-s {
    gap: var(--gap-mobile-s);
  }

  .gap-default {
    gap: var(--gap-mobile-default);
  }

  .gap-l {
    gap: var(--gap-mobile-l);
  }

  .gap-xl {
    gap: var(--gap-mobile-xl);
  }

  .gap-xxl {
    gap: var(--gap-mobile-xxl);
  }

  .width-half {
    width: 100%;
  }

}

/*===== Mobile to Tablet =====*/
@media (min-width: 481px) and (max-width: 810px) {

  .main-padding-h {
    padding-left: var(--padding-tablet-xxl);
    padding-right: var(--padding-tablet-xxl);
  }

  .main-padding-v {
    padding-top: var(--padding-tablet-xl);
    padding-bottom: var(--padding-tablet-xl);
  }

  .width-half {
    width: 100%;
  }

  .gap-s {
    gap: var(--gap-mobile-s);
  }

  .gap-default {
    gap: var(--gap-mobile-default);
  }

  .gap-l {
    gap: var(--gap-mobile-l);
  }

  .gap-xl {
    gap: var(--gap-mobile-xl);
  }

  .gap-xxl {
    gap: var(--gap-mobile-xxl);
  }

}

@media (min-width: 811px) and (max-width: 1200px) {

  .main-padding-h {
    padding-left: var(--padding-tablet-xxl);
    padding-right: var(--padding-tablet-xxl);
  }

  .main-padding-v {
    padding-top: var(--padding-tablet-xl);
    padding-bottom: var(--padding-tablet-xl);
  }

  .gap-l {
    gap: var(--gap-mobile-l);
  }

  .gap-xl {
    gap: var(--gap-mobile-xl);
  }
}

/* ==========================================================================
   Button Styles
   ========================================================================== */
.btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xxs) var(--padding-xs);
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-light);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  text-decoration: none;
  width: auto;
  border: 2px solid transparent;
  gap: var(--gap-xxxs);
  transition: var(--transition);
}

/* Button ausgefüllt weiß */
.btn1 {
  background-color: var(--color-primary);
  color: var(--color-light);
}

.btn1:hover {
  background-color: var(--color-accent);
  color: var(--color-light);
}

/* Button ausgefüllt blau*/
.btn2 {
  background-color: var(--color-light);
  color: var(--color-dark);
}

.btn2:hover {
  background-color: var(--color-accent);
  color: var(--color-light);
}

/* Button Outline*/
.btn3 {
  background-color: none;
  border: 0.1rem solid var(--color-dark);
  color: var(--color-dark);
}

.btn3:hover {
  background-color: none;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Button nur Text*/
.btn4 {
  background-color: none;
  padding: 0;
}

.btn4:hover {
  background-color: none;
  color: var(--color-accent);
}

/* Button Icon*/
.btn-icon {
  width: 1.5em;
  height: 1.5em;
  transition: none;
}

.btn-icon path {
  stroke: var(--color-primary);
  transition: none;
}

.btn:hover path {
  stroke: var(--color-accent);
}

/*===== MOBILE =====*/
@media (max-width: 480px) {
  .btn {
    font-size: var(--font-size-default-mobile);
  }
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.nav-logo {
  display: block;
  height: 2rem;
  aspect-ratio: 2352 / 705;
  width: auto;
}

.navi {
  position: sticky;
  top: 0;
  box-shadow: 0 0.05rem 0.3rem var(--color-overlay);
  transition: box-shadow var(--transition);
  z-index: 1000;
  overflow: visible;
}

.nav-link:hover {
  color: var(--color-accent);
}

.nav-item {
  position: relative;
}

.nav-item.has-megamenu {
  position: static;
}

.megamenu-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  background: var(--color-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 800;
  box-shadow: 0 0.5rem 1rem rgba(0, 17, 28, 0.15);
}

.megamenu-dropdown.megamenu-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-item.has-megamenu .megamenu-dropdown {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin-left: 0;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
}

.nav-item.has-megamenu:hover .megamenu-dropdown,
.nav-item.has-megamenu.megamenu-active .megamenu-dropdown {
  transform: translateY(0);
}

/* Mobile Navigation */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-dark);
  margin: 2px 0;
  transition: var(--transition);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-toggle {
  display: none;
}

/*===== MOBILE =====*/
@media (max-width: 810px) {
  .navi {
    padding: var(--padding-mobile-xs) var(--padding-mobile-xl);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-light);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 6rem;
    transition: right 0.3s ease;
    z-index: 1000;
    gap: var(--gap-mobile-xl);
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-menu li {
    width: 100%;
    text-align: center;
    padding: var(--padding-mobile-s) 0;
    border-bottom: 1px solid var(--color-midgrey);
  }

  .nav-menu .nav-link {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
  }

  .mobile-menu {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: max-content;
    max-height: 100vh;
    background: var(--color-light);
    z-index: 998;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 70px;
  }

  .mobile-menu.mobile-menu-open {
    display: block !important;
  }

  .bg-cover {
    position: fixed !important;
  }

  .mobile-bg {
    display: none;
  }

  .mobile-nav-list {
    list-style: none;

  }

  .mobile-nav-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-nav-link {
    text-decoration: none;
    color: var(--color-dark);
    flex: 1;
    padding-top: var(--padding-mobile-default);
    padding-bottom: var(--padding-mobile-default);
  }

  .mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .mobile-menu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
  }

  .mobile-submenu-toggle {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    width: 30%;
    height: 100%;
    justify-content: flex-end;
  }

  .mobile-submenu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    transition: transform 0.2s ease;
  }

  .mobile-nav-item.submenu-expanded .mobile-submenu-toggle svg {
    transform: rotate(180deg);
  }

  .mobile-submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0 -2rem;
    background: #f9f9f9;
  }

  .mobile-nav-item.submenu-expanded .mobile-submenu {
    display: block;
    left: 0;
    right: 0;
  }

  .mobile-submenu li {
    padding: var(--padding-mobile-s) var(--padding-mobile-xl);

  }

  .mobile-submenu-link {
    text-decoration: none;
    color: var(--color-dark);
  }

  .mobile-menu-content .btn {
    width: 100%;
  }

  .hidden-desktop {
    display: none !important;
  }

  .hidden-mobile {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: block !important;
  }

  .mobile-menu-toggle.hidden-desktop {
    display: block !important;
  }

  .mobile-menu-content {
    min-height: 200px;
    z-index: 999;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  min-height: 70vh;
}

.hero .width-45 {
  width: 45%;
}

/*===== MOBILE =====*/
@media (max-width: 810px) {
  .hero .width-45 {
    width: 100%;
  }

  .hero .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Tiles
   ========================================================================== */
.grid-content {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.grid-content .bg-img {
  position: absolute;
  z-index: 1;
}

.grid-content .bg-img img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.grid-label {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4rem;
  z-index: 2;
  transition: height 0.3s ease-in-out;
}

.grid-label p {
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0.1s;
}

/*===== MOBILE =====*/
@media (max-width: 481px) {
  .grid {
    grid-template-columns: 1fr;

  }
}

@media (min-width: 481px) and (max-width: 810px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.acc-header {
  cursor: pointer;
}

.acc-header h3 {
  width: 80%;
}

.acc-icon {
  width: 1.5em;
  height: 1.5em;
  transition: var(--transition);
  stroke: var(var(--color-dark));
}

.acc-icon .line-v,
.acc-icon .line-h {
  transform-origin: 50% 50%;
  transition: var(--transition)
}

/* Animation bei geöffnetem Accordion */
.acc-item.active .acc-icon .line-v {
  transform: rotate(90deg);
  stroke: var(--color-accent);
}

.acc-item.active .acc-icon .line-h {
  opacity: 0;
}

.acc-wrapper .acc-grid {
  box-sizing: border-box;
}

.acc-panel {
  position: relative;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  transition: max-height 0.3s ease;
}

.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--gap-xxl);
  row-gap: var(--gap-l);
  width: 100%;
}

.acc-wrapper .acc-grid.textlinks {
  grid-template-areas:
    "acc-intro acc-content-box"
    "acc-content acc-content-box";
}

.acc-wrapper .acc-grid.textrechts {
  grid-template-areas:
    "acc-content-box acc-intro"
    "acc-content-box acc-content";
}

.acc-wrapper .acc-grid.qa-grid {
  grid-template-areas:
    "acc-intro acc-content";
}

.acc-intro {
  grid-area: acc-intro;
}

.acc-content {
  grid-area: acc-content;
}

.acc-content-box {
  grid-area: acc-content-box;
}

.padding-top-xs {
  padding-top: var(--padding-xs);
}

.padding-bottom-s {
  padding-bottom: var(--padding-s);
}

.acc-margin-bottom {
  margin-bottom: 0;
}

.acc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xxs);
}

.acc-content-box-fixed {
  height: 75vh;
  grid-area: acc-content-box;
}

.acc-content-box,
.acc-content-box-fixed {
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.acc-content-box .box-content,
.acc-content-box-fixed .box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.acc-content-box-fixed li {
  position: relative;
  padding-left: 1.5em;
}

.acc-content-box-fixed li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/*===== MOBILE =====*/
@media (max-width: 810px) {
  .hidden-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }


  .acc-wrapper .acc-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: var(--gap-mobile-xxl) !important;
    row-gap: var(--gap-mobile-l) !important;
    width: 100% !important;
  }

  .acc-wrapper .acc-grid.textlinks,
  .acc-wrapper .acc-grid.textrechts {
    grid-template-areas:
      "acc-intro"
      "acc-content-box"
      "acc-content" !important;
  }

  .acc-wrapper.acc-txt .acc-grid.textlinks,
  .acc-wrapper.acc-txt .acc-grid.textrechts {
    grid-template-areas:
      "acc-intro"
      "acc-content"
      "acc-content-box" !important;
  }

  .acc-wrapper .acc-grid.qa-grid {
    grid-template-areas:
      "acc-intro"
      "acc-content";
  }

  .acc-intro {
    grid-area: acc-intro;
  }

  .acc-content {
    grid-area: acc-content;
  }

  .acc-content-box {
    grid-area: acc-content-box;
  }

  .acc-content-box-fixed {
    grid-area: acc-content-box;
    height: auto !important;
  }

  .acc-content-box-fixed .box-content {
    position: relative !important;
    height: auto !important;
  }


  .acc-header.flex-h {
    display: flex;
    flex-direction: row !important;
  }


  .acc-content-box {
    width: 100%;
    height: 25vh !important;
    position: relative;
    overflow: hidden;
  }


  .acc-content-box .acc-content {
    position: relative;
    height: auto;
  }

  .acc-content-box .box-content {
    position: relative !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 25vh !important;
  }


  .acc-content-box .content-img {
    width: 100% !important;
    height: 25vh !important;
    object-fit: cover !important;
    display: block !important;
  }

  .mobile-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1 !important;
  }


  .acc-icon {
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
  }
}

/* ==========================================================================
   txt-img
   ========================================================================== */
.txt-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--gap-xxl);
  width: 100%;
}

.txt-img-grid.textlinks {
  grid-template-areas:
    "txt img";
}

.txt-img-grid.textrechts {
  grid-template-areas:
    "img txt";
}

.text-box {
  grid-area: txt;
}

.img-box {
  height: 50vh;
  grid-area: img;
}

/*===== MOBILE =====*/
@media (max-width: 480px) {
  .txt-img-grid {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-auto-columns: auto;
    grid-auto-rows: auto;
    row-gap: var(--gap-mobile-l);
  }

  .txt-img-grid.textlinks,
  .txt-img-grid.textlinks {
    grid-template-areas:
      "img"
      "txt";
  }

  .text-box {
    grid-area: txt;
  }

  .text-box.gap-s {
    gap: var(--gap-mobile-xxs);
  }

  .txt-img-grid .btn {
    width: 100%;
  }

  .img-box {
    height: 25vh;
    grid-area: img;
  }

}

@media (min-width: 481px) and (max-width: 810px) {
  .txt-img-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-columns: auto;
    grid-auto-rows: auto;
    column-gap: var(--gap-mobile-xxl);
  }

  .text-box.gap-s {
    gap: var(--gap-mobile-xxs);
  }

  .text-box .flex-h {
    flex-direction: column;
  }

  .img-box {
    height: 30vh;
    grid-area: img;
  }

}

/* ==========================================================================
   tripple
   ========================================================================== */
/*panel-option*/
.text-content-center {
  text-align: center;
  align-items: center;
}

/*panel-option*/
.text-content-left {
  align-items: flex-start;
}

.tripple-icon {
  height: 3.75rem;
  width: auto;
}

/*===== MOBILE =====*/
@media (max-width: 810px) {
  .tripple-container {
    flex-direction: column;
  }

  .tripple-item {
    width: 100%;
  }

  .tripple-icon {
    height: 3rem;
  }

  .text-width {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 810px) {
  .tripple-container {
    flex-direction: row;
  }

  .tripple-icon {
    height: 3rem;
  }
}

/* ==========================================================================
   Kontaktformulare
   ========================================================================== */


.honeypot {
  position: absolute;
  left: -9999px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* verhindert Zeilenumbruch */
  border: 0;
}

.form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--gap-default);
  row-gap: var(--gap-xxxs);
  grid-template-areas:
      "anrede name"
      "mail company"
      "message message"
      "upload upload";
}

  .anrede {
    grid-area: anrede;
  }

  .name{
    grid-area: name;
  }

  .mail{
    grid-area: mail;
  }

  .company{
    grid-area: company;
  }
  .message{
    grid-area: message;
  }
  .upload{
    grid-area: upload;
  }

/*===== MOBILE =====*/
@media (max-width: 810px) {
  .contact-form .width-half {
    width: 100%;
  }

  .contact-form .flex-h {
    flex-direction: column;
  }

  .contact-form .gap-default {
    gap: var(--gap-mobile-xxs)
  }

  .contact-form .btn {
    width: 100%;
  }

  .form {
    grid-template-areas:
      "anrede name"
      "mail mail"
      "company company"
      "message message"
      "upload upload";
    row-gap: var(--gap-mobile-xxs);
    column-gap: var(--gap-mobile-xs);
  }

  input,
  textarea,
  select {
    font-size: var(--font-size-default-mobile);
  }
}

/* ==========================================================================
   CTA/ Banner
   ========================================================================== */

/*===== MOBILE =====*/
@media (max-width: 480px) {

  .cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay-blue);
    z-index: 0;
    pointer-events: none;
  }

  .cta .width-half {
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .cta .btn {
    width: 100%;
  }

  .banner .width-half {
    width: 100%;
  }

  .banner h3 {
    width: 80%;
  }
}

@media (min-width: 481px) and (max-width: 810px) {

  .cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay-blue);
    z-index: 0;
    pointer-events: none;
  }

  .cta .width-half {
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .banner .width-half {
    width: 100%;
  }

  .banner h3 {
    width: 80%;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  background-color: var(--color-dark);
  padding: var(--padding-xxl);
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-default);
  gap: var(--gap-s);
}

.footer-logo {
  display: flex;
  align-self: start;
  height: 5rem;
  aspect-ratio: 2352 / 705;
  width: auto;
}


.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--gap-xxl);
  color: var(--color-light);
  padding-bottom: var(--padding-xl);
}

.footer-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--gap-s)
}

.socials {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--gap-s);
}

.social-icons {
  width: auto;
  height: 2rem;
}

.legal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--gap-xxl);
  color: var(--color-light);
  padding-bottom: 0;
}

.impressum {
  justify-self: start;
}

.copyright {
  justify-self: end;
}

.cookies {
  color: var(--color-light);
  font-family: var(--font-family-main);
  font-size: var(--font-size-default);
  justify-self: center;
}

.cookies:hover {
  color: var(--color-accent);
}


/*===== MOBILE =====*/
@media (max-width: 480px) {
  footer {
    padding: var(--padding-mobile-xl);
    gap: var(--gap-mobile-s);
  }

  .footer-content {
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: var(--gap-mobile-xxl);
    color: var(--color-light);
    padding-bottom: var(--padding-mobile-xl);
  }

  .footer-column {
    gap: var(--gap-mobile-s);
    height: max-content;
  }

  .footer-logo {
    height: 3rem;
  }

  .social-icons {
    width: auto;
    height: 1.5rem;
  }

  .legal {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "impressum"
      "cookies"
      "copyright";
    row-gap: var(--gap-mobile-xs);
    color: var(--color-light);
    padding-bottom: 0;
  }

  .impressum {
    justify-self: start;
    grid-area: impressum;
  }

  .copyright {
    justify-self: start;
    grid-area: copyright;
  }

  .cookies {
    justify-self: start;
    grid-area: cookies;
    font-size: var(--font-size-default-mobile);
  }

}

@media (min-width: 481px) and (max-width: 810px) {

  footer {
    padding: var(--padding-tablet-xxl);
    gap: var(--gap-s);
  }

  .footer-content {
    column-gap: var(--gap-mobile-l);
    padding-bottom: var(--padding-mobile-xl);
  }

  .social-icons {
    width: auto;
    height: 1.5rem;
  }

  .legal {
    column-gap: var(--gap-mobile-l);
  }

  .footer-logo {
    height: 2rem;
  }

  .cookies,
  .impressum {
    font-size: var(--font-size-default-mobile);
    align-self: center;
  }

  .footer-column {
    gap: var(--gap-mobile-s);
  }
}

@media (min-width: 811px) and (max-width: 1200px) {
  .footer-logo {
    height: 3rem;
  }
}

/* ==========================================================================
   Cookie Banner
   ========================================================================== */

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: "Barlow", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  color: var(--cc-primary-color) !important;
}

#cc-main .cm__body,
#cc-main .pm__body,
#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-family: var(--cc-font-family) !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  color: var(--cc-primary-color) !important;
}


#cc-main .cm__desc {
  color: var(--cc-primary-color) !important;
  font-size: var(--font-size-default) !important;
  line-height: 1.5 !important;
}

#cc-main .pm__section-desc {
  font-size: var(--font-size-default) !important;
  line-height: 1.5 !important;
}

#cc-main .cm--box {
  width: 40vw !important;
  max-width: 30vw !important;
  padding: var(--padding-l);
}

#cc-main .cm__texts {
  gap: var(--gap-s);
  padding: 0 0 var(--padding-xs) 0 !important;
}

#cc-main .cm__desc,
#cc-main .cm__title {
  padding: 0 !important;
}

#cc-main .cm__title {
  font-size: var(--font-size-default) !important;
}

#cc-main .cm__title+.cm__desc {
  margin-top: 0 !important;
}

#cc-main .cm__btns,
#cc-main .cm__links {
  padding: 0 !important;
}

#cc-main .cm__btn-group {
  gap: var(--gap-xxxs);
}

#cc-main .cm__btn {
  transition: all 0.2s ease !important;
}

#cc-main .cm__footer {
  background: transparent;
  border-top: none;
  fill: transparent;
  flex: 1 !important;
  justify-content: center !important;
  display: flex !important;
  padding: 0.5rem 0 0 0;
}

#cc-main .cm__footer .cc__link {
  color: var(--cc-btn-primary-bg) !important;
}

#cc-main .cm__links {
  flex-direction: row !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
}

#cc-main .cm__link-group {
  flex-direction: row !important;
  width: 100% !important;
  font-size: var(--font-size-default) !important;
  display: flex !important;
}

#cc-main .cm__link-group>*+* {
  margin-left: 1.3rem !important;
}

#cc-main .pm__header {
  padding: 0 0 var(--padding-s) 0 !important;
}

#cc-main .pm__title {
  margin-right: 0 !important;
  font-weight: 700 !important;
}

#cc-main .pm__close-btn {
  border: none !important;
}

#cc-main .pm__close-btn:hover {
  border-color: none !important;
}

#cc-main .pm__body {
  padding: 0 !important;
}

#cc-main .pm__section {
  border: none !important;
  padding: 0 !important;
  transition: none !important;
}

#cc-main .pm__section:hover {
  background-color: transparent !important;
}

#cc-main .pm__section:first-child {
  border: none !important;
  margin-bottom: 2em !important;
  padding: 0 !important;
  transition: none !important;
}

#cc-main .pm__section:not(:first-child):hover {
  background: transparent !important;
}

#cc-main .pm__section--toggle.is-expanded .pm__section-title {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

#cc-main .pm__section--toggle .pm__section-title {
  border: none !important;
  border-radius: var(--cc-modal-border-radius) !important;
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border: none !important;
  border-radius: var(--cc-modal-border-radius) !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  background: var(--cc-cookie-category-block-bg) !important;
}

#cc-main .pm__section-title-wrapper {
  gap: var(--gap-xxxs);
}

#cc-main .pm__badge {
  padding: 0 var(--padding-xs) !important;
  font-size: 0.75rem !important;
  font-weight: 300 !important;
  font-family: var(--cc-font-family) !important;
}

#cc-main .pm__footer {
  flex-direction: column;
  gap: var(--gap-xxs);
  padding: var(--padding-s) 0 0 0 !important;
}

#cc-main .pm__btn+.pm__btn,
#cc-main .pm__btn-group+.pm__btn-group {
  margin-left: 0 !important;
}

#cc-main .pm__btn {
  width: 100% !important;
  height: auto !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  font-family: var(--cc-font-family) !important;
}

#cc-main .pm--box {
  max-width: 35vw !important;
  padding: var(--padding-l);
}

#cc-main .cc__link,
#cc-main a {
  color: var(--cc-link-color) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: none !important;
  background: none !important;
}

#cc-main .cc__link:hover,
#cc-main a:hover {
  opacity: 1 !important;
  color: var(--cc-btn-primary-hover-bg) !important;
  text-decoration: none !important;
  background: none !important;
}

#cc-main .pm__section-desc strong {
  color: var(--cc-primary-color) !important;
  font-weight: 600 !important;
}

#cc-main .pm__section--expandable .pm__section-arrow {
  background: none;
}

#cc-main .cm-wrapper:before {
  background: var(--cc-overlay-bg) !important;
  content: "" !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 0 !important;
  position: fixed !important;
  inset: 0 !important;
  transition: opacity var(--cc-modal-transition-duration) ease, visibility var(--cc-modal-transition-duration) ease !important;
}

.show--consent #cc-main .cm-wrapper:before {
  opacity: 1 !important;
  visibility: visible !important;
}

#cc-main .pm-overlay {
  background: var(--cc-overlay-bg) !important;
  content: "" !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1 !important;
  position: fixed !important;
  inset: 0 !important;
}

.show--preferences #cc-main .cc--anim .pm-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}

#cc-main .cc--anim .cm,
#cc-main .cc--anim.cm-wrapper:before {
  transition: opacity var(--cc-modal-transition-duration) ease, visibility var(--cc-modal-transition-duration) ease, transform var(--cc-modal-transition-duration) ease !important;
}

#cc-main .cc--anim .cm__btn {
  transition: background-color 0.15s, border-color 0.15s, color 0.15s !important;
}

#cc-main .cc--anim .pm,
#cc-main .cc--anim .pm-overlay {
  transition: opacity var(--cc-modal-transition-duration) ease, visibility var(--cc-modal-transition-duration) ease, transform var(--cc-modal-transition-duration) ease !important;
}

.show--consent #cc-main .cc--anim .cm {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

.show--consent #cc-main .cc--anim .cm--middle {
  transform: translateY(-50%) !important;
}

.show--consent #cc-main .cc--anim .cm--bar {
  transform: translateY(0) !important;
}

.show--preferences #cc-main .cc--anim .pm {
  opacity: 1 !important;
  visibility: visible !important;
}

.show--preferences #cc-main .cc--anim .pm--box {
  transform: translateY(-50%) !important;
}

html.disable--interaction.show--consent,
html.disable--interaction.show--consent body {
  height: auto !important;
  overflow: hidden !important;
}


@media screen and (max-width: 640px) {

  #cc-main .cm__desc {
    color: var(--cc-primary-color) !important;
    font-size: var(--font-size-default-mobile) !important;
    line-height: 1.5 !important;
  }

  #cc-main .pm__section-desc {
    font-size: var(--font-size-default-mobile) !important;
    line-height: 1.5 !important;
  }

  #cc-main .cm--box {
    width: 90vw !important;
    max-width: 90vw !important;
    padding: var(--padding-mobile-l);
  }

  #cc-main .pm--box {
    max-width: 90vw !important;
    padding: var(--padding-mobile-l);
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: fixed !important;
    border-radius: var(--cc-modal-border-radius) !important;
    height: 80vh !important;
  }

  #cc-main .cc__link,
  #cc-main a {
    font-size: var(--font-size-default-mobile);
  }

  #cc-main .cm__btns,
  #cc-main .cm__links {
    padding: 0 !important;
  }

  #cc-main .pm__btn {
    font-size: var(--font-size-default-mobile) !important;
  }

  #cc-main .cm__link-group {
    flex-direction: row !important;
    width: 100% !important;
    font-size: var(--font-size-mobile-default) !important;
    display: flex !important;
  }

  #cc-main .cm__btn {
    min-height: 48px !important;
    padding: 14px 20px !important;
  }
}