:root {
  --ash-50: #979797;
  --ash-100: #303030;
  --cottom-50: #F6F6F0;
  --cottom-80: #F1F0E7;
  --cotton-20: #FCFBF9;
  --accent: #1e3f2c;
  --Sensitiv: #A6BDD0;
  --Pur: #D37159;
  --Junior: #EDAD9D;
  --Vital: #EAC66B;
  --Poletto: #172541;

}

/* FIX */
/* Startseite */
#item-17869991204211 h1, #item-17869241029662 h1, #item-17869241103092 h1  {
    font-size: 56px !important;
}


/* Tablet portrait */
@media (max-width: 1024px) {
    #item-17869991204211 h1,
    #item-17869241029662 h1,
    #item-17869241103092 h1 {
        font-size: 44px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #item-17869991204211 h1,
    #item-17869241029662 h1,
    #item-17869241103092 h1 {
        font-size: 32px !important;
    }
}


/* Add a circular ring around the active slideshow dot icon */
.slideshow-wrapper > .ba-slideshow > .ba-slideshow-dots > div.active  {
    /*color: var(--ash-100) !important;*/
}

body.is-invisible {
  opacity: 0;
}

body {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1.2s; /* Zeit bis der Fade beginnt */

   background: var(--cottom-50);
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Optionale Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
  body {
    opacity: 1 !important;
    animation: none !important;
  }
}


.body {
  overflow: hidden !important;
}

.ba-gridbox-page {
   background: var(--cottom-50);
}

.hardys-section hr {
 background-color: var(--accent) !important;
  height: 1px;
}

/* Merkmalsbox*/
.hardys-section .ba-feature-box-wrapper {
flex-wrap: nowrap !important;
}

/************/
/* MAIN NAV */

@media (min-width: 769px){
    .header-slider .ba-slideshow-caption:before {
        border: 10px solid rgba(89, 197, 112, 0.5);
        content: "";
        height: 300px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50% )rotate(45deg);
        -webkit-transform: translate(-50%, -50% )rotate(45deg);
        width: 300px;
        z-index: -1;
    }

    .header-slider:before {
        border: 50vw solid #fff;
        border-top: 150px solid transparent;
        border-bottom: 0;
        bottom: 0;
        content: "";
        position: absolute;
        z-index: 5;
  }
  
  .gridbox .header-slider:before {
    	left: -50px;
  }
  
  .header {
  	transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
  }
  
  .header.fixed-header {
  		background: #1a1a1a;
  }
  
  .section-triangle:after {
    border: 50vh solid #1a1a1a;
    border-right: 49vh solid transparent;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: calc(100vw - 100vh);
    z-index: 0;
	}
}


/* END MAIN NAV */
/****************/

.hardys-section .btn-primary {
	background-color: transparent;
 
}

@media (max-width: 420px) {
 	  .hardys-section .btn-primary a{
    /*width: 100% ;*/
  }
}

.btn-pur a {
	background: var(--Pur);
}

.btn_shop-mobile a {
	width: 83%;  
  justify-content: start;
}

.close-menu i {
		position: absolute;
    top: 40px;
    right: 32px;
}

/* fix button margin */
.hardys-section .ba-item-button.btn-primary {
      margin-top: 12px !important;
    margin-bottom: 12px !important; 
}

/* fix Video Height */
.hardys-section .ba-slideshow-img video, .hardys-section .ba-video-background video, .hardys-section .ba-video-background iframe, .hardys-section .ba-slideshow-img iframe {
		height: 100%;
    width: 100vw;
    object-fit: cover;
    /* left: 0px; */
    position: initial !important;
}

.hardys-section .ba-slideshow-img div {
 		height: 100% 
}

/* Adds a subtle shadow behind text for better readability */
.soft-text-shadow .content-text h1,
.soft-text-shadow .content-text h2,
.soft-text-shadow .content-text h3,
.soft-text-shadow .content-text h4,
.soft-text-shadow .content-text p,
.soft-text-shadow .content-text span {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.soft-image-shadow {
filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.5))
        
}

.hardys-section.productlines-section .column-wrapper {
        justify-content: center;
}

.heading-border-l.pur {
   border-left: 5px solid var(--Pur);
}

.heading-border-l.vital {
   border-left: 5px solid var(--Vital);
}

.heading-border-l.sensitiv {
   border-left: 5px solid var(--Sensitiv);
}

.heading-border-l.poletto {
   border-left: 5px solid var(--Poletto);
}

.heading-border-l.junior {
   border-left: 5px solid var(--Junior);
}

.heading-border-l.craft {
   border-left: 5px solid var(--Sensitiv);
}

.heading-border-l.basic {
   border-left: 5px solid var(--ash-100);
}

.heading-border-l {
 /*padding-left: 8px;*/
 /*margin-left: 12px;*/
  /* deactivate border instead of remove it from all templates*/
  margin-left:0px;
  padding-right: 0px;
  border-left-width: 0px !important;
}

/*****************/
/**** Columns ****/

.col-gap-32 .column-wrapper {
	column-gap: 32px;  
}

.flex-no-clearfix .column-wrapper::before,
.flex-no-clearfix .column-wrapper::after {
    content: none !important;
    
}

/** END Columns **/
/*****************/


/********************/
/**** SLIDER NAV ****/


.ba-slideset-nav a {
  /*border-radius: 0px;
  background-color: var(--secondary) !important;*/
}

/* Places the caption content centered near the bottom */
.caption-description-top .ba-slideshow-caption {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: start;
    padding-bottom: 0px;
    bottom: -24px !important;
  padding-left:2px
    
}

/* Moves the description above the title */
.caption-description-top .slideshow-description-wrapper {
    order: 1;
  padding-left:16px
}

.caption-description-top .ba-slideshow-description {

}

/* Moves the title below the description */
.caption-description-top .slideshow-title-wrapper {
    order: 2;
    padding-left:16px
}

.caption-description-top .ba-slideshow-title { 
    line-height: 20px !important;
    margin-bottom: 32px !important;
    margin-top: 0px !important;
 
}

/** END SLIDER NAV  **/
/***********************/



/* ================================================
   Base bleed system for Gridbox (Hardys Layout)
   ================================================ */

/* prevent clipping when columns/images overflow */
.ba-section, .ba-row, .ba-grid-column {
  overflow: visible;
}

/* equal height alignment between image/text columns */
.stretch-row {
  align-items: stretch !important;
}

/* remove default padding in bleed columns/items */
.ba-grid-column[class*="bleed-"],
.ba-item-image[class*="bleed-"] {
  padding: 0;
  max-width: none;
  position: relative;
}

/* === RIGHT BLEED variants === */
.ba-grid-column.bleed-right-30,
.ba-item-image.bleed-right-30 {
  width: calc(100% + (30vw - 50%));
  margin-right: calc(50% - 30vw);
}

.ba-grid-column.bleed-right-40,
.ba-item-image.bleed-right-40 {
  width: calc(100% + (40vw - 50%));
  margin-right: calc(50% - 40vw);
}

.ba-grid-column.bleed-right-50,
.ba-item-image.bleed-right-50 {
  width: calc(100% + (50vw - 50%));
  margin-right: calc(50% - 50vw);
}

/* === LEFT BLEED variants === */
.ba-grid-column.bleed-left-30,
.ba-item-image.bleed-left-30 {
  width: calc(100% + (30vw - 50%));
  margin-left: calc(50% - 30vw);
  /*left: calc(50% - 23vw);*/
}

.ba-grid-column.bleed-left-40,
.ba-item-image.bleed-left-40 {
  width: calc(100% + (40vw - 50%));
  margin-left: calc(50% - 40vw);
	left: calc(50% - 25vw);
}

.ba-grid-column.bleed-left-3,
.ba-item-image.bleed-left-3 {
  width: calc(100% + (40vw - 50%));
  margin-left: calc(50% - 40vw);
}


.ba-grid-column.bleed-left-50,
.ba-item-image.bleed-left-50 {
  width: calc(100% + (50vw - 50%));
  margin-left: calc(50% - 50vw);
	left: calc(50% - 25vw);
}

.ba-grid-column.bleed-left-text,
.ba-item-image.bleed-left-text {
  width: calc(100% + (50vw - 50%));
  margin-left: calc(50% - 50vw);
}

.ba-grid-column.bleed-left-quality,
.ba-item-image.bleed-left-quality {
  width: calc(100% + (50vw - 50%)) !important;
  margin-left: calc(50% - 50vw);

}

.ba-grid-column.bleed-right-quality,
.ba-item-image.bleed-right-quality {
  width: calc(100% + (50vw - 50%)) !important;
  margin-right: calc(50% - 50vw);

}

/********************/
/* New Bleed Images */
/********************/

/* Allow image items to visually leave their Gridbox column on large screens */
@media (min-width: 1440px) {
  .ba-row-wrapper,
  .ba-row,
  .column-wrapper,
  .ba-grid-column-wrapper,
  .ba-grid-column {
    overflow: visible;
  }

  /* Base setup for wide edge images */
  .ba-item-image.edge-wide-left,
  .ba-item-image.edge-wide-right {
    --edge-image-extra-width: 400px;
    --edge-image-max-width: 1000px;
    --edge-image-position: center center;
    --edge-image-width: min(
      calc(100% + var(--edge-image-extra-width)),
      var(--edge-image-max-width)
    );

    position: relative;
    max-width: none;
    padding: 0;
    height: 100%;
  }

  /* Make the Gridbox image wrapper fill the image item */
  .ba-item-image.edge-wide-left .ba-image-wrapper,
  .ba-item-image.edge-wide-right .ba-image-wrapper {
    width: 100%;
    height: 100%;
  }

  /* Make the actual image cover the full enlarged area */
  .ba-item-image.edge-wide-left img,
  .ba-item-image.edge-wide-right img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: var(--edge-image-position);
  }

  /* Break out to the left, but respect max width */
  .ba-item-image.edge-wide-left {
    width: var(--edge-image-width);
    margin-left: calc(100% - var(--edge-image-width));
  }

  /* Break out to the right, but respect max width */
  .ba-item-image.edge-wide-right {
    width: var(--edge-image-width);
    margin-right: calc(100% - var(--edge-image-width));
  }
}


/* Reset wide edge images below desktop breakpoint */
@media (max-width: 1439px) {
  .ba-item-image.edge-wide-left,
  .ba-item-image.edge-wide-right {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: auto;
  }

  /* Keep images proportional below desktop breakpoint */
  .ba-item-image.edge-wide-left img,
  .ba-item-image.edge-wide-right img {
    width: 100%;
    height: auto !important;
    max-width: 100% !important;
    object-fit: initial;
  }
}

/* Make tablet image columns stretch vertically */
@media (min-width: 768px) and (max-width: 1439px) {
  .ba-grid-column-wrapper:has(.edge-wide-left),
  .ba-grid-column-wrapper:has(.edge-wide-right) {
    display: flex;
  }

  .ba-grid-column:has(.edge-wide-left),
  .ba-grid-column:has(.edge-wide-right) {
    display: flex;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100%;
  }

  .ba-item-image.edge-wide-left,
  .ba-item-image.edge-wide-right {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .ba-item-image.edge-wide-left .ba-image-wrapper,
  .ba-item-image.edge-wide-right .ba-image-wrapper {
    width: 100%;
    height: 100%;
  }

  .ba-item-image.edge-wide-left img,
  .ba-item-image.edge-wide-right img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: var(--edge-image-position, center center);
  }
}

/*******************/
/**** Accordion ****/
/*******************/


.accordion-group {
 	border: 1px solid var(--ash-50) !important;
	border-radius: 8px !important;
  margin-bottom: 8px !important;
}

.accordion-group .accordion-heading {
 	 border-radius: 8px !important;
}

/***********************/
/**** FAQ ACCORDION ****/

.accordion-inner {
	border-radius: 8px;
}

/** END FAQ ACCORDION **/
/***********************/


 .bleed-left-text .ba-image-item-caption {
    right: 11vw !important;
    width: 30% !important;
    left: unset !important;

}

.ba-item-before-after-slider.before-after-custom .ba-before-after-wrapper {
 	 width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* === IMAGE FIT === */
.ba-item-image .ba-image-wrapper {
  height: 100%; /* let wrapper fill column */
}
.ba-item-image .ba-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop intelligently */
  display: block;
}

.hardys-section {
  
	/*padding-left: 60px !important;*/
  /*padding-right: 60px !important;*/
}

/* optional: limit image height to a comfortable max on large screens */
@media (min-width: 992px) {
  .ba-item-image .ba-image-wrapper img {
    max-height: 80vh;
  }
}

/* === MOBILE RESET === */
@media (max-width: 991px) {
  .ba-grid-column[class*="bleed-"],
  .ba-item-image[class*="bleed-"] {
    width: 100%;
    margin: 0;
  }
}

/* Produkt Link Arrow */
.read-more-link .ba-button-wrapper i  { 
margin-left: 5px !important;
}

.divider-line {
	 width: 100% !important;
}

.divider-line-dark {
	 width: 100% !important;
	height: 1px;
  background: var(--accent);
  opacity: 0.5;
  
}

.btn-block {
 	width: 100% !important; 
}

.btn-block a {
 	width: 100% !important; 
}

.btn-underline {
  border-bottom: 1px solid #303030; 
padding-bottom: 14px
}

.ba-icon-list-wrapper li {
	margin-bottom: -32px; 
}

/**** FOOTER ****/

.footer-menu .mod-menu .nav-item a {
 	padding-left: 0px !important;
}

.footer.social-icons li span{
	display: none;
}

.footer.social-icons li{
	margin-right: 0px;
}


/**** JOURNAL ****/

.hardys-journal {
  
}


/**** DIALOG SECTION ****/

.hardys-section.dialog-section {
  
}

.dialogbox-check-icon .ba-icon-wrapper {
	position: absolute !important;
  right: -4px !important;
  top:-50px
}


/**** SECTION-2 ****/

.section-2 p {
	 margin-bottom: 8px !important;
}

/**** USPBOX ****/

.uspbox-section .ba-feature-list-layout .ba-feature-image-wrapper,
.hardys-section .ba-feature-list-layout .ba-feature-image-wrapper {
    margin-right: 0px;
}

.ba-feature-box {
	display:contents !important;
}

@media (max-width: 768px) {
 	 .ba-feature-box  i {
			display: none!important;
	}
}

/**** BEFORE AFTER ****/

.hardys-icon-list i {
  margin-right: 4px !important;
}


/**** Responsive Design ****/


/* Base styles – Laptop/Desktop (>=1440px)
   No media query needed */

/* Tablet Querformat (bis 1439px) */
@media (max-width: 1439px) {
  /* Styles for Tablet Landscape */
  [class*="ba-col-"]:first-child {
    margin-left: 0;
	}
  [class*="ba-col-"] {
  	margin-left: 0px;
	}
  
  /************/
  /* MAIN NAV */

  .hardys-main-nav .row-with-menu {
     margin-top: 8px !important;
     margin-bottom: 8px !important;
  }


  /* END MAIN NAV */
  /****************/
  
}

/* Tablet Hochformat (bis 1279px) */
@media (max-width: 1279px) {
  /* Styles for Tablet Portrait / Mobiles Menü */
  
}

/* Phone Querformat (bis 1023px) */
@media (max-width: 1023px) {
  /* Styles for Phone Landscape */
}

/* Phone Hochformat (bis 767px) */
@media (max-width: 767px) {
  /* Styles for Phone Portrait */
  .ba-grid-column[class*="bleed-"],
.ba-item-image[class*="bleed-"] {
  position: initial;
	}
  
   .bleed-left-text .ba-image-item-caption {
    right: 0px !important;
    width: 90% !important;
    left: 0px !important;

	}
  
  .hardys-section h1 {
  	font-size: 1.7rem !important;
  }

	.hardys-section h2 {
  	font-size: 1.5rem !important;
  }
  
  .hardys-section h3 {
  	font-size: 1.3rem !important;
  }
}

/* Extra small (unter 420px – z. B. sehr kleine Geräte) */
@media (max-width: 419px) {
  /* Styles for very small screens */
}


/* Widerruf */

.hardys-widerruf .ba-field-label-wrapper {
 	display: none; 
}
.hardys-widerruf .input, .hardys-widerruf .textarea {
 	font-family: "Univers LT Pro Std" sans-serif !important;
}