@font-face {
    font-family: 'Kumbh Sans';
    src: url('KumbhSans-VariableFont_YOPQ\,wght.ttf');
}

/* #region basics */
* {
    border: 0 solid;
    box-sizing: border-box;
    font-family:Kumbh Sans,sans-serif;
}

html {
    -webkit-text-size-adjust:100%;
    font-feature-settings:normal;
    -webkit-tap-highlight-color:transparent;
    font-variation-settings:normal;
    line-height:1.5;
    -moz-tab-size:4;
    -o-tab-size:4;
    tab-size:4;
}

html, body {
    height: 100%;
    margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Gesamthöhe der Seite */
}

main {
    margin-top: var(--header-height);
    display: block;
    flex: 1; /* Füllt den verbleibenden Platz zwischen Header & Footer */
    min-height: 0; /* verhindert Scrollprobleme bei flex */
}

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
    padding-left: 1rem;
    padding-right: 1rem;
}

hr {
    border-top-width:1px;
    color:inherit;
    height:0
}

.border-dark-300 {
    --tw-border-opacity: 1;
    border-color: #4a5560;
    border-color: rgba(74,85,96,var(1));
}
.border-b-1 {
    border-bottom-width: 1px;
}

.relative {
    position: relative;
}

.bg-dark {
    background-color: #1D2A37 !important;
}

@media (min-width: 768px) {
    .main-content {
      padding: 2.25rem;
      max-width: 768px;
        margin: auto;
    }

    /* .main-content h2, .main-content h3, .main-content p, .main-content ul.ulLegal {
        max-width: 768px;
        margin: auto;
      } */
  }
/* #endregion */

/* #region text */
h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 3rem !important;
    margin: 0;
}

h2 {
  font-size: 1.25rem!important;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1rem!important;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.main p span, .main li span, .main h2 span, .main h3 span  {
  margin-right: 0.5rem;
}

.main p, .main li {
  margin-bottom: 1rem;
}

.main-content {
  color: black;
  padding: 2.25rem 1rem;
}

.main-content ul {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    list-style-type: disc;
}

.main-content ul li::marker {
    color: #82ed6a;
}

.text-white {
    color: rgba(255,255,255,var(--tw-text-opacity,1));
}

.header-text {
    font-weight: 500;
}

.header-text {
    font-size: 2.25rem;
}

@media (min-width: 768px) {
    .header-text {
        font-size: 3rem;
    }
}

.main-content > h2 {
    font-size: 1.375rem;
}
/* #endregion */

/* #region nav */
a {
    color: white;
    text-decoration: none;
  }

menu, ol, ul {
    list-style: none;
  }

  dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

footer .container {
    display: flex;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

/* --- */
.burger-button {
  background: none;
  border: none;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1000;
}

.burger-line {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 3px;
  background-color: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center center;
  translate: -50% 0; /* horizontale Zentrierung ohne margin */
}

/* Positionierung */
.burger-line:nth-child(1) {
  top: 10px;
}
.burger-line:nth-child(2) {
  top: 18.5px;
}
.burger-line:nth-child(3) {
  top: 27px;
}

/* Aktiver Zustand – "X" */
.burger-button.active .burger-line:nth-child(1) {
  transform: rotate(45deg);
  top: 18.5px; /* Mitte */
}

.burger-button.active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-button.active .burger-line:nth-child(3) {
  transform: rotate(-45deg);
  top: 18.5px; /* Mitte */
}

@media (min-width: 768px) {
    .burger-button {
        opacity: 0;
    }
}

#mobileNavbar {
    background-color: rgba(23,34,45,1);
    height: calc(100% - 5.5rem);
    height: calc(100% - var(--header-height));
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    padding: 1rem;
    z-index: 30;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#mobileNavbar a {
    border-bottom-width: 1px;
    border-color: #4a5560;
    border-color: rgba(74,85,96,var(1,1));
    display: block;
    padding-bottom: .75rem;
    padding-top: .75rem;
    transition-duration: .35s;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

#mobileNavbar a:hover {
    color: #82ed6a;
    color: rgba(130,237,106,var(1,1));
}

#mobileNavbar.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* .nav.footer > ul { */
.nav ul {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    justify-content: space-between;
}

.nav ul > li > a {
    border-bottom-width: 1px;
    border-color: #4a5560;
    border-color: rgba(74,85,96,var(--tw-border-opacity,1));
    display: block;
    padding-bottom: .75rem;
    padding-top: .75rem;
    transition-duration: .35s;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
  }

.nav ul > li > a {
    border-color: transparent;
    padding-bottom: .25rem;
    padding-top: .25rem;
    --tw-border-opacity: 1;
}

.nav ul > li > a:hover {
    border-color: #82ed6a;
    border-color: rgba(130,237,106,var(1,1));
    color: #fff;
    color: rgba(255,255,255,var(1));
  }

footer > .container > p {
    color: white;
}

@media (min-width: 576px) {
    footer .container {
        text-align: start;
        flex-direction: row;
        gap: 1.5rem;
        justify-content: space-between;
    }
   }

@media (min-width: 1280px) {
    .nav > ul {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: 1.5rem;
      justify-content: space-between;
    }
   
    .nav > ul > li > a {
        border-bottom-width: 1px;
        border-color: #4a5560;
        border-color: rgba(74,85,96,var(--tw-border-opacity,1));
        display: block;
        padding-bottom: .75rem;
        padding-top: .75rem;
        transition-duration: .35s;
        transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
      }

    .nav > ul > li > a {
        border-color: transparent;
        padding-bottom: .25rem;
        padding-top: .25rem;
        --tw-border-opacity: 1;
    }

    .nav > ul > li > a:hover {
        border-color: #82ed6a;
        border-color: rgba(130,237,106,var(1,1));
        color: #fff;
        color: rgba(255,255,255,var(1));
      }
}
/* #endregion */

/* #region buttons */
button, input, optgroup, select, textarea {
  font-feature-settings: inherit;
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  font-variation-settings: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}
/* #endregion */