/* ==========================================================================
   Variablen
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #046151;
  --color-midprimary: #42BAA0;
  --color-lightprimary: #A8D5CC;
  --color-accent: #124559;
  --color-light: #FBFCFC;
  --color-lightgrey: #F1F6F5;
  --color-midgrey: #B9BDB6;
  --color-grey: #7E8685;
  --color-darkgrey: #3A3B37;
  --color-dark: #01161E;
  --color-overlay: rgba(18, 69, 89, 0.5);

  /* Fonts */
  --font-family-main: "Nunito Sans", sans-serif;
  --font-family-accent: "Playfair Display", serif;

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

  --font-size-default: 1rem;
  --font-size-l: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-xs: 0.8rem;
  --font-size-h1: 2.75rem;
  --font-size-h2: 2.75rem;
  --font-size-h3: 2rem;

  --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: 1.25rem;
  --border-radius-m: 1rem;

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

}

/* ==========================================================================
   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-accent);
  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-accent);
  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-accent);
  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="%23FBFCFC" 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);
  line-height: 1.2;
  text-wrap: balance;
}

h3,
h4 {
  margin: 0;
  font-family: var(--font-family-accent);
  font-weight: var(--font-weight-bold);
  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-xl);
}



p,
.source,
.text-s,
.zitat,
li,
a,
.kicker {
  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,
a {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-default);
  line-height: 1.5;
}

.kicker{
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-light);}

.zitat{
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);}

.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-lightgrey)
}

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

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

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

.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);
  }

  .kicker {
    font-size: var(--font-size-default);
  }

  .zitat {
    font-size: var(--font-size-l);
  }

  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-h {
  padding-left: var(--padding-default);
  padding-right: var(--padding-default);
}

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

.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(25%, 1fr));
}

/* Grid mit 3 Einträgen: alle nebeneinander */
.grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

/* Grid mit 4 Einträgen: 2x2 Layout */
.grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--gap-xl);
}

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

.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: 0 var(--border-radius-full) 0 var(--border-radius-full) ;
}

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

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

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

.hidden-overflow {
  overflow: hidden;
}

.line {
  border-top: 0.1rem solid var(--color-midprimary);
  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: contain;
}

.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%;
  }

  .width-45 {
    width: 100%;
  }

  .min-height {
    min-height: auto;
  }

}

/*===== 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%;
  }

  .width-45 {
    width: 100%;
  }

  .min-height {
    min-height: auto;
  }

  .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);
  }

}

/*===== Tablet Hochkant =====*/
@media (min-width: 811px) and (max-width: 1024px) {

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

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

  .width-half {
    width: 100%;
  }

  .width-45 {
    width: 100%;
  }

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

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

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

@media (min-width: 1025px) 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-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: 0 var(--border-radius-full) 0 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 grün */
.btn1 {
  background-color: var(--color-accent);
  color: var(--color-light);
}

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

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

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

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

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

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

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


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


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

.nav-logo {
  display: block;
  height: 3rem;
  width: auto;
}

.nav-logo a {
  display: block;
  height: 100%;
}

.nav-logo img {
  height: 100%;
  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-accent);
  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 .nav-link:hover {
  color: var(--color-lightprimary);
}

.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;
  background-image: url(/assets/site-content/background.jpg);
}

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

/*===== MOBILE =====*/
@media (max-width: 810px) {
  .hero {
    background-size: cover;
    background-position: center center;
  }

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

  .hero .flex-h {
    flex-direction: column;
  }

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

/*===== Tablet Hochkant =====*/
@media (min-width: 811px) and (max-width: 1024px) {
  .hero {
    min-height: 50vh;
  }

  .hero .width-45 {
    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:has(> :nth-child(3):last-child),
  .grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr;
  }

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

@media (min-width: 481px) and (max-width: 810px) {
  .grid,
  .grid:has(> :nth-child(3):last-child),
  .grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr;
  }

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

/*===== Tablet Hochkant =====*/
@media (min-width: 811px) and (max-width: 1024px) {
  .grid,
  .grid:has(> :nth-child(3):last-child),
  .grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   txt-img / hero-img
   ========================================================================== */
.txt-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--gap-xxl);
  width: 100%;
  align-items: center;
}
.txt-img-grid .btn {
  align-self: flex-start;
}

.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 {
  justify-self: center;
  width: 80%;
  height: auto;
  grid-area: img;
}

.list{
  list-style: none;
  padding-left: 1.5rem;
}

.list li{
  list-style: none;
  position: relative;
}

.list li::before{
  content: "–";
  position: absolute;
  left: -1.5rem;
}

/*===== 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.textrechts {
    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;
  }

}

/*===== Tablet Hochkant =====*/
@media (min-width: 811px) and (max-width: 1024px) {
  .txt-img-grid {
    column-gap: var(--gap-tablet-xxl);
  }
}

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

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

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

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

  .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:
      "vorname name"
      "mail kurs"
      "message message";
}

  .vorname {
    grid-area: vorname;
  }

  .name{
    grid-area: name;
  }

  .mail{
    grid-area: mail;
  }

  .kurs{
    grid-area: kurs;
  }
  .message{
    grid-area: message;
  }

.contact-form .btn {
  align-self: flex-start;
}

/*===== 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-columns: 1fr;
    grid-template-areas:
      "vorname"
      "name"
      "mail"
      "kurs"
      "message"
      "upload";
    row-gap: var(--gap-mobile-xxs);
  }

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

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

/*===== 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 .flex-h {
    flex-direction: column;
    width: 100%;
  }

  .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;
  }

  .cta .flex-h {
    flex-direction: column;
    width: 100%;
  }

  .cta .btn {
    width: 100%;
  }

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

  .banner h3 {
    width: 80%;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  border-top: 0.1rem solid var(--color-midprimary);
  background-color: var(--color-light);
  padding: var(--padding-xxxl);
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-default);
  gap: var(--gap-s);
}

.footer-logo {
  display: flex;
  align-self: end;
  justify-content: end;
  height: 16rem;
  width: auto;
}


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

.footer-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  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-dark);
  padding-bottom: 0;
}

.impressum {
  justify-self: start;
}

.copyright {
  justify-self: end;
}

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

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


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

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

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

  .footer-logo {
    width: 100%;
    height: auto;
  }

  .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-dark);
    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 {
    grid-template-columns: 1fr;
    row-gap: var(--gap-mobile-xxl);
    padding-bottom: var(--padding-mobile-xl);
  }

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

  .legal {
    grid-template-columns: 1fr;
    row-gap: var(--gap-mobile-xs);
  }

  .footer-logo {
    width: 100%;
    height: auto;
  }

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

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

/*===== Tablet Hochkant =====*/
@media (min-width: 811px) and (max-width: 1024px) {
  footer {
    padding: var(--padding-tablet-xl);
  }

  .footer-content {
    column-gap: var(--gap-tablet-xl);
  }

  .footer-logo {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .footer-logo {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   Cookie Banner (Silktide Consent Manager)
   ========================================================================== */

/* Banner */
#stcm-banner {
  border-radius: var(--border-radius-full);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
}

#stcm-banner p {
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
}

#stcm-banner a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

#stcm-banner a:hover {
  color: var(--color-midprimary);
}

/* Buttons */
#stcm-wrapper .stcm-button {
  display: inline-flex;
  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: 0 var(--border-radius-full) 0 var(--border-radius-full) ;
  cursor: pointer;
  text-decoration: none;
  width: auto;
  border: 2px solid transparent;
  gap: var(--gap-xxxs);
  transition: var(--transition);
}

#stcm-wrapper .stcm-button-primary:hover {
  background-color: var(--color-lightprimary);
  border-color: var(--color-lightprimary);
  color: var(--color-light);
}

#stcm-wrapper .stcm-button-secondary {
  border-color: var(--color-primary);
}

#stcm-wrapper .stcm-button-secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-light);
}

/* "Nur notwendige Cookies" Button */
#stcm-banner .stcm-reject-all {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-light);
}

#stcm-banner .stcm-reject-all:hover {
  background-color: var(--color-lightprimary);
  border-color: var(--color-lightprimary);
}

/* Buttons untereinander, zentriert */
#stcm-banner .stcm-actions {
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--gap-xs) !important;  
  padding-top: var(--padding-xs);
}

#stcm-banner .stcm-actions-row {
  flex-grow: 0 !important;
}

#stcm-banner .stcm-preferences-button {
  font-family: var(--font-family-main);
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-light);
  color: var(--color-accent);
  height: fit-content;
  padding: 0;
  margin: 0;
}

#stcm-banner .stcm-preferences-button span:hover {
  color: var(--color-midprimary);
}

/* Ausgeblendete Elemente */
#stcm-banner .stcm-accept-all,
#stcm-banner a.stcm-logo,
#stcm-modal footer a.stcm-credit-link,
#stcm-modal .stcm-modal-reject-all,
#stcm-icon {
  display: none !important;
}

/* Modal */
#stcm-modal {
  border-radius: var(--border-radius-full);
}

#stcm-modal h1 {
  font-family: var(--font-family-accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: var(--color-dark);
}

#stcm-modal p {
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
}

#stcm-modal legend {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-bold);
}

#stcm-modal .stcm-consent-description p {
  font-size: 0.875rem;
}

/* Close-Button 50% kleiner */
#stcm-modal .stcm-modal-close {
  padding: 6px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#stcm-modal .stcm-modal-close svg {
  width: 10px;
  height: 10px;
  fill: var(--color-accent);
  transition: var(--transition);
}

#stcm-modal .stcm-modal-close:hover svg {
  fill: var(--color-primary);
}

#stcm-modal .stcm-toggle {
  width: 63px;
  height: 29px;
}

#stcm-modal .stcm-toggle-track {
  width: 63px;
  height: 29px;
  background: var(--color-midgrey);
}

#stcm-modal .stcm-toggle-thumb {
  height: 25px;
  width: 25px;
}

#stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-thumb {
  left: calc(100% - 27px);
}

#stcm-modal .stcm-toggle-off,
#stcm-modal .stcm-toggle-on {
  display: none !important;
}

#stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
  background: var(--color-primary);
}

#stcm-modal .stcm-toggle input:disabled + .stcm-toggle-track {
  background: var(--color-lightprimary);
  opacity: 1;
  filter: none;
}

/* Modal Footer */
#stcm-modal footer {
  margin: 0;
  gap: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--padding-default);
  padding-bottom: 0;
  border-top: none !important;
}

#stcm-modal section {
  border-bottom: none !important;
}

/* Speichern-Button */
#stcm-modal .stcm-modal-save {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-light) !important;
}

#stcm-modal .stcm-modal-save:hover {
  background-color: var(--color-lightprimary) !important;
  border-color: var(--color-lightprimary) !important;
}

#stcm-modal footer a.stcm-credit-link {
  display: none;
}

/* Cookie Icon */
#stcm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

#stcm-icon:hover {
  transform: scale(1.1);
}

/* Responsive */
@media screen and (max-width: 640px) {
  #stcm-banner {
    padding: 24px;
  }

  #stcm-banner p {
    font-size: var(--font-size-default-mobile);
  }

  #stcm-wrapper .stcm-button {
    font-size: var(--font-size-default-mobile);
    padding: 0.625rem 1.25rem;
  }

  #stcm-banner .stcm-preferences-button {
    font-size: var(--font-size-default-mobile);
  }

  #stcm-modal h1 {
    font-size: var(--font-size-l);
  }

  #stcm-modal p {
    font-size: var(--font-size-default-mobile);
  }

  #stcm-modal {
    padding: 20px;
  }
}