/* ============================================================ VARIABLES ============================================================ */

/* COLORS / BOX-SHADOW / BORDER */
body {

  /* BACKGROUND */
  --clr-background: #f6f6f6;
  --clr-background-linear: linear-gradient(0deg, #bebebe1d, #f6f6f6);
  --clr-background-linear-2: linear-gradient(180deg, #bebebe1d, #f6f6f6);

  /* TEXT */
  --clr-headline: #222222;
  --clr-text: #4b4b4b;

  /* ACCENT */
  --clr-primary: #d4992b;
  --clr-primary-hover: #858585;
  --clr-secondary: #eaeaea;
  --clr-secondary-hover: #d7d7d7;
  --clr-accent: #043e55;


  /* BUTTONS */
  --clr-button-primary: var(--clr-primary);
  --clr-button-primary-text: #ffffff;
  --clr-button-primary-hover: #be8823;

  --clr-button-secondary: ;
  --clr-button-secondary-text: #656565;
  --clr-button-secondary-hover: #e5e5e5;
  
  --clr-button-border: #505050;



  /* BOXSHADOW */
  --box-shadow: 0 0 10px 0 #4a4a4a25;
  --box-shadow-wide: 0px 0px 50px 0 #3d3d3d25;
  --box-shadow-wide-2: 16px 24px 100px 0 #00000025;

  /* BORDER */
  --border: 2px solid var(--clr-primary);
  --border-radius: 16px;


  /* TRANSITION */
  --transition: 200ms;
}

body.dark {
  /* BACKGROUND */
  --clr-background: #222220;
  --clr-background-linear: linear-gradient(0deg, #2e2e2c, #222220);
  --clr-background-linear-2: linear-gradient(180deg, #2e2e2c, #222220);

  /* TEXT */
  --clr-headline: #ffffff;
  --clr-text: #e8e8e8;

  /* ACCENT */
  --clr-primary: #a8771d;
  --clr-primary-hover: #858585;
  --clr-secondary: #2b2b2b;
  --clr-secondary-hover: #d7d7d7;
  --clr-accent: #043e55;


  /* BUTTONS */
  --clr-button-primary: var(--clr-primary);
  --clr-button-primary-text: #ffffff;
  --clr-button-primary-hover: #be8823;

  --clr-button-secondary: ;
  --clr-button-secondary-text: #828282;
  --clr-button-secondary-hover: #e5e5e5;

  --clr-button-border: #505050;

  /* BOXSHADOW */
  --box-shadow: 0 0 10px 0 #00000025;
  --box-shadow-wide: 0px 0px 50px 0 #00000025;
  --box-shadow-wide-2: 16px 24px 100px 0 #00000025;
  
}

body.dark header.scrolled {
  background-color: #222220b3;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid #393939;
}

body.dark h5 {
  color: var(--clr-primary);
}



/* LOGO */
.logo-consila {
  fill: #043e55;
  height: 40px;
  width: 40px;
}

.logo-dark {
  display: none;
}

.logo-light {
  display: block;
}

body.dark .logo-dark {
  display: block;
}
body.dark .logo-light {
  display: none;
}


/* ============================================================ TYPOGRAPHY ============================================================ */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900; /* Definieren Sie den Bereich der Gewichtungen der variablen Schriftart */
  font-display: swap;
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); /* Pfad zur ttf-Datei */
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900; /* Definieren Sie den Bereich der Gewichtungen der variablen Schriftart */
  font-display: swap;
  src: url('../fonts/Inter-VariableFont_slnt\,wght.ttf') format('truetype'); /* Pfad zur ttf-Datei */
}


* {
  -webkit-font-smoothing: antialiased;
  --font-charter: "Charter", georgia, serif;
  --font-montserrat: 'Montserrat', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-spacegrotesk: 'Space Grotesk', sans-serif;
  --font-dmsans: 'DM Sans', sans-serif;

  --font-primary: var(--font-inter);
  --font-secondary: var(--font-inter);

  --fs-h1: calc(var(--fs-p) * 3.8);
  --fs-h2: calc(var(--fs-p) * 2.4);
  --fs-h3: calc(var(--fs-p) * 1.8);
  --fs-h4: calc(var(--fs-p) * 1.6);
  --fs-h5: calc(var(--fs-p) * 1.125);
  --fs-p: 16px;
  --fs-small: calc(var(--fs-p) * 0.875);
  
}

@media (max-width: 768px) {
  * {
  --fs-h1: calc(var(--fs-p) * 3.0 );
  --fs-h2: calc(var(--fs-p) * 1.8);
  --fs-h3: calc(var(--fs-p) * 1.5);
  --fs-h4: calc(var(--fs-p) * 1.25);
  --fs-p: 16px;

  }
}
@media (max-width: 400px) {
  * {
  --fs-h1: calc(var(--fs-p) * 2.8);
  --fs-h2: calc(var(--fs-p) * 1.8);
  --fs-h3: calc(var(--fs-p) * 1.5);
  --fs-h4: calc(var(--fs-p) * 1.25);
  --fs-p: 16px;
  }
}

/* DEFAULT */
body {
  color: var(--clr-headline);
  font-family: var(--font-primary);
  font-weight: 700;
}

h1 {
  font-family: var(--font-montserrat);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: calc(var(--fs-h1) + 8px);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
} 

h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
}

h4 {
  color: var(--clr-headline);
  font-size: var(--fs-h4);
  font-weight: 800;
}

h5 {
  font-size: var(--fs-h5);
  font-family: var(--font-secondary);
  color: var(--clr-accent);
  font-weight: 800;
}

p {
  color: var(--clr-text);
  font-family: var(--font-secondary);
  font-size: var(--fs-p);
  font-weight: 400;
}
p.small {
  color: var(--clr-text);
  font-family: var(--font-secondary);
  font-size: var(--fs-small);
  font-weight: 400;
}
p span {
  font-weight: 800;
}


a {
  color: var(--clr-headline);
  text-decoration: none;
  transition: var(--transition);
  font-weight: 400;
}


a:hover p {
  color: var(--clr-primary);
}


/* ============ SCROLLBAR ============ */
/* Firefox */
html {
  scrollbar-width: normal;
  scrollbar-color: #d4992b #ffffff;
}
/* Chrome und alle anderen */
html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html::-webkit-scrollbar-thumb {
  background-color: #d4992b;
  border-radius: 1rem;
}
html::-webkit-scrollbar-thumb:hover {
  background-color: #043e55;
}
html::-webkit-scrollbar-track {
  background-color: transparent;
}


/* ============ CONTAINER ============ */

/* WINDOW MaxWidth */

* {
  --window-max: 1200px;
}
@media (max-width: 1200px) {
  * {
    --window-max: 1000px;
  }
}

.container {
  max-width: var(--window-max);
  margin: 0rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
  
  /* box-shadow: var(--box-shadow); */
}

/* ============ BODY ============ */

body {
  background: var(--clr-background);
}
body.opened {
  overflow: hidden;
}
body img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* ============ SECTION ============ */

section:nth-of-type(1) {
  padding-top: calc(61px + 1rem);
}

@media (max-width: 768px) {
  section:nth-of-type(1) {
    padding-top: 0;
  }
}

section .container {
  padding-top: 3rem;
  padding-bottom: 6rem;
  transition: box-shadow 500ms, margin 500ms;
}
section.active .container {
  box-shadow: var(--box-shadow-wide);
  margin-bottom: 1rem !important;
}

section .section-head {
  margin: 1rem 0;
}

section .section-head.center {
  text-align: center;
}
section .section-head.center p {
  max-width: 500px;
  margin: 1rem auto 0 auto;
}

section.invert * {
  color: var(--clr-headline-invert) !important;
}


/* ============================================================ ELEMENTS ============================================================ */

/* SHOW UP */
.animate {
  transform: translate(0, 50px);
  opacity: 0;
  transition: transform 500ms, opacity 500ms ;
}
.animate.show {
  transform: translate(0, 0);
  opacity: 1;
}

@media (max-width: 600px) {
  .animate {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* BUTTONS */
.button-wrapper {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.button {
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  border-radius: 2rem;
  border: none;
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--box-shadow);
  
  transition: color .16s ease, background-color .16s ease, scale 100ms ease;
}
.button:active {
  scale: .98;
}
/* .button:hover {
  scale: 1.01;
} */

.button svg {
  height: 22px;
  margin-right: -6px;
}


/* Button Primary */
.button-primary {
  background-color: var(--clr-button-primary);
  color: var(--clr-button-primary-text);
  animation: button-primary 3s ease-in-out infinite;
}
.button-primary svg {
  fill: var(--clr-button-primary-text);
  transition: 200ms;
}
  .button-primary:hover {
    background-color: var(--clr-button-primary-hover);
  }
  .button-primary:hover svg {
    transform: translateX(2px);
  }


@keyframes button-primary {
  50% {
    box-shadow: 0 0 5px 0 var(--clr-button-primary);
  }
}

/* Button Tag "kostenlos und unverbindlich" */
.button-tag {
  position: relative;
}
.button-tag::after {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 30%;
  background-image: url(../img/unverbindlich.png);
  background-size: contain;
  background-repeat: no-repeat;
  /* border: 1px solid #043e55; */
  rotate: 5deg;
  height: 100%;
  width: 100%;
}

/* Button Secondary */
.button-secondary {
  background-color: var(--clr-button-secondary);
  color: var(--clr-button-secondary-text);
}
.button-secondary svg {
  fill: var(--clr-button-secondary-text);
}

  .button-secondary:hover {
    background-color: var(--clr-button-secondary-hover);
    
  }

.button-register {
  background-color: #222220;
  color: #f6f6f6;
  border: 1px solid #a1a1a1;
  border-radius: 8px;
  padding: .5rem 1rem;
}

/* SWITCH */
.switch {
  height: 28px;
  width: 56px;
  border: none;
  border-radius: 100px;
  background-color: #717171;
  position: relative;
  cursor: pointer;
}
.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  height: 22px;
  background: var(--clr-primary);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  transition: 300ms ease-in-out;
  z-index: 10;
}
.switch.active::before {
  transform: translateX(28px);
}
.switch svg {
  fill: #ebebeb;
  height: 20px;
  position: absolute;
  top: 4px;
}
.switch svg:nth-of-type(1) {
  left: 3px;
}
.switch svg:nth-of-type(2) {
  right: 3px;
}



/* ============================================================ LAYOUTS ============================================================ */

.grid-content.button

/* GRID 1 */
.grid {
  display: grid;
  gap: 0.5rem;
  padding: 2rem 0;
}

/* GRID 2 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 2rem 0;
}
.grid-2 .grid-content:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: center;
}
.grid-2 .grid-content:nth-of-type(2) {
  box-shadow: var(--box-shadow-wide-2);
  background: var(--clr-background);
  min-height: 400px;
}

@media (max-width: 820px) {
  .grid-2 {
  grid-template-columns: repeat(1, 1fr);

  }
}

/* GRID 3 */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .grid-3 {
  grid-template-columns: repeat(1, 1fr);

  }
}

/* ELEMENTS / LAYOUTS */
.grid-sticky {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.grid-sticky .grid-sticky-content {
 position: sticky;
 top: 0rem;
}
@media (max-width: 1000px) {
  .grid-sticky {
      grid-template-columns: repeat(1, 1fr);

  }
}



/* ============ HEADER ============ */
header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  transition: top 300ms ease-in-out;
  width: 100%;
  transition: background-color 200ms;
}
header.scrolled {
  background-color: hsla(0,0%,98%,.7);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid #dbdbdb;
}

.nav {
  max-width: var(--window-max);
  margin: 4px auto;
  padding: 0.5rem 1rem;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}
  .nav-logo {
    color: var(--clr-headline);
    font-size: 1.5rem;
    font-weight: 800;
    width: 25%;
    display: flex;
    gap: 0.5rem;
  }
  .nav-logo img {
    height: 48px;
  }
  .nav-menu {
    display: flex;
    gap: 1rem;
    justify-content: end;
    height: 40px;
    align-items: center;
    width: 25%;
  }
  .nav-menu .button {
    padding: .5rem 1.25rem;
  }


  

@media (max-width: 800px) {
  .nav {
    height: 50px;
  }

  .nav-logo {
    width: auto;
  }
  .nav-city {
    display: none;
  }
  .nav-menu {
    width: auto;
  }
}



/* ======================== MAIN ======================== */

#city {
  display: none;
}

/* ============ HERO ============ */
.hero {
  margin-top: 0 !important;
  background: var(--clr-background-linear);
}
.hero-content-head {
  transition-delay: 200ms;
}
.hero-content-img {
  transition-delay: 400ms;
}
.hero-trust-content {
  transition-delay: 600ms;
}

  .hero-content {
    min-height: 600px;
  }
  .hero-content .grid-2 {
    padding: 3rem 0;
  }

    .hero-content-head {
      max-width: 750px;
      margin: 1rem auto 0 auto;
      padding: 2rem 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;

    }
    .hero-content-img {
      margin: auto 0;
    }

    .hero-content-img img {
      height: auto;
      width: auto;
      box-shadow: var(--box-shadow-wide-2);
      border-radius: 5rem;
    }


.hero-trust-content {
  display: flex;
  align-items: center;
  gap: .5rem;
}
  .hero-trust-content img {
    height: 32px;
  }
  .hero-trust-content .logos {
    display: flex;
    gap: .5rem;
  } 
  .hero-content .stars {
    display: flex;
    gap: 1px;
    align-items: center;
  }
  .hero-content .stars p {
    color: #e7711b;
    padding-right: 4px;
  }
  .hero-content .stars img {
    height: 12px;
  }
  .hero-content .bewertungen-google-anzahl {
    display: flex;
    gap: 4px;
    font-weight: 400;
  }


.button-wrapper-mobile {
  display: none;
}

@media (max-width: 820px) {
  .hero-content .grid-2 {
    padding: 1rem 0;
    text-align: center;
  }
  .hero-content .button-wrapper {
    width: 100%;
    justify-content: center;
  }
  .hero-content-img {
    padding: 0 2rem;
  }
  .hero-trust-content {
    flex-direction: column;
  }

}

@media (max-height: 800px) {
  .hero-content .grid-2 {
    padding: 1rem 0;
  }
}

@media (max-width: 500px) {
  .hero-content-img {
    padding: 0 0rem;
  }
  .button-wrapper-mobile {
    width: 100%;
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  .hero-content-head .button-wrapper {
    display: none;
  }
  .hero-content-head .small {
    display: none;
  }

  .hero-content .grid-2:nth-of-type(1) {
    gap: 0rem;
  }


}


/* ============ ZAHLEN ============ */
.zahlen {
  background: var(--clr-background-linear-2);
}


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

.zahlen-box h4 {
  font-size: 4rem;
}
.zahlen-box-text {
  display: flex;
  text-align: center;
  justify-content: center;
}



/* ============ LEISTUNGEN ============ */
.leistungen {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* IFRAME */
/* .leistungen-video { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
  border-radius: 1.5rem;
  box-shadow: var(--box-shadow-wide);
} 
.leistungen-video iframe { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
  border-radius: 1.5rem;
} */

/* VIDEO */
.leistungen-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 500px;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-wide-2);
}
.leistungen-video video {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
.leistungen-video video[poster]{
  object-fit: cover;
}

.leistungen .button-wrapper {
  padding: 1rem 0;
  justify-content: center;

}


/* ============ BEWERTUNGEN GOOGLE ============ */

.google-reviews {
  overflow-x: hidden;
}

.google-reviews .button-wrapper {
  justify-content: center;
  padding-top: 1rem;
}

/* ============ SWIPER ============ */

.swiper-demo {
  position: relative; 
  display: grid;
  grid-template-columns: 40% calc(60% - 1rem);
  gap: 1rem;
}


/* Swiper Controls */
.swiper-button-wrapper {
  display: flex;
  gap: .5rem;
  padding: 1rem 0;
}

  .swiper-button-prev,
  .swiper-button-next {
    position: static !important;
    margin: 0 !important;
    height: 48px !important;
    width: 48px !important;
    background-color: var(--clr-headline);
    border-radius: 50%;
    color: transparent !important;
    transition: scale 100ms;
  }
  .swiper-button-prev:active,
  .swiper-button-next:active {
    scale: .95;
  }

  .swiper-button-prev svg,
  .swiper-button-next svg {
    fill: var(--clr-background);
    height: 2rem !important;
    width: 2rem !important;
    position: absolute;
  }

  .swiper-button-disabled {
    background-color: #7b7b7b62;
  }


.swiper-pagination {
  display: none;
}

@media (max-width: 768px) {
  .swiper-demo {
    grid-template-columns: 100%;
  }
  .swiper-demo-container {
    margin: 0 -1rem;
  }

  .swiper-pagination {
    /* background-color: #ff0000; */
    position: relative !important;
  
    bottom: -1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    justify-content: center;
    width: auto !important;
    text-align: start !important;
  
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
    .swiper-pagination-bullet-active {
      background: var(--clr-accent) !important;
    }
}



/* Swiper Content */
.swiper-slide {
  position: relative;
  border-radius: 2rem;
  max-height: 750px;
  overflow: hidden;
  padding: 1rem;
  transition: 300ms;
}
.swiper-slide.active {
  max-height: 2000px;

}
.swiper-slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2rem;
  width: 100%;
}

/* IFRAME */
/* .slide-head { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
  border-radius: 1.5rem;
} 
.slide-head iframe { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
  border-radius: 1.5rem;
} */

/* VIDEO */
.slide-head {
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.slide-head video {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
.slide-head video[poster]{
  object-fit: cover;
}


.slide-content {
  background: var(--clr-secondary);
  padding: 3rem 2rem 2rem 2rem;
  margin-top: -1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}
.swiper-slide.active .slide-content {
  padding: 3rem 2rem 4.5rem 2rem;
}
.slide-content img {
  height: 16px;
}
.slide-content .list-item {
  display: flex;
  gap: .25rem;
}
.slide-content .list-item svg {
  fill: var(--clr-text);
}
.slide-content-text {
  margin-top: .5rem;
}
.slide-content-more {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  bottom: .5rem;
  background: var(--clr-headline);
  z-index: 10;
  color: var(--clr-background);
  display: grid;
  place-content: center;
  box-shadow: var(--box-shadow-wide-2);
}
.slide-content-more svg {
  fill: var(--clr-background);
  transition: 250ms;
}
.slide-content-more:hover {
  background: #3a3a3a;
}
.slide-content-more.active svg {
  rotate: 180deg;
}

/* ============ GOOGLE REVIEWS ============ */


.facts-total {
  /* display: flex; */
  padding: 1rem;
}


.google-reviews-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .google-reviews-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.review {
  box-sizing: border-box;
  -webkit-column-break-inside: avoid;
  padding: 2rem;
  background: var(--clr-secondary);
  /* box-shadow: var(--box-shadow); */
  margin: 0rem 0rem 0rem 0;
  border-radius: var(--border-radius);
  height: 100%;
  position: relative;
}
  .review-text {
    position: relative;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    font-weight: 400;
  }

  .review-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 1rem;
    width: 100%;
    background-image: url(../img/review-stars.svg);
    background-repeat: no-repeat;

  }

  .review-info {
    display: flex;
    align-items: center;
    gap: .5rem;
  }
    .review-image {
      height: 56px;
    }

    .review-date {
      font-size: .75rem;
      font-weight: 400;
      /* display: none; */
    }




/* ============ VORTEILE ============ */

.vorteile {
  margin-top: -100px;
  background: var(--clr-background-linear);
}
.vorteile .grid-sticky-content {
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vorteile img {
  margin-top: 1rem;
  border-radius: 2rem;
  box-shadow: var(--box-shadow);
}

.vorteile-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vorteile-box {
  height: 100vh;
  min-height: 900px;
  margin-bottom: -400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  text-align: center;
}
.vorteile-box:nth-last-of-type(1) {
  margin-bottom: 0;
}

.vorteile-box-head {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
}

.vorteile-box-head img {
  margin-top: 0;
  border-radius: 0;
  max-width: 100px;
  box-shadow: none;
}

@media (max-width: 1000px) {
  .vorteile {
    margin-top: 0px;
  }

  .vorteile .grid-sticky-content {
    height: auto;
    text-align: center;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .vorteile-img {
    padding: 0 2rem;
  }
  
  .vorteile .grid-sticky-content .button-wrapper {
    justify-content: center;
  }
  .vorteile-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .vorteile-box {
    align-items: flex-start;
    text-align: start;
    /* background-color: var(--clr-background); */
    padding: 1rem;
    /* border-radius: var(--border-radius); */
    /* box-shadow: var(--box-shadow-wide); */
    height: auto;
    min-height: auto;
    margin-bottom: 0;
  } 

  .vorteile-box-head {
    /* border: var(--border); */
    flex-direction: row;
    gap: .5rem;
  }

  .vorteile-box-head img {
    height: 50px;
    width: auto;
  }

}

/* ============ BERATUNGSABLAUF ============ */
.beratungsablauf {
  --stick-head: 6rem;
  --stick-card: calc(var(--stick-head) + 6.5rem);
  background: var(--clr-background-linear);
}

.beratungsablauf .section-head {
  position: sticky;
  top: var(--stick-head);
  height: 5.5rem;
  /* max-width: 500px; */
}

.ablauf-card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.ablauf-card {
  max-width: 600px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  background: var(--clr-background);
}
.ablauf-card:nth-of-type(1) {
  position: sticky;
  top: calc(var(--stick-card) + 0rem);
}
.ablauf-card:nth-of-type(2) {
  position: sticky;
  top: calc(var(--stick-card) + 1rem);
}
.ablauf-card:nth-of-type(3) {
  position: sticky;
  top: calc(var(--stick-card) + 2rem);
}
.ablauf-card:nth-of-type(4) {
  position: sticky;
  top: calc(var(--stick-card) + 3rem);
}
.ablauf-card:nth-of-type(5) {
  position: sticky;
  top: calc(var(--stick-card) + 4rem);
}


  .card-title {
    display: flex;
    align-items: center;
    gap: .75rem;
  }
  .card-title-number {
    color: var(--clr-background);
    height: 40px;
    width: 40px;
    background: var(--clr-primary);
    display: grid;
    place-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 800;
  }
  .card-title-text {
    color: var(--clr-primary);
  }

@media (ma-width: 768px) {
  .beratungsablauf {
    --stick-head: 4rem;
  }
}

/* ============ SIMPLR ============ */

.simplr {
  background: var(--clr-background-linear);
}

.simplr-box {
  display: grid;
  grid-template-columns: 36% auto;
  gap: 0rem;
}


.simplr-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* justify-content: center; */
  padding-top: 30%;

}

.simplr-download {
  padding-top: 3rem;
  display: flex;
  gap: 1rem;
  flex-direction: column; 
  text-align: center;
}
.simplr-download .button-wrapper {
  justify-content: center;
}
.simplr-download-wrapper {
  display: flex;
  justify-content: center;
}
.simplr-download-wrapper img {
  max-height: 50px;
}


@media (max-width: 1200px) {
  .simplr-box {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .simplr-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .simplr-box {
    border-radius: var(--border-radius);
    padding: 2rem;
    grid-template-columns: 1fr;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--box-shadow-wide);
  }
  .simplr-box h2 {
    font-size: var(--fs-h3);
  }
  .simplr-content {
    padding-top: 0;
  }
}


/* ============ ONLINEBERATUNG ============ */

.online-beratung .button-wrapper {
  justify-content: center;
  padding-top: 1rem;
}

.online-wrapper {
  position: relative;
  z-index: 403;
  margin: 0 auto;
  max-width: 600px;
  box-shadow: var(--box-shadow-wide);
  border-radius: 10%;
}
.online-wrapper-video {
  position: absolute;
  top: 3%;
  left: 3%;
  height: 94%;
  width: 94%;
  background: #725c5c;
}
.online-wrapper-video video {
  height: 100%;
  width: 100%;
  z-index: 402;
}
.online-wrapper-frame {
  z-index: 410;
  position: relative;
}
.online-wrapper-controls {
  position: absolute;
  bottom: 7%;
  left: 5%;
  width: 90%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  /* border: var(--border); */
  padding-left: 4px;
}
.online-wrapper-controls p {
  font-weight: 800;
  color: #f6f6f6;
}
.online-wrapper-controls-btn {
  display: flex; 
}
.online-wrapper-controls-btn img {
  height: 40px;
}

.online-box-wrapper {
  margin-top: 2rem;
  gap: 2rem;
}
.online-box {
  background: var(--clr-background);
  box-shadow: var(--box-shadow-wide);
  padding: 2rem;
  border-radius: var(--border-radius);
}
.online-box,
.online-box-head {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}
.online-box-head img {
  height: 50px;
}

@media (max-width: 500px) {
  .online-wrapper-controls p {
    font-size: .75rem;
  }
  .online-wrapper-controls-btn img {
    height: 32px;
  }
  .online-box-wrapper {
    gap: 1rem;
  }
}

/* ============ STANDORTE ============ */
#map {
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-wide);
}

/* fix for label */
.gm-style .gm-style-iw-d {
  color: #222220;
}

.locations-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.location {
  padding: 1rem 0;
  /* box-shadow: var(--box-shadow); */
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.location-office {
  font-size: var(--fs-h4);
}
.location-adress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
.location-adress a {
  margin-top: .5rem;
}
.location-oppening {
  gap: .25rem;
}
.location-oppening p {
  display: grid;
  grid-template-columns: 3rem auto;
}
@media (max-width: 1000px) {
  .locations-wrapper {
    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 425px) {
  .locations-wrapper {
    display: flex;
    flex-direction: column;
  }
  .location {
    box-shadow: var(--box-shadow-wide);
    padding: 1.5rem;
    background: var(--clr-background);
  }
}


/* ============ FAQ ============ */

.faq {
  background: var(--clr-background-linear-2);
}

.accordion {
  max-width: 800px;
  margin: 0 auto;
}

.accordion-item {
  background: var(--clr-accent-secondary);
  color: #111;
  border-bottom: 1px solid #8b8b8b30;
}
.accordion-item-header {
  font-size: 1.25rem;
  padding: 1rem 0;
  min-height: 3.5rem;
  
  font-weight: bold;
  display: flex;
  gap: 1rem;
  align-items: start;
  cursor: pointer;
  justify-content: space-between;
}

.accordion-title {
  font-size: 1.25rem;
  transition: 100ms;
}
.accordion-item-header:hover .accordion-title {
  color: var(--clr-primary);
}


.accordion-item-header .accordion-toggle {
  min-height: 30px;
  min-width: 20px;
  position: relative;
  display: grid;
  place-items: center;
  margin-right: 2px;
}

.accordion-item-header .accordion-toggle span {
  width: 100%;
  height: 3px;
  background: var(--clr-headline);
  display: block;
  position: absolute;
  transition: 300ms;
}
.accordion-item-header .accordion-toggle span:nth-of-type(2) {
  rotate: 90deg;
}
.accordion-item-header.active .accordion-toggle span:nth-of-type(2) {
  rotate: 0deg;
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms ease-in-out;
}
.accordion-item-body-content {
  font-size: 1rem;
  padding: 0 0 1.5rem 0;
  line-height: 1.5rem;
  transform: translateY(50px);
  opacity: 0;
  transition: 500ms ease-in-out;
}
.accordion-item-body-content.active {
  transform: translateY(0px);
  opacity: 1;
}


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

.termin-action {
  margin: 2rem 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--box-shadow-wide);
  position: relative;
}
.termin-action-buchen * {
  color: #fff;
}
.termin-action-buchen {
  position: absolute;
  top: 10%;
  right: 5%;
  text-align: center;
  display: flex;
  gap: .5rem;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  padding: 1rem;
}
.termin-action .img-termin-small {
  display: none;
}

.termin-action img {
  filter: grayscale(1);
  transition: 500ms;
  border-radius: 1rem;
}

@media (max-width: 1050px) {
  .termin-action-buchen {
    position: absolute;
    top: 5%;
    right: 0%;
  }
}

@media (max-width: 768px) {
  .termin-action .img-termin-big {
    display: none;
  }
  .termin-action .img-termin-small {
    display: block;
  }
  .termin-action-buchen {
    top: 5%;
    right: 50%;
    transform: translateX(50%);
    max-width: 1000px;
    width: 100%;
  }
  .termin-action-benefits {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .termin-action-buchen {
    top: 0%;
  }
  .termin-action-buchen h3 span {
    display: none;
  }
}

/* ============ TERMIN PAGE ============ */

.termin {
  padding: 3rem 0 !important;
}


.termin .hero-content {
  min-height: 50px;
}
.termin-contact {
  margin-top: 1rem;
  /* border: var(--border); */
}
  .termin-contact .button {
    gap: 1rem;
    padding: .75rem 1.0rem;
  }
  .termin-contact .button svg {
    fill: var(--clr-headline);
  }
  .termin-contact .button-wrapper {
    margin: 0;
  }
  .termin-contact h3 {
    margin-top: 1rem;
  }

.iframe-wrapper iframe {
  max-width: 500px;
  min-height: 800px;
  box-shadow: var(--box-shadow-wide);
  border-radius: var(--border-radius);
}

@media (max-width: 820px) {
  .iframe-wrapper {
    order: -1;
  }
}


/* ============ FOOTER ============ */

footer {
  min-height: 300px;
  background: var(--clr-secondary);
  padding: 1rem 0 1rem 0;
  box-shadow: 0 0 50px 0 #46464651;
  /* border-radius: 3rem 3rem 0 0; */
}

.footer-content {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 3rem 0;
}

  .footer-logo {
    font-size: 2rem;
    display: grid;
  }
  .footer-logo {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-logo img {
    height: 72px;
    width: auto;
  }

  .footer-menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }


  .link-modal-impressum,
  .link-modal-datenschutz {
    position: fixed;
    width: var(--window-max);
   
    background: var(--clr-background);
    box-shadow: var(--box-shadow-wide);
    border-radius: 1rem;
    z-index: 999;
    overflow: hidden;
    

    height: calc(90vh);
    padding: 2rem 2rem;
    top: 120vh;
    left: 50%;
    transform: translateX(-50%);
    transition: 500ms;
  
  }
  
  .link-modal-impressum.opened,
  .link-modal-datenschutz.opened {
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
  
  }

  @media (max-width: 480px) {
    .link-modal-impressum,
    .link-modal-datenschutz {
      padding: 1rem;
      left: 50%;
      transform: translateX(-50%);
      
    }
    
    
    .link-modal-impressum.opened,
    .link-modal-datenschutz.opened {
      height: calc(100vh - 4rem);
      top: .75rem;
      padding: 1rem;
    }
  }
  
  
  .modal-head {
    display: flex;
    justify-content: space-between;
    font-size: 2rem;
    font-weight: bold;
    color: var(--clr-button);
    padding-bottom: 1rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid #8b8b8b41;
  }
  .modal-impressum-close,
  .modal-datenschutz-close {
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
    display: grid;
    place-content: center;
    color: var(--clr-headline);
    transition: 100ms;
    box-shadow: var(--box-shadow);
  }
  .modal-impressum-close:hover,
  .modal-datenschutz-close:hover {
    color: var(--clr-primary)
  }
  
  .modal-content {
    height: 100%;
    overflow-y: scroll;
    padding: 0rem 0 5rem 0;
    scrollbar-width: normal;
    scrollbar-color: #d4992b #ffffff;
  }

  /* Chrome und alle anderen */
  .modal-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .modal-content::-webkit-scrollbar-thumb {
    background-color: #d4992b;
    border-radius: 1rem;
  }
  .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #043e55;
  }
  .modal-content::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .modal-content h5 {
    margin: 1rem 0;
    color: var(--clr-headline);
  }
  .modal-content p {
    color: var(--clr-text);
  }
  .modal-content a {
    color: var(--clr-headline);
    text-decoration: underline;
  }
  
  .modal-content .strong {
    font-weight: bold;
  }
  
  .modal-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .modal-content-grid-right li {
    color: var(--clr-text);
  }
  
  @media (max-width: 768px) {
    .footer-content {
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(1, 1fr);
      padding: 1rem 1rem;
      justify-content: center;
    }
    .footer-logo {
      text-align: center;
      align-items: center;
    }
    .footer-menu {
      justify-content: center;
      text-align: center;
    }
    .footer-year {
      display: flex;
      justify-content: center;
      padding-bottom: 2rem;
    }


    .link-modal-impressum,
    .link-modal-datenschutz {
      width: 95vw;
    }
    .modal-content {
      text-align: start;
      overflow-x: hidden;
    }
    .modal-content-grid {
      grid-template-columns: 1fr;
    }
  }