@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* -----------------------------------------------
   Header Menu Padding Margin
----------------------------------------------- */
/*
 @media (min-width: 992px) {
  .header-nav-col.nav-main {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 992px) {
  .main-navigation-menu {
    margin-left: 40px;
    margin-right: 40px;
  }
}

*/

/* Ensure menu items don't wrap between 992px and 1275px */
@media (min-width: 992px) and (max-width: 1275px) {
  .nav-header .main-navigation-menu {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .nav-header .main-navigation-menu .main-navigation-link-name {
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
}



/* -----------------------------------------------
   Self-hosted Lato Font Faces
----------------------------------------------- */
/* Lato Regular - weight 400 */
@font-face {
    font-display: swap;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Lato-Regular.woff2') format('woff2');
}

/* Lato Medium - weight 500 */
@font-face {
    font-display: swap;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Lato-Medium.woff2') format('woff2');
}

/* Lato Bold - weight 700 */
@font-face {
    font-display: swap;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Lato-Bold.woff2') format('woff2');
}

.img-fluid.image-slider-media {
  width: 100%;
  max-width: 1200px; 
  height: auto;
  object-fit: cover; /* if the image is used as a background-like element */
}

/* fix leistung problem */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
img.lazy.loaded {
  opacity: 1;
}

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




/* Critical CSS for Fast Rendering */
/* its in the other file */
/*
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}
*/

/* -----------------------------------------------
   Icons Left and Right for the orange thing
----------------------------------------------- */
.tns-nav { /* hide the dots cause its not working from the settings */
  display: none !important;
}


.slider-container {
  position: relative;
  width: 100%;
}

.base-slider-controls-prev.image-slider-controls-prev {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: #ffffff !important; /* white background */
  border: none;
  cursor: pointer;
  z-index: 100;
}

.base-slider-controls-next.image-slider-controls-next {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: #ffffff !important; /* white background */
  border: none;
  cursor: pointer;
  z-index: 100;
}

.base-slider-controls-prev .icon svg path,
.base-slider-controls-next .icon svg path {
  fill: #000000 !important;
}


/* -----------------------------------------------
   New Page - Blog Shit
----------------------------------------------- */
/*
.breadcrumb-container {
  display: none;
}
.my-custom-blog .shop-studio-blog-blog-post-box__content__additional_info,
.cms-page .shop-studio-blog-blog-post-box__content__additional_info {
  display: none;
}

.container {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
}

*/

/*
.show-breadcrumb .breadcrumb-container {
  display: block !important;
}
*/


/*Show breadcumb for produkte */
.breadcrumb-container:has(
  ol.breadcrumb > li > a.breadcrumb-link.is-active[href$="/Produkte/"]
) {
  display: block !important;
}
/* end */

body.is-ctl-product .breadcrumb-container {
  display: block;
}

.breadcrumb-wrap {
  justify-content: flex-start !important;
  text-align: left;
  margin-left: -100px;
}

@media (max-width: 993px) {
  .breadcrumb-wrap {
    margin-left: -55px;
  }
}



/* -----------------------------------------------
   New Page - Blog Shit
----------------------------------------------- */

.shop-studio-blog-blog-post-box__content .row {
  display: flex;
  align-items: center;
}

.breadcrumb-container,
/* Hide additional info for blog posts */
.my-custom-blog .shop-studio-blog-blog-post-box__content__additional_info,
.cms-page .shop-studio-blog-blog-post-box__content__additional_info {
  display: none; 
}

.container {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
}

/* ===== Blog Post Specific Styles ===== */
.shop-studio-blog-blog-post-box {
  font-family: 'Lato', sans-serif;
  color: #000;       
  padding: 5px;            
}

/* Ensure every element inside the blog post box is black */
.shop-studio-blog-blog-post-box * {
  color: #000;
}

/* Info container: minimize gaps between text elements */
.shop-studio-blog-blog-post-box__content__info {
  display: flex;
  flex-direction: column;
  gap: 3px;             
  margin: 0;
  padding: 0;
    flex-wrap: wrap;
}

/* Title styling: force black color and reduce margin */
.shop-studio-blog-blog-post-box__content__info__title {
  color: #000 !important;
  font-family: 'Lato', sans-serif;
  margin: 0 0 3px 0;
  display: block;       
  margin: 0;            /* Remove any default margin */
  padding: 0;           /* Remove any default padding */
  line-height: 1.1;     
}

/* Description: minimal margin */
.shop-studio-blog-blog-post-box__content__info__description {
  margin: 0 0 3px 0;
}

/* Date repositioning and spacing */
.shop-studio-blog-blog-post-box__content__additional_info_bottom {
  order: -1;               /* Moves the date to the top */
  margin: 0 0 3px 0;        
}

/* Button container: remove extra top spacing */
.shop-studio-blog-blog-post-box__content__info__actions {
  margin-top: 0;
  padding-top: 0;
}

/* Image container: set fixed height to match design, remove extra inline space */
.shop-studio-blog-blog-post-box__content__image {
  overflow: hidden;
  padding: 0;
  margin: 0;
  height: 259px;         
  line-height: 0;
}

/* Image styling: 8px rounded corners, fully fill container */
.shop-studio-blog-blog-post-box__content__image__link__image {
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.shop-studio-blog-blog-post-box__content__info__actions__detail.btn-buy {
  background-color: #F49E4C;
  color: #fff;
  border: none;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.shop-studio-blog-blog-post-box__content__info__actions__detail.btn-buy:hover {
  background-color: #DC8E44; /* A slightly darker shade */
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}




@media (max-width: 991px) {
  .shop-studio-blog-blog-post-box__content__info__actions {
    display: block !important;
  }
  .shop-studio-blog-blog-post-box__content__info__actions a.btn {
    display: inline-block !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}




/* -----------------------------------------------
   News Header Top Section (news1-content)
----------------------------------------------- */
.news1-header {
  position: relative;
  width: 100%;
  height: 500px; /* Adjust height as needed */
  background-color: #f0f0f0; /* Fallback background color */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;  /* Content positioned at the bottom */
  justify-content: flex-start;  /* Content positioned to the left */
  padding: 20px;
  box-sizing: border-box;
}

.news1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Dark overlay for better text contrast */
  z-index: 0;
}

.news1-title {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  padding: 10px 20px;
  margin: 0;
  border-radius: 5px;
  text-align: left;  /* Text aligned to the left */
}

.news1-title strong {
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .news1-header {
    height: 500px;
    padding: 15px;
  }
  .news1-title {
    font-size: 36px;
    padding: 8px 16px;
  }
}
/* RIGHT SIDE */
.news1-header-right {
  position: relative;
  width: 100%;
  height: 500px; 
  background-color: #f0f0f0; 
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;      
  justify-content: flex-end;  
  padding: 20px;
  box-sizing: border-box;
}

.news1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); 
  z-index: 0;
}

.news1-title-right {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9); 
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  padding: 10px 20px;
  margin: 0;
  border-radius: 5px;
  text-align: right;  
}

.news1-title-right strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .news1-header-right {
    height: 500px;
    padding: 15px;
  }
  .news1-title-right {
    font-size: 36px;
    padding: 8px 16px;
  }
}

@media only screen and (min-width: 1621px) and (max-width: 2500px) {
    .news1-title-right {
        margin-right: calc((100vw - 1620px) * (450 / 880) - 100px);
    }
}

@media only screen and (min-width: 2501px) and (max-width: 3200px) {
    .news1-title-right {
        margin-right: calc(450px + (100vw - 2500px) * 0.5 - 100px);
    }
}

@media only screen and (min-width: 3201px) {
    .news1-title-right {
        margin-right: 700px;
    }
}


/* CAN USE THIS IF INSERTING IMG IS BETTER */
/*
.newstest-header {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
}

.headertest-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: -1;        
}
*/

/*
.news1-header {
  position: relative;
  width: 100%;
  height: 500px; /
  background-color: #f0f0f0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;  
  justify-content: flex-en;
  padding: 20px;
  box-sizing: border-box;
}

.news1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); 
  z-index: 0;
}

.news1-title {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9); 
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  padding: 10px 20px;
  margin: 0;
  border-radius: 5px;
  text-align: right;
}

.news1-title strong {
  font-weight: 700;
}

.news1-header-1 {
  background: url('https://shop.onmaps.de/media/91/9e/c2/1740392252/Tourismus_AdobeStock_610472706_small (2).webp?ts=1740392252') no-repeat center center/cover;
}

.news1-header-2 {
  background: url('https://shop.onmaps.de/media/ec/4d/42/1740037419/Tourismus_AdobeStock_610472706_small_min.webp?ts=1740037436') no-repeat center center/cover;
}

.news1-header-3 {
  background: url('https://shop.onmaps.de/media/b8/b9/8d/1739788124/Tourismus_AdobeStock_610472706_bearb.webp?ts=1739788189') no-repeat center center/cover;
}

.news1-header-4 {
  background: url('https://shop.onmaps.de/media/85/ee/c8/1739788164/Sanitter_AdobeStock_409432724_bearb.webp?ts=1739889646') no-repeat center center/cover;
}

.news1-header-5 {
  background: url('https://shop.onmaps.de/media/82/a4/2c/1739889455/Agentur_AdobeStock_548537972_bearb_min.webp?ts=1739889544') no-repeat center center/cover;
}

@media (max-width: 768px) {
  .news1-header {
    height: 500px;
    padding: 15px;
  }
  .news1-title {
    font-size: 36px;
    padding: 8px 16px;
  }
}
*/

/* -----------------------------------------------
   News Header Top Section (news1-content) - Bottom Left Variant
----------------------------------------------- */
.news1-header-left {
  position: relative;
  width: 100%;
  height: 500px; 
  background-color: #f0f0f0; /* Fallback background color */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;  /* Content positioned at the bottom */
  justify-content: flex-start;  /* Content positioned to the left */
  padding: 20px;
  box-sizing: border-box;
}

.news1-overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Dark overlay for better text contrast */
  z-index: 0;
}

.news1-title-left {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  padding: 10px 20px;
  margin: 0;
  border-radius: 5px;
  text-align: left;  /* Text aligned to the left */
}

.news1-title-left strong {
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .news1-header {
    height: 500px;
    padding: 15px;
  }
  .news1-title {
    font-size: 36px;
    padding: 8px 16px;
  }
}


@media only screen and (min-width: 1800px) and (max-width: 2500px) {
    .news1-title-left {
        margin-left: calc((100vw - 1620px) * (450 / 880) - 100px);
    }
}

@media only screen and (min-width: 2501px) and (max-width: 3200px) {
    .news1-title-left {
        margin-left: calc(450px + (100vw - 2500px) * 0.5 - 100px);
    }
}

@media only screen and (min-width: 3201px) {
    .news1-title-left {
        margin-left: 700px;
    }
}



/*
.news1-header-left {
  position: relative;
  width: 100%;
  height: 500px; 
  background-color: #f0f0f0; 
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;  
  justify-content: flex-start;  
  padding: 20px;
  box-sizing: border-box;
}

.news1-overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); 
  z-index: 0;
}

.news1-title-left {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  padding: 10px 20px;
  margin: 0;
  border-radius: 5px;
  text-align: left;  
}

.news1-title-left strong {
  font-weight: 700;
}

.news1-header-1-left {
  background: url('https://shop.onmaps.de/media/91/9e/c2/1740392252/Tourismus_AdobeStock_610472706_small (2).webp?ts=1740392252') no-repeat center center/cover;
}

.news1-header-2-left {
  background: url('https://shop.onmaps.de/media/ec/4d/42/1740037419/Tourismus_AdobeStock_610472706_small_min.webp?ts=1740037436') no-repeat center center/cover;
}

.news1-header-3-left {
  background: url('https://shop.onmaps.de/media/b8/b9/8d/1739788124/Tourismus_AdobeStock_610472706_bearb.webp?ts=1739788189') no-repeat center center/cover;
}

.news1-header-4-left {
  background: url('https://shop.onmaps.de/media/85/ee/c8/1739788164/Sanitter_AdobeStock_409432724_bearb.webp?ts=1739889646') no-repeat center center/cover;
}

.news1-header-5-left {
  background: url('https://shop.onmaps.de/media/82/a4/2c/1739889455/Agentur_AdobeStock_548537972_bearb_min.webp?ts=1739889544') no-repeat center center/cover;
}

@media (max-width: 768px) {
  .news1-header-left {
    height: 500px;
    padding: 15px;
  }
  .news1-title-left {
    font-size: 36px;
    padding: 8px 16px;
  }
}

*/

/*
.news1-content {
  position: relative;
  max-width: 418px;
  width: 100%;
  height: auto;
  margin: 750px 20px 0 auto;
}
.news1-title {
  background: #FFFFFF;
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  display: inline-block;
  white-space: nowrap;
  padding: 10px;
  margin-bottom: 48px;
}
.news1-title strong {
  font-weight: 700;
}
@media (max-width: 768px) {
  .news1-content {
    max-width: 90%;
    margin: 50px auto;
  }
  .news1-title {
    font-size: 36px;

  }
}

*/
/* -----------------------------------------------
   Tourism Section
----------------------------------------------- */
/*
.tourism-content {
  position: relative;
  max-width: 418px;
  width: 100%;
 
  margin-top: 400px;
  margin-left: 60px;
  padding-left: 250px;
}
.tourism-category {
  background: #6E6E6E;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  
  text-transform: uppercase;
  
  padding: 0 13px;
}
.tourism-title {
  background: #fff;
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  display: inline-block;
  white-space: nowrap;
  padding: 0 13px;
  margin-bottom: 48px;
}
.tourism-title strong {
  font-weight: 700;
}
.tourism-button-container {
  width: 269px;
  height: 47px;
  background: #7BAE1F;
  border-radius: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.tourism-button {
  display: flex;
  
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 10px;
  width: 239px;
  
  background: transparent;
  border: none;
  cursor: pointer;
  
}
.button-text {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  
  text-transform: uppercase;
  color: #fff;
  
}
.tourism-button:hover {
  opacity: 0.8;
}
@media (max-width: 768px) {
  .tourism-content {
    max-width: 90%;
    margin-left: 20px;
    padding-left: 0;
  }
  .tourism-title {
    font-size: 36px;
    
  }
  .tourism-button-container {
    width: auto;
  }
  .tourism-button {
    flex-wrap: nowrap;
  }
}

*/




/* -----------------------------------------------
    Home Page Header Section - Slider
----------------------------------------------- */
/* Slider Container */
.tourism-slider-slider {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height on desktop */
  overflow: hidden;
}

/* Each Slide */
.tourism-slide-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 1;
}
.tourism-slide-slider.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

/* Background Image */
.tourism-background-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Content Container */
.tourism-content-slider {
  position: absolute;
  bottom: 140px;
  z-index: 3;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Align content left or right */
.tourism-content-slider.left-slider {
  left: 250px;
}
.tourism-content-slider.right-slider {
  right: 250px;
}

/* Category Styling */
.tourism-category-slider {
  background: #6E6E6E;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  text-transform: uppercase;
  padding: 0 13px;
  display: inline-block;
  border-radius: 8px;
  margin-bottom: 0;
}

/* Title Styling */
.tourism-title-slider {
  background: #fff;
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  display: inline-block;
  white-space: nowrap;
  padding: 0 13px;
  margin-bottom: 20px;
  border-radius: 8px;
}
.tourism-title-slider strong {
  font-weight: 700;
}

/* Button Container & Styling */
.tourism-button-container-slider {
  background: #7BAE1F;
  border-radius: 0 10px;
  display: inline-block;
  padding: 0 20px;
}
.tourism-button-slider {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tourism-button-slider:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
.button-text-slider {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
}

/* Slider Navigation Arrows */
.slider-arrow-slider {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 4;
  font-size: 24px;
}
.left-arrow-slider {
  left: 20px;
}
.right-arrow-slider {
  right: 20px;
}

/* Slider Dots Container */
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 100; /* Increased z-index */
}

/* Individual Dot */
.slider-dots .dot {
  width: 16px; /* Increased size */
  height: 16px;
  background: rgba(255, 255, 255, 0.8); /* More opaque */
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 0 0 2px rgba(0,0,0,0.5); /* Added subtle shadow */
}

/* Active Dot */
.slider-dots .dot.active {
  background: #7BAE1F;
}


/* Responsive Adjustments */
@media (max-width: 1200px) {
  .tourism-slider-slider {
    height: 250px;
    padding: 10px;
  }
  /* Left content remains left-aligned */
  .tourism-content-slider.left-slider {
    left: 20px;
  }
  /* Right content remains right-aligned */
  .tourism-content-slider.right-slider {
    right: 20px;
  }
  .tourism-content-slider {
    bottom: 10px;
    max-width: 90%;
  }
  .tourism-title-slider {
    font-size: 24px;
    padding: 0 13px;
    margin-bottom: 10px;
  }
  .tourism-category-slider {
    font-size: 14px;
    padding: 0 10px;
  }
  .button-text-slider {
    font-size: 8px;
  }
}

@media (max-width: 760px) {
  .tourism-slider-slider {
    height: 250px;
    padding: 10px;
  }
  .tourism-content-slider.left-slider {
    left: 20px;
  }
  .tourism-content-slider.right-slider {
    right: 20px;
  }
  .tourism-content-slider {
    bottom: 10px;
    max-width: 90%;
  }
  .tourism-title-slider {
    font-size: 24px;
    padding: 0 13px;
    margin-bottom: 10px;
  }
  .tourism-category-slider {
    font-size: 14px;
    padding: 0 10px;
  }
  .button-text-slider {
    font-size: 8px;
  }
}




/* -----------------------------------------------
    Home Page Header Section 
----------------------------------------------- */
.tourism-section {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

/* Background image */
.tourism-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://shop.onmaps.de/media/9e/d6/f8/1740037547/Tourismus_AdobeStock_610472706_small.webp?ts=1740037565') no-repeat center center;
  background-size: cover;
  z-index: 1;
}

/* Content positioned over the background */
.tourism-content {
  position: absolute;
  bottom: 140px;
  left: 250px;
  z-index: 2;
  max-width: 500px;
  flex-direction: column;
}

/* Category styling */
.tourism-category {
  background: #6E6E6E;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  text-transform: uppercase;
  padding: 0 13px;
  display: inline-block;
  border-radius: 8px;
  margin-bottom: 0;
}

/* Title styling */
.tourism-title {
  background: #fff;
  color: #7BAE1F;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  display: inline-block;
  white-space: nowrap;
  padding: 0 13px;
  margin-bottom: 20px;
  border-radius: 8px;
}
.tourism-title strong {
  font-weight: 700;
}

/* Button container styling */
.tourism-button-container {
  background: #7BAE1F;
  border-radius: 0 10px;
  display: inline-block;
  padding: 0 20px;
}

/* Button styling */
.tourism-button {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tourism-button:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.button-text {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
}

/* Responsive adjustments */
/*
@media (max-width: 1024px) {
  .tourism-content {
    bottom: 80px;
    left: 80px;
    max-width: 450px;
  }
  .tourism-title {
    font-size: 42px;
    line-height: 50px;
  }
  .tourism-category {
    font-size: 22px;
    line-height: 27px;
  }
}

@media (max-width: 768px) {
  .tourism-content {
    bottom: 40px;
    left: 20px;
    max-width: 90%;
  }
  .tourism-title {
    font-size: 36px;
    line-height: 44px;
  }
  .tourism-category {
    font-size: 18px;
    line-height: 23px;
  }
  .tourism-button-container {
    padding: 0 15px;
  }
  .button-text {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .tourism-content {
    bottom: 20px;
    left: 10px;
    max-width: 95%;
  }
  .tourism-title {
    font-size: 30px;
    line-height: 38px;
    padding: 0 10px;
  }
  .tourism-category {
    font-size: 16px;
    line-height: 20px;
    padding: 0 10px;
  }
  .tourism-button-container {
    padding: 0 10px;
  }
  .button-text {
    font-size: 10px;
  }
}

*/


@media (max-width: 1200px) {
  .tourism-section {
    height: 250px;
    padding: 10px;
  }
  .tourism-content {
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 10px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0; /* reduced gap between elements */
  }
  .tourism-title {
    font-size: 24px;       /* smaller font for mobile */
    padding: 0 13px;       /* same horizontal padding as big screens */
    margin-bottom: 10px;   /* reduced vertical spacing */
  }
  .tourism-category {
    font-size: 14px;
    padding: 0 10px;
  }
  .tourism-button-container {
    /*No Need For It Now */
  }
  .button-text {
    font-size: 8px;
  }
  .tourism-background {
  
 }
}


@media (max-width: 760px) {
  .tourism-section {
    height: 250px;
    padding: 10px;
  }
  .tourism-content {
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 10px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0; /* reduced gap between elements */
  }
  .tourism-title {
    font-size: 24px;       /* smaller font for mobile */
    padding: 0 13px;       /* same horizontal padding as big screens */
    margin-bottom: 10px;   /* reduced vertical spacing */
  }
  .tourism-category {
    font-size: 14px;
    padding: 0 10px;
  }
  .tourism-button-container {
    /*No Need For It Now */
  }
  .button-text {
    font-size: 8px;
  }
}



/* -----------------------------------------------
   Custom Products Section
----------------------------------------------- */
.custom-products-wrapper {

  padding: 10px;
}
.custom-products {
  position: relative;
  width: auto;
  max-width: 100%;
}
.custom-products .onmaps-h2 {
  margin-bottom: 10px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;

  text-transform: uppercase;
  color: #6E6E6E !important;
}
.custom-products .onmaps-h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  color: #7BAE1F !important;
}

/* -----------------------------------------------
   Product Overview Button
----------------------------------------------- */
.product-overview-button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 272px;
  height: 46px;
  margin-top: 10px;
}
.product-overview-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px 20px;
  background: #7BAE1F;
  border-radius: 0 8.5px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
.product-button-content {
  display: flex;
  align-items: center;
  gap: 8.5px;
}
.product-button-text {
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
}
.product-overview-button:hover {
  opacity: 0.8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .product-overview-button-wrapper {
    width: 100%;
    justify-content: flex-start;
  }
  .product-overview-button {
    width: 100%;
    max-width: 289px;
  }
}


/* -----------------------------------------------
   Products Section
----------------------------------------------- */
.products-section-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 2px;
}
.products-category-1 {
  font-family: 'Lato', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 31.2px;
  letter-spacing: 0.02em;
  text-align: left;
  color: #6E6E6E !important;
  margin-bottom: 1px;
}
.products-title-1 {
  font-family: 'Lato', sans-serif;
  font-size: 46px;
  font-weight: 500;
  line-height: 55.2px;
  text-align: left;
  color: #7BAE1F !important;
}
.products-title strong {
  font-weight: 700;
}
@media (max-width: 768px) {
  .products-category-1 {
    font-size: 22px;
  }
  .products-title-1 {
    font-size: 36px;
  }
}

/* -----------------------------------------------
   Frame 41 & Unser Viewer - Delted cause it was replaced with another one
----------------------------------------------- */
/*
.frame-41 {
  max-width: 700px;
  margin: 0 auto;
}
*/
.onmaps-h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6E6E6E !important;
  margin-bottom: 10px;
}
.onmaps-h5 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: #7BAE1F !important;
  margin: 10px 0;
}
.onmaps-text {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D !important;
  margin-bottom: 20px;
}
/*
.frame-81 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

*/



/* -----------------------------------------------
   Base Button Style
----------------------------------------------- */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  min-width: 180px;
  height: 47px;
  border-radius: 0 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Button Variants */
.button-outline {
  background: #FFFFFF;
  border: 2px solid #3B8EA5;
  color: #3B8EA5;
}
.button-outline:hover {
  background: #3B8EA5;
  color: #FFFFFF;
}
.button-outline .arrow {
  width: 12px;
  height: 0;
  border: 1px solid #3B8EA5;
  transition: border-color 0.3s;
}
.button-outline:hover .arrow {
  border-color: #FFFFFF;
}
.button-filled {
  background: #3B8EA5;
  color: #FFFFFF;
  border: 2px solid transparent;
}
.button-filled:hover {
  background: #FFFFFF;
  color: #3B8EA5;
  border: 2px solid #3B8EA5;
}
.button-filled .arrow {
  width: 12px;
  height: 0;
  border: 1px solid #FFFFFF;
  transition: border-color 0.3s;
}
.button-filled:hover .arrow {
  border-color: #3B8EA5;
}
@media (max-width: 768px) {
  .frame-81 {
    flex-direction: column;
    gap: 15px;
  }
  .button {
    width: 100%;
  }
}

/* -----------------------------------------------
   Custom Text Block -its used in the home-page
----------------------------------------------- */
.custom-text-block {
  position: relative;
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  border-radius: 10px;
}
.text-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.text-content {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D;
  width: 100%;
}
.button-group {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
.button.primary {
  background: #3B8EA5;
  color: #FFFFFF;
  border: none;
}
.button.primary .arrow {
  border: 1px solid #FFFFFF;
}
.button.secondary {
  background: #FFFFFF;
  border: 2px solid #3B8EA5;
  color: #3B8EA5;
}
.button.secondary .arrow {
  border: 1px solid #3B8EA5;
}
.button.primary:hover {
  background: #2E708A;
}
.button.secondary:hover {
  background: #3B8EA5;
  color: #FFFFFF;
}
.button.secondary:hover .arrow {
  border-color: #FFFFFF;
}
@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
    gap: 15px;
  }
  .button {
    width: 100%;
  }
}

/* 155 */
.button,
.button span {
    text-decoration: none !important;
}

.button:hover,
.button:hover span {
    text-decoration: none !important;
}


/* -----------------------------------------------
   Onmaps Text Block
----------------------------------------------- */
.onmaps-text-block {
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.onmaps-h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6E6E6E !important;
  margin: 0;
}
.onmaps-h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  color: #7BAE1F !important;
  margin: 0;
}
.onmaps-lead-text {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #4D4D4D !important;
  max-width: 1200px;
  margin: 0;
}
@media (max-width: 1024px) {
  .onmaps-text-block {
    padding: 30px 10px;
  }
  .onmaps-h3 {
    font-size: 36px;
    line-height: 45px;
  }
  .onmaps-lead-text {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 768px) {
  .onmaps-text-block {
    text-align: center;
  }
  .onmaps-h3 {
    font-size: 28px;
    line-height: 38px;
  }
  .onmaps-lead-text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* -----------------------------------------------
   Shopware Text Block
----------------------------------------------- */


.shopware-text-block {
  position: relative;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;                
  padding: 60px;                 
  display: flex;
  flex-direction: column;
  align-items: flex-start;       
  gap: 20px;
  text-align: left;              
  z-index: 10;
  background: transparent;       
  border-radius: 0;              
  overflow: visible;
  align-items: center; 
  text-align: center;    
}
/*
.shopware-text-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(244, 158, 76, 0.9);
  z-index: -1;
  pointer-events: none;
}
*/

/*NEW*/
.shopware-text-block.bg-blue {
  background: #3B8EA0;  /* Blau  */
}

.shopware-text-block.bg-green {
  background: #7BAE1F;  /* Grün */
}

.shopware-text-block.bg-orange {
  background: #F49E4C;  /* Orange */
}

.shopware-text-block .slider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #FFFFFF;
  border-radius: 0 10px;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
  margin-top: 20px;
}

.shopware-text-block .slider-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.shopware-text-block .slider-button span {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.shopware-text-block .slider-button::after {
  content: ' →';
  font-size: 14px;
  color: #FFFFFF;
  margin-left: 5px;
}

.shopware-text-block .slider-button.secondary {
  background: rgba(255, 255, 255, 0.4);
  border-color: #FFFFFF;
}

.shopware-text-block .slider-button.secondary:hover {
  background: rgba(255, 255, 255, 0.5);
}









/*
.shopware-text-block::before {
  content: "";
  position: absolute;
  top: -15%;
  left: 0;
  width: 130%;
  height: 130%;
  background: rgba(244, 158, 76, 0.9);
  z-index: -1;
  pointer-events: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}


.shopware-text-block h4,
.shopware-text-block h5,
.shopware-text-block p {
  color: #FFFFFF;
  margin: 0;
  max-width: 100%;
}


.shopware-text-block .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #FFFFFF;
  border-radius: 0 10px;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
  margin-top: 20px;
}

.shopware-text-block .button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.shopware-text-block .button span {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.shopware-text-block .button::after {
  content: ' →';
  font-size: 14px;
  color: #FFFFFF;
  margin-left: 5px;
}
*/
/* Rounded images with 8px on all corners */
.img-fluid.image-slider-media {
  border-radius: 8px;
}

@media (max-width: 1200px) {
  .shopware-text-block {
    width: 95%;
    padding: 40px 0;
    margin: 30px auto;
  }
  .shopware-text-block h4,
  .shopware-text-block h5,
  .shopware-text-block p {
    width: 90%;
  }
}
@media (max-width: 1024px) {
  .shopware-text-block {
    width: 90%;
    padding: 40px 0;
  }
  .shopware-text-block h4,
  .shopware-text-block h5,
  .shopware-text-block p {
    width: 85%;
  }
}
@media (max-width: 768px) {
  .shopware-text-block {
    width: 95%;
    padding: 35px 0;
  }
  .shopware-text-block h4,
  .shopware-text-block h5,
  .shopware-text-block p {
    width: 80%;
  }
  .shopware-text-block .button {
    width: 200px;
    padding: 12px 20px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .shopware-text-block {
    width: 100%;
    padding: 30px 0;
  }
  .shopware-text-block h4,
  .shopware-text-block h5,
  .shopware-text-block p {
    width: 90%;
  }
  .shopware-text-block .button {
    width: 180px;
    padding: 10px;
    font-size: 12px;
  }
}

/* -----------------------------------------------
   News Section
----------------------------------------------- */
.news-header {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 80px;
}
.news-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  margin: 0;
}
.news-subtitle {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  color: #FFFFFF !important;
  margin-top: 15px;
}
.sw-cms-block-news-title {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 80px;
}
.sw-cms-block-news-title .news-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
}
.sw-cms-block-news-title .news-subtitle {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  color: #FFFFFF;
  margin-top: 15px;
}

/* -----------------------------------------------
   Über uns Section Orginal one - try to replace it 
   since figma is $$$
----------------------------------------------- */
.uber-uns * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.uber-uns {
  background-color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  line-height: 1.5;
  color: #4D4D4D;
}
.uber-uns .container {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0;
}
.uber-uns h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 55px;
  text-transform: uppercase;
  color: #7BAE1F !important;
  margin-bottom: 20px;
}
.uber-uns h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6E6E6E !important;
  margin-bottom: 5px; /*Figma 20px*/
}
.uber-uns h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 55px;
  text-transform: uppercase;
  color: #7BAE1F !important;
  margin-bottom: 20px;
}
.uber-uns h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6E6E6E !important;
  margin-bottom: 20px;
}
.uber-uns h5 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #7BAE1F !important;
  margin-bottom: 20px;
}
.uber-uns p {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #4D4D4D !important;
  margin-bottom: 20px;
}
.uber-uns ul,
.uber-uns li {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D !important;
  list-style: disc;
  margin-left: 40px;
  margin-bottom: 10px;
}
.uber-uns .slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 360px;
  gap: 10px;
  background-color: #8AD9D4;
  max-width: 1420px;
  margin: 0 auto 40px;
}
.uber-uns .rotated-text {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(110, 110, 110, 0.5);
  transform: rotate(-12deg);
  margin-bottom: 20px;
}


/* White Text Variant for Über uns */
.uber-uns-white,
.uber-uns-white h1,
.uber-uns-white h2,
.uber-uns-white h3,
.uber-uns-white h4,
.uber-uns-white h5,
.uber-uns-white p,
.uber-uns-white li {
  color: #FFFFFF !important;
}
@media (max-width: 768px) {
  .uber-uns .container {
    padding: 0 20px;
  }
  .uber-uns h1 {
    font-size: 36px;
    line-height: 42px;
  }
  .uber-uns h2 {
    font-size: 22px;
    line-height: 27px;
  }
}

/* -----------------------------------------------
   Team Cards (Über uns)
----------------------------------------------- */
.uber-uns-per-teammember-card {
  position: relative;
  width: 340px;
  height: 340px;
  overflow: hidden;
  border-radius: 8px;
  margin: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.uber-uns-per-teammember-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.uber-uns-per-card {
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
}
.uber-uns-per-person-image {
 /*  max-width: 300px; */ 
  width: 100%;
  height: -webkit-fill-available; /*auto*/
  object-fit: cover;
  aspect-ratio: 1 / 1; /* For square images */
  display: block;
  transition: transform 0.3s ease;
}
.uber-uns-per-card:hover .uber-uns-per-person-image {
  transform: scale(1.05);
}
.uber-uns-per-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-height: 100%;
  transform: translateY(100%);
  background: rgba(0, 0, 0, 0.75);
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
  overflow-y: auto;
}
.uber-uns-per-overlay .uber-uns-per-name,
.uber-uns-per-overlay .uber-uns-per-position {
  color: #fff !important;
}
.uber-uns-per-card:hover .uber-uns-per-overlay,
.uber-uns-per-card.active .uber-uns-per-overlay {
  transform: translateY(0);
}
.uber-uns-per-info {
  width: 100%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
}
.uber-uns-per-name {
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 5px;
  color: #fff;
}
.uber-uns-per-position {
  font-size: 10px;
  line-height: 1.2;
  margin-bottom: 15px;
  color: #fff;
}
.uber-uns-per-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uber-uns-per-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uber-uns-per-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #fff;
}
.uber-uns-per-contact-text {
  font-size: 12px;
  line-height: 1.2;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.6);
  animation: ripple 600ms linear;
  pointer-events: none;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* -----------------------------------------------
   Daten und Fakten Section (Über uns)
----------------------------------------------- */
.uber-uns-df {
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.uber-uns-df-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding-top: 54px;
}
.uber-uns-df-header {
  text-align: center;
  margin-bottom: 40px;
}
.uber-uns-df-tagline {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #747474;
  margin: 0;
}
.uber-uns-df-title {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 58px;
  color: #747474;
  margin-top: 10px;
}
.uber-uns-df-blocks {
  display: flex;
  flex-direction: column;
  gap: 15px; /*30 px*/
}
.uber-uns-df-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.uber-uns-df-block {
  box-sizing: border-box;
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1 1 calc(33.33% - 20px);
  max-width: 460px;
}
.uber-uns-df-block:hover {
  transform: none;
}
.uber-uns-df-icon-container {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uber-uns-df-icon {
  font-size: 100px;
  color: #fff;
  transition: transform 0.3s ease;
}
.uber-uns-df-block:hover .uber-uns-df-icon {
  transform: scale(1.2);
}
.uber-uns-df-text {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.uber-uns-df-fact {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 38px;
  color: #fff;
  margin-bottom: 8px;
}
.uber-uns-df-description {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
}



/* -----------------------------------------------
   Daten und Fakten Section (Über uns) - Black Version
----------------------------------------------- */
.uber-uns-df-black {
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.uber-uns-df-content-black {
  box-sizing: border-box;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding-top: 54px;
}
.uber-uns-df-header-black {
  text-align: center;
  margin-bottom: 40px;
}
.uber-uns-df-tagline-black {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #747474;
  margin: 0;
}
.uber-uns-df-title-black {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 58px;
  color: #747474;
  margin-top: 10px;
}
.uber-uns-df-blocks-black {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.uber-uns-df-row-black {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.uber-uns-df-block-black {
  box-sizing: border-box;
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1 1 calc(33.33% - 20px);
  max-width: 460px;
}
.uber-uns-df-block-black:hover {
  transform: none;
}
.uber-uns-df-icon-container-black {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uber-uns-df-icon-black {
  font-size: 100px;
  color: #000;
  transition: transform 0.3s ease;
}
.uber-uns-df-block-black:hover .uber-uns-df-icon-black {
  transform: scale(1.2);
}
.uber-uns-df-text-black {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.uber-uns-df-fact-black {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 38px;
  color: #fff;
  margin-bottom: 8px;
}
.uber-uns-df-description-black {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
}

/* -----------------------------------------------
   Daten und Fakten Section (Über uns) - Green Version
----------------------------------------------- */
.uber-uns-df-green {
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.uber-uns-df-content-green {
  box-sizing: border-box;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding-top: 54px;
}
.uber-uns-df-header-green {
  text-align: center;
  margin-bottom: 40px;
}
.uber-uns-df-tagline-green {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #747474;
  margin: 0;
}
.uber-uns-df-title-green {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 58px;
  color: #747474;
  margin-top: 10px;
}
.uber-uns-df-blocks-green {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.uber-uns-df-row-green {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.uber-uns-df-block-green {
  box-sizing: border-box;
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1 1 calc(33.33% - 20px);
  max-width: 460px;
}
.uber-uns-df-block-green:hover {
  transform: none;
}
.uber-uns-df-icon-container-green {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uber-uns-df-icon-green {
  font-size: 100px;
  color: #7BAE1F;
  transition: transform 0.3s ease;
}
.uber-uns-df-block-green:hover .uber-uns-df-icon-green {
  transform: scale(1.2);
}
.uber-uns-df-text-green {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.uber-uns-df-fact-green {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 38px;
  color: #fff;
  margin-bottom: 8px;
}
.uber-uns-df-description-green {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
}