/*----------------------------------------------------------------------------------------------------------*/
/*------------------------------------------SEO STARTSEITEN CARDS-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------*/


/* Basisstyles für beide Buttons */
button {
  font-family: 'Open Sans', sans-serif;
  font-size: 15.6px;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  float: right;
  padding-right: 2em;
  border: 0;  
}

/* Outline-Button (weiß mit rotem Rand) */
.btn-outline-red {
	background: white;
	color: rgba(176, 12, 40, 1);             /* dunkelrot */
	border: 2px solid rgba(176, 12, 40, 1);
	font-family: 'Open Sans', sans-serif;
	font-size: 15.6px;
	padding: 0.6em 1.2em;
	  padding-right: 1.2em;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	padding-right: 2em;
	text-decoration: none;
}

.btn-outline-red:hover,
.btn-outline-red:focus {
  background: #f9e1e1;      /* leichter rot-Schatten beim Hover */
  color: #900;
}

/* Gefüllter roter Button */
.btn-filled-red {
	background: rgba(176, 12, 40, 1);
	color: white;
	border: 2px solid rgb(176, 12, 40);
	font-family: 'Open Sans', sans-serif;
	font-size: 15.6px;
	padding: 0.6em 1.2em;
	  padding-right: 1.2em;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	padding-right: 2em;
	text-decoration: none;
}

.btn-filled-red:hover,
.btn-filled-red:focus {
  background: #900;     /* #A00030 */
  border-color: #900;
}

/* Fokus-Styling für Accessibility: Alternativ zu default Outline */
.btn-outline-red:focus,
.btn-filled-red:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(176, 0, 0, 0.4);  
}

.btn-filled-red img {
	padding-right: 5px;
	vertical-align: middle;
}

hr {
	border: none;
	height: 1px;
	background-color: #d86c6c; 
	margin-top: 3em;
	margin-bottom: 3em;
}
	
h1 {
	font-size: 2.2em;
	font-weight: 400;
	
}
h2 {
	font-size: 1.2em;
	
}
h3 {
	/* font-size: 1.0em; */
	/* color: #fff; */
	/* font-style: italic; */
	
}

table tr td {
	/* vertical-align: middle !important; */
	padding: 0px !important;
	text-align: center !important;
	border-top: #c8b5b5 !important;    
}

section {
	border: none !important;	
}



	.abpreis {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.8em;
		font-weight: bold;	
	}


	.table-material {
		background-color: #FFFFFF !important;
		margin-top: 2.0em;
		width: 100%;
		font-family: 'Open Sans', sans-serif;
		border-collapse: collapse;
		min-width: 700px;
		text-align: center;
		border-radius: 12px;      /* 🔴 abgerundete Ecken */
		overflow: hidden;         /* damit Ecken auch wirken */
    }

    .table-material th {
      /* border: 1px solid #b80000; */ /* Rot wie im Bild */ 
	  border: 1px solid #ffffff; /* Rot wie im Bild */
      padding: 8px;
      vertical-align: middle;
 
    }

    .table-material td {
      padding: 8px;
      vertical-align: middle;
 
    }

    .table-material th {	  
      background-color: #b80000;
      color: #fff;
      font-weight: bold;
    }

    .table-material td:not(:first-child) {	  
		border-left: 1px solid #b80000 !important;
    }
	

    /* Stoffproben-Bilder */
    .table-material .sample {
      width: 100%;
      height: 50px; 
      object-fit: cover;

    }

   
    .table-material tr:nth-child(2n+1) td {     
	  background-color: #efefef !important;	   
    }

    .table-material tr:nth-child(2n) td {
      background-color: #fff !important; 	 
    }

    /* Häkchen */
    .table-material .check {
      color: green;
      font-size: 1.2em;
      font-weight: bold;
    }



/* .slider { position: relative; width: 300px; height: 180px; margin: 20px auto; border: 2px solid #ccc; border-radius: 8px; overflow:hidden; } */

/* .insektenschutz-slider { */
.slider {
	display: flex;
	overflow: hidden;     /* verhindert Scrollbalken */
	width: 100%;
	position: relative;	
	flex-direction: column;
	/* max-width: 90%; */
	margin-top: 1em;
	margin-bottom: 1em;
	font-family: 'Open Sans', sans-serif;
    padding: 0px;
	border-radius: 10px;



}

	.slides-track {
		display: flex;
		transition: transform 0.5s ease;
		width: 80%;
	}

	.slides {
		display: flex;
		transition: transform 0.4s ease;
	}


	
	.insektenschutz-slide:not(.peek) {	  
		display: none;
		/* display: flex; */
		flex: 0 0 100%;       /* jede Slide nimmt 100% Breite */
		box-sizing: border-box;	  
		color: white;
		margin-left: 0px;
		width: 100%;
		min-width: 100%;
		min-height: 272px;
	}

	.insektenschutz-slide.active:not(.peek) { 
		display: flex; /* Nur die aktive Slide sichtbar */ 
	}
	
	.insektenschutz-slide-red {	  
		background: #a00030;
	}	
	
	.insektenschutz-slide img {
	  width: 100%;
	  border-radius: 5px;
	  object-fit: cover;	  
	}	
	
	.insektenschutz-slide-grey {	
		background: #F1F3F4;
		color: #000000;
	}	
	
	.insektenschutz-slide-grey h3 {
		color: #000000;
	}
	
	

	
	/* --- Peek-Slider --- */
	.insektenschutz-slider.peek {
		display: flex;
		overflow: hidden;
	}
	.insektenschutz-slider.peek .slides {
		display: flex;
		transition: transform 0.5s ease;
	}
	.insektenschutz-slider.peek .slide {
		/* display: block;        */    /* sichtbar lassen */ 
		flex: 0 0 70%;             /* sichtbare Fläche */
		margin-right: 30%;         /* 30 % Einblick in den nächsten Slide */
		transition: transform 0.5s ease;
	}	
	
	
	
	
	/* .insektenschutz-slide.peek .slide {	  	  */
		/* overflow: hidden; */
		
		/* display: flex; */
		/* flex: 0 0 70%; */
		/* margin-right: 30%;	   */
	/* }	 */
	
	
	.slide-card {		
		display: flex;
		flex-direction: column;
		/* max-width: 90%; */
		margin: 2.5em auto;
		font-family: 'Open Sans', sans-serif;
		width: 15%;
		padding: 0px;
	}


	.slide-footer-grey span { 
		 color: #000000; 
	} 	

	.slide-footer-grey button span { 
		 color: #FFFFFF; 
	} 
	
	.slide-overlay {
		position:relative;
		/* top: -46px; */
		margin: -46px !important;
		margin-left: 0px !important;
		background:#f5f5f5;
		width: 65%;
		display: flex;
		margin: 0px;
		border-top-right-radius: 35px;
		/* height: 0px; */
	}
	
	.slide-text-box {
		max-width:420px;
		text-align:left;
	}	
	
	.slide-overlay-bild {
		width: 45% !important;
		/* height: 15%; */
	}

	.slide-overlay-text {
		position: relative !important;
		top: 0px !important;
		left: 1px !important;
		font-size: 0.9em;
		width: 100% !important;
		color: #A00030;
		margin: 0.75em;
		text-transform: uppercase;
	}
	
	.slide-overlay-text_ueber {
		font-size: 0.75em;
		
	}

	.slide-footer {
		width: 90%;
	}

	.slide-preis {
		color: white;
	}
	.slide-preis-zahl {
		color: white;
		font-size: 2.5em;
	}

 
	.slider-content {
		width: 75%;
		color: white;		
		font-size: 0.9em;
		color: black;
		padding-top: 3em;
		
	}

	.slider-content h3  {		
		color: white;
		font-size: 16px;
		font-style: italic;
	}

	.slider-content-grey h3 { 
		color: #000000 !important; 
	} 
	.grey { 
		color: #000000 !important;
	}
	.slider-content p {
		color: white;
		font-weight: 200 !important;
		font-size: 16px;
	}

	.slide-konfig-bild {
		width: 15% !important;
		padding-right: 5px;
			
	}






	/* ############## Montage ############## */

	
	.montage-slide-card {
		display: flex;
		flex-direction: column;
		/* max-width: 90%; */
		
		margin: 2rem auto;
		margin-top : 0em;
		font-family: 'Open Sans', sans-serif;
		margin-left: 0em;
		width: 50%;
		padding: 0px;
		margin-bottom: -20px;
	}

	.montage-slide-overlay {
		position:relative;
		top: -46px;
		background: #b00;
		width: 25%;
		display: flex;
		margin: 0px;
		border-top-right-radius: 35px;
		/* height: 0px; */
	}
	
	.montage-slide-text-box {
		max-width: 420px;
		text-align: left;
	}
	
	.montage-slide-overlay-bild {
		width: 20% !important;
		margin: 8px;
		/* height: 15%; */
	}

	.montage-slide-overlay-textbild {
		width: 75% !important;
		height: 75%; 
		margin-top: 3px;
	}

	.montage-slide-overlay-text {
		position: relative !important;
		top: 2px !important;
		left: 1px !important;
		font-size: 0.9em;
		width: 100% !important;
		color: #fff;
		margin: 0.75em;
		text-transform: uppercase;
	}
	
	.montage-slide-overlay-text-ueber {
		font-size: 0.75em;
		
	}

	.montage-slide-footer {
		width: 90%;
	}
	
	.montage-slider-ueber {
		color: #555 !important;
	}

	.montage-slider-content {
		width: 75%;
		color: #555;		
		font-size: 0.9em;
		color: black;
		padding-top: 3em;
		margin-left: 4em;
		margin-right: 4em;
		margin-top: 3em;
	}

	.montage-slider-content p {
		color: #555;	
		font-weight: 300;
		font-size: 1.2em;
	}

	.montage-slide-konfig-bild {
		width: 15% !important;
		padding-right: 5px;
			
	}



	/* ############## Gewebe ############## */

	.insektenschutz-gewebe {
		display: block;
		
	}
	
	.insektenschutz-slide-gewebe {
		min-width: 75% !important;
		width: 75%;
		border-radius: 5px;
		display: flex;
	}
	
	.gewebe-slide-img {
		width: 65% !important;
	}
	
	.gewebe-slide-card {
		display: flex;
		flex-direction: column;
		/* max-width: 90%; */
		margin: 2em auto;
		font-family: 'Open Sans', sans-serif;
		margin-left: 2em;
		width: 50%;
		padding: 0px;
		margin-bottom: -20px;
	}


	.gewebe-slide-overlay {
		position:relative;
		top: -57px;
		background:#b00;
		width: 30%;
		display: flex;
		margin: 0px;
		border-top-right-radius: 35px;
		/* height: 0px; */
	}
	
	.gewebe-slide-overlay-weiss {
		background: #ffffff;
	}		
	
	.gewebe-slide-text-box {
		max-width:420px;
		text-align:left;
	}	
	
	.gewebe-slide-overlay-bild {
		/* width: 100% !important; */
		margin: 5px;
		/* height: 15%; */
	}

	.gewebe-slide-overlay-textbild {
		width: 75% !important;
		height: 75%; 
		margin-top: 3px;
	}

	.gewebe-slide-overlay-text {
		position: relative !important;
		/* top: 5px !important; */
		/* left: 1px !important; */
		font-size: 1.2em;
		/* width: 100% !important; */
		/* color: #fff; */
		color: #B00C28;
		margin: 10px;
		margin-left: 0px;
		text-transform: uppercase;
	}

	.gewebe-slide-overlay-text-ueber {
		font-size: 0.75em;
		
	}

	.gewebe-slide-footer {
		width: 90%;
	}
	
	.gewebe-slider-ueber {
		color: #555 !important;
	}

	.gewebe-slider-ueber-rot {
		color: #FFF !important;
	}

	.gewebe-slider-content {
		width: 75%;
		color: #555;		
		font-size: 0.9em;
		color: black;
		padding-top: 3em;
	}

	.gewebe-slider-content p {
		color: #555;	
		font-weight: 300;
		font-size: 1.2em;
	}

	.gewebe-slider-content-rot p {
		color: #FFF;	
	}

	.gewebe-slide-konfig-bild {
		width: 15% !important;
		padding-right: 5px;
			
	}

	.gewebevideo { 
		/* border-bottom: 2px solid #d86c6c; */
		
	} 

	.gewebevideo video { 
		margin-left: 30px;
		margin-right: 80px;
		/* border-bottom: 2px solid #d86c6c; */ */
		
	} 

	/* ############## Rahmenfarben ############## */

	.rahmenfarben {
		display: flex;
		font-family: 'Open Sans', sans-serif;
		position: relative;
		overflow: hidden;
		width: 100%;
		margin-bottom: 20px;
	}

	.rahmenfarben div {
		width: 50%;	
	}	

	.rahmenfarben img {
		width: 50%;
		border-radius: 10px;
	}	




	/* ############## FAQ ############## */

  .faq {
    /* max-width: 800px; */
    margin: 0 auto;
	width: 100%;
	
  }

  .faq-item {
    border: 1px solid #d86c6c; /* zarter Rotton */
    border-radius: 4px;
    margin-bottom: 20px;
    /* background: #fff; */
    overflow: hidden;
	width: 100%;
	transition: max-height 0.3s ease;
  }

  .faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 14px 18px; */
	padding: 10px 18px 10px 18px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
	width: 97%;
  }


	.faq-arrow {
		width: 16px;              /* Größe anpassen */
		height: 16px;
		transition: transform 0.3s ease;
		cursor: pointer;          /* 👆 Hand-Cursor */
	}

	.faq-item.open .faq-arrow {
		transform: rotate(180deg);
	}

	.faq-content {
		padding: 14px 18px 14px 18px;
		/* border-top: 1px solid #f0b4b4; */
		display: none;
		line-height: 1.5;
		width: 97%;
		transition: padding 0.2s ease;
	}

	.faq-item .faq-content,
	.faq-item hr {
		display: block;
		max-height: 0; 
		opacity: 0;
		transition: max-height 0.3s ease, opacity 0.3s ease;		
	}
	
	.faq-item.open .faq-content,
	.faq-item.open hr {
		max-height: 200px;     
		opacity: 1;
		display: block;
	}

	.faq-item:not(.open) .faq-content {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.faq-item.open .faq-content {
		padding-top: 14px !important;
		padding-bottom: 10px !important;
	}
	
	/* .faq-item.open	.faq-item .faq-content { */
		/* display: block; */
		/* max-height: 0;  */
		/* opacity: 0; */
		/* transition: max-height 0.3s ease, opacity 0.3s ease;		 */
	/* } */

	/* .faq-item.open .faq-content { */
		/* max-height: 200px;      */
		/* opacity: 1; */
		/* display: block; */
	/* } */

	.faq-hr {
		display: none;
		width: 97%;
		display: block;
		opacity: 0;
		transition: max-height 0.3s ease, opacity 0.3s ease;
		margin-top: 0 !important;
		margin-bottom: 0 !important;	
	}

/* #################################################### */

.content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.label {
  background: white;
  color: #a00030;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  align-self: flex-start;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.content h3 {
  margin: 0.2rem 0;
}

.content p {
  flex: 1;
  margin: 0.5rem 0;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer .price {
  font-size: 1.2rem;
}

.btn {
  background: white;
  color: #a00030;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 1rem;
}




/* ------------------------------------------------------ */ 
@media (max-width: 600px) {
  .insekten-slide {
    flex-direction: column;
  }
  .insekten-slide img {
    width: 100%;
    height: auto;
  }
}
/* ------------------------------------------------------ */ 




.grid-7-rows {
	width: 80%;
	margin: 0 auto;
	
} 


.site-ueberschrift h1 {
	margin-left: auto !important;
	text-align: center !important;
	width: 100% !important;
	left: 0em !important;
	/* font-size: 2.4rem !important; */
	font-size: 48px;
}

.info-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
}

.choice-section {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, auto);
	gap: 1rem;	
	place-items: center;	
	justify-content: center;
	padding-top: 15px;
}

.choice-section h3 {
	font-family: 'Open Sans', sans-serif;
	/* font-size: 1.7rem;	 */
	font-size: 40px;	
	margin-top: 5px;
	margin-bottom: 5px;
}



.choice-section img {
	border-radius: 5px;
}

.choice-section > span > button {
		margin: 5px;
		/* font-size: 1.0em;	 */
		
}	
	

.card-head {
	/* font-size: 2.5em; */
	font-size: 40px;
 	margin-top: 1em;
	margin-bottom: 0.0em;
	/* padding-left: 1.2em; */
	margin-left: 0px;
}

.cards-section {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, auto);
	column-gap: 1rem;	
	row-gap: 1rem;
	justify-content: center;
	margin: 0 auto;
	/* padding-left: 3em; */
	/* padding-right: 3em; */
	padding-top: 0.2em;
}

/* Karten (vier Stueck: drei in erster Zeile, eine zweite Zeile */
/* plus Bild rechts über zwei Zeilen */
.card-list {
  display: contents;
  
}

/* 1. Counter initialisieren */
.card-list {
  counter-reset: card-heading; /* Container initialisiert den Zähler */
}
.card-list .card {
  counter-increment: card-heading;
}


.card {
  border: 1px solid #c33;
  padding: 1rem;
  position: relative;
  font-family: 'Open Sans', sans-serif;

	-webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
	-webkit-column-gap: 0px;
    -moz-column-gap: 0px;
	column-gap: 0px;
	margin-top: 1.2em;
	
	border-radius: 5px;
	min-height: 193px;
	margin-top: 0px;
}


.card .title {
  margin: 0.2rem 0;
  /* border-bottom: 1px solid #c33; */
  padding-bottom: 0em;
  color: #333;
}
/* 2. Bei jedem h3 in diesem Container den Counter inkrementieren */
.card h3 {
  position: relative;
  /* padding-left: 4em; */   /* Platz für die Zahl links */ 
  font-size: 16px;
}

.header-row {
  display: flex;
  align-items: center; 
  border-bottom: 1px solid #c33; 
  margin-bottom: 15px;
  padding-bottom: 10px; 
  width: 100%;
  margin: 5px;
  height: 1.5em;
}

.number {
  font-size: 40px;
  /* font-weight: bold; */
  color: #333;
  margin-right: 15px;
  line-height: 1; /* Verhindert, dass die Zahl die Linie nach unten drückt */
}


/* 3. Darstellen der Zahl mit ::before */
.card-list {
  content: counter(card-heading, decimal-leading-zero); /* z.B. 01, 02 */
  position: absolute;
  left: 0;
  top: -5px;
  color: #444;
  font-size: 40px;
  padding-bottom: 10px !important;
  font-family: 'Open Sans', sans-serif;
}
.card p {
  margin: 1.0rem 0 0;
  color: #555;
}
 
/* Position der Karten */
.card:nth-child(1) { grid-column: 1; grid-row: 1; }
.card:nth-child(2) { grid-column: 2; grid-row: 1; }
.card:nth-child(3) { grid-column: 3; grid-row: 1; }
.card:nth-child(4) { grid-column: 1; grid-row: 2; }
.card_bild:nth-child(5) { 
	grid-column: 2 / span 2; 	 
	width: 206%;
	height: 100%;
	
	}

.card_bild img {
	width: 100%;
	border-radius: 8px;
	margin: 0em auto !important;
	
}

.card_bild_klein {
	column-count: 1;
	
}
.card_bild_klein img {
	width: 100%;
	border-radius: 8px;
	height: 193px;
	margin-top: -5px;
}

.header_bild {
	text-align: center;
	
}

.header_bild img {
	width: 75%;

}

.intro-text {
  margin-bottom: 1.5rem;
  width: 100%;
}


.highlight-box {
  flex: 1;
  background: #a00030;
  border: 1px solid white;
  padding: 1rem;
}

.label {
  background: white;
  color: #a00030;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.highlight-box h3 {
  margin-top: 0.5rem;
  border-bottom: 1px solid white;
  padding-bottom: 0.3rem;
}

.price {
  font-size: 1.2rem;
  font-weight: bold;
}

.btn {
  background: white;
  color: #a00030;
  padding: 0.6rem 1.2rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}



.nav-slider {  
	margin:5px; 
	cursor:pointer; 
	font-size:1.3em; 
	width: 24px;
	box-shadow: none !important;
}

.nav {
	position: absolute;
	top: 50%;
	/* transform: translateY(-50%); */
	background: rgba(255,255,255,0.7);
	border: none; 
	font-size: 2rem;
	padding: 0.2rem 0.5rem;
	cursor: pointer;
	z-index: 10;
}

.nav.prev { 
	position: relative;
	/* left: 1rem; 	 */
	/* transform: translateY(1%); */
	/* margin-left: 1em; */
	/* margin-right: 1em; */
}
.nav.next { 
	position: relative;
	/* right: 1rem;  */
	/* transform: translateY(15%); */
	/* margin-left: 1em; */
	/* margin-right: 1em; */
}


/* .pagination { display:flex; justify-content:center; gap:10px; margin-top:10px; } */
.pagination {
  width: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;  
}

  .dot { width:14px; height:14px; border:2px solid #d86c6c; border-radius:50%; cursor:pointer; margin: 0em 1em;}
  .dot.active { background:#b00c28; border-color:#333; }





/* ------------------------------------------------------ */ 
/* Responsive: bei schmaler Ansicht Karten einspaltig untereinander, Bild drunter */
@media (max-width: 800px) {
  .info-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3),
  .card:nth-child(4),  
  .side-image {
    grid-column: 1;
    grid-row: auto;
  }
}
/* ------------------------------------------------------ */ 

.grid-seo {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(7, auto);
  gap: 1rem;
}
.grid-seo > div {
  padding: 1rem;
  background: #e0e0e0;
  border: 1px solid #bbb;
}


/* seo startseitencards ende */