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



body.is-invisible {
  opacity: 0;
}

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

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

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


.body {
  overflow: hidden !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;
}

.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 **/
/*****************/

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

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

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

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

}


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

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

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


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