*
{
margin: 0;
padding: 0;
border: none;
outline: none;
} 


html {
	scroll-behavior: smooth;
}


@font-face {
  font-family: 'Lucida';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('LucidaSansStdRoman.otf') format('opentype'); 
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('Montserrat-VariableFont_wght.ttf') format('truetype'),
   url('Montserrat-VariableFont_wght.ttf') format('embedded-opentype'); 
  font-display: swap;
}


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local (''),  
  url('material-icons.woff2') format('woff2');
  font-display: swap;
}


body {
background-image: url("hg.webp");
 background-size: cover; /* Bild füllt Container aus */
  background-position: center; /* Bild wird zentriert */
  background-repeat: no-repeat;
  background-attachment: fixed;
font-family: "Lucida", 'arial';
  font-size: 18px;
  line-height: 1.2;
  }
  

h1 {

  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
hyphens: auto;
  direction: ltr;
  color: #28a83b;
  	text-shadow: #fff 1px 2px 4px;
		background: rgba(255,255,255,0.5);
  display:block;
  margin:10px 0;
  font-size:clamp(18px, 1.3vw, 32px);
  }

h2 {

  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
	hyphens: auto;
  direction: ltr;
  color: #28a83b;
  	text-shadow: #fff 1px 2px 4px;
		background: rgba(255,255,255,0.5);
  display:block;
    margin:10px 0;
	  font-size:clamp(16px, 1.2vw, 30px);
  }

h3 {
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
hyphens: auto;
  direction: ltr;
  color: #28a83b;
	text-shadow: #fff 1px 2px 4px;
	background: rgba(255,255,255,0.5);
  display:block;
    margin:10px 0;
  }


p {
	
margin-bottom:16px;
}


ol,ul {margin-left:60px;}  
  
  
 #logo {width:25vw; transition:width .2s ease; }
header {position:sticky; top:0px; margin:0 auto; width:100vw; z-index:2;   background-color: rgb(225,225,225, 1); 
box-shadow: 0px 8px 8px #555;
border-top:1px solid #999; border-bottom:1px solid #999;
box-sizing: border-box;
display:flex; flex-direction:column;
}

/* ~~~~~~~~~~~~~~ Suche ~~~~~~~~~~~~~ */
input[name="suchbegriffe"]{width:14vw; margin:10px;}


.vorheader {
		width:100vw;
	padding:2px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	box-sizing: border-box;
	max-width:1600px;
}


.inheader {
	width:100vw;
	padding:2px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
box-sizing: border-box;
	max-width:1600px;
	}


/*  box-shadow: inset 0 -2em 3em -2em #888, inset 0 2em 3em -2em #888;*/



main { position:relative;  width:92vw; left:4vw; right:4vw;  height:auto; min-height:63vh; }

section {
	display:flex;  align-items:center; justify-content:center; width:100%; 
}

section.shop {flex-wrap:wrap;}

section.detail img {width:50%; max-width:500px; margin-right:20px; mix-blend-mode: darken;}

section aside.start {width:50%; font-size:3vw;}

section a {text-decoration:none;}

article {background:#fff; border: 1px solid #26a73b; padding:10px; margin:10px;}


img.startbild {width:100%;}


		figure
		{
		display: flex;
		flex-direction:column;			
		justify-content : flex-end;
		align-items : center;
		overflow:hidden;
		margin:10px;
		padding:8px;
		text-align:center;
		width: 320px;
		height: 404px;
		text-decoration:none;
		border: 1px solid #333;
		border-radius: 10px;
		position: relative;
		background:#fff;
		transition: 0.8s all;
		}

		figure:hover {
			background:#ccc; border: 1px solid black; transition:1s all;
			}
			
		figure img {max-width:100%; max-height:320px; width:auto; height:auto; mix-blend-mode: darken;}

		figcaption {
			height:64px; 
			color:#26a73b;
			overflow:hidden;
			padding: 10px;
			hyphens: auto;
			text-decoration:none;
			transition:1s all;
		}
		
@media (max-width: 800px)
{
	figure { width:calc(49vw - 40px); height:calc(60vw - 40px); margin:4px; padding:3px;}
	figure img {max-height:calc(41vw - 20px); max-width:100%;}
	figcaption {height:calc(19vw - 20px); font-size:14px;}
	input[name="suchbegriffe"]{width:20vw; margin:5px; font-size:13px !important;}
	.inheader,.vorheader {padding-right:45px;}
}

a.button{
	display:inline-block;
	border-radius:8px;
	text-decoration:none;
	background-color: #28a83b;
	color:#fff;
	border: 0;
	padding: 10px; margin:10px;
	font-weight: 500;
	border: 1px solid #000;
	transition: all 0.5s;
	}
a.button:hover{	color: #28a83b;
	background-color:#fff;
	border: 1px solid #28a83b; transition: all 1.5s;}







footer {margin-top:30px; width:100vw;  color:#000; display:flex; justify-content:center; align-items:flex-start;
box-shadow: 0px -8px 8px #555;
   background-color: rgb(225,225,225, 1); 
border-top:1px solid #999;
font-size:14px;

}
footer a {color:#002f5c; text-decoration:none; }

footer div {padding:10px; color:#002f5c;}
footer div:first-child {text-align:right;}


@media screen and (max-width: 800px) {
	section { justify-content:center; }
	#video {height:55vw;}
	main {flex-direction:column; }
	section, aside {width:100%; flex-direction:column;}
		section.shop {width:100%; flex-direction:row;}
	section.detail img {width:90vw;}
	figure.table, article {width:90%; display:block;}
	figure.table  {margin-top:40px;}
  body {font-size: 16.5px;}
	header {height:auto;}
	#logo {transition:all 1s; min-width:200px;}
}








/* ~~~~~~~~ Datenschutz und Impressum ~~~~~~~~ */

#datenschutztext,#impressumtext,#agbtext,#kontakttext,#zahlungtext,#widerruftext{
	position:fixed;
	overflow:auto;
	background: rgba(0,0,0,0.95);
	color:#ebba8a;
	border-radius:10px;
	border: 1px solid #000055;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
}

 


#datenschutztext p,#impressumtext p,#agbtext p,#kontakttext p{color:#fefefe;}
#datenschutztext h1,#impressumtext h1, #agbtext h1,#kontakttext h1{color:#fefefe;}
#datenschutztext h2,#impressumtext h2,#agbtext h2,#kontakttext h2{color:#fefefe;}
#datenschutztext a, #impressumtext a,#agbtext a,#kontakttext a{text-decoration:none; color:#fefefe;}
#widerruftext:hover,#zahlungtext:hover, #datenschutztext:hover,#impressumtext:hover,#agbtext:hover,#kontakttext:hover{background: rgba(0,0,0,0.95);}
#widerruftext:target,#zahlungtext:target,#datenschutztext:target,#impressumtext:target,#agbtext:target,#kontakttext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}

@media screen and (max-width: 800px) {
	#zahlungtext:target,#widerruftext:target,#datenschutztext:target,#impressumtext:target,#agbtext:target,#kontakttext:target{top:90px; width:90%; height:75%; 	padding:10px; margin-left:-49%;}
}


/* Material Icons */
.materialfest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 50px;
  color: #e3e3e3;
  text-decoraion:none;
  position:sticky;
  top:32px;
  margin-right:10px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {transition: 2s all; color:rgba(200,200,200,0.5); transform: rotate(360deg);}


.material {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 45px;
  color:#26a73b; cursor:pointer;
}
.material:hover {color:black; transition:all 1s;}
	
.material-klein {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  margin-right:6px; 
  color:#26a73b; cursor:pointer;
}
.material-klein:hover {color:black; transition:all 1s;}	

.headerlink {text-decoration:none; color:black; font-size:16px; display:flex; align-items:center;}
.headerlink:hover .material-klein {color:black; transition:all 1s;}


.buttonlink {cursor:pointer;}
.buttonlink:hover {transition:all 1s; background: #28a83b; color:#fff;}

/* ~~~~~~~~~~~~~ slide-in-list ~~~~~~~~~~~~~~~~~~ */

.slide-in-list {
  padding: 0;
  overflow-x: hidden; /* Verhindert horizontale Scrollbalken während der Animation */
  margin-left:0px;
}

.slide-in-list li {
  background-color: #fff;
  	border: 1px solid #26a73b;
  margin: 8px 0;
  padding: 3px 15px;;
  opacity: 0; /* Startzustand: unsichtbar */
  
  /* Animation zuweisen: Name, Dauer, Timing, Fill-Mode */
  animation: slideInRight 0.7s ease-out forwards;
}

.slide-in-list li:hover {transition:all 1s; background-color:#26a73b; color:#fff;}


/* @keyframes für das Schweben von rechts */
@keyframes slideInRight {
  from {
    transform: translateX(100%); /* Startet weit rechts (außerhalb) */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* Endet an der ursprünglichen Position */
    opacity: 1;
  }
}

/* Gestaffelte Animation (Verzögerung für jeden Punkt) */
.slide-in-list li:nth-child(1) { animation-delay: 0.1s; }
.slide-in-list li:nth-child(2) { animation-delay: 0.2s; }
.slide-in-list li:nth-child(3) { animation-delay: 0.3s; }
.slide-in-list li:nth-child(4) { animation-delay: 0.4s; }
.slide-in-list li:nth-child(5) { animation-delay: 0.5s; }
.slide-in-list li:nth-child(6) { animation-delay: 0.6s; }
.slide-in-list li:nth-child(7) { animation-delay: 0.7s; }
.slide-in-list li:nth-child(8) { animation-delay: 0.8s; }
.slide-in-list li:nth-child(9) { animation-delay: 0.9s; }
.slide-in-list li:nth-child(10) { animation-delay: 1.0s; }
.slide-in-list li:nth-child(11) { animation-delay: 1.1s; }
.slide-in-list li:nth-child(12) { animation-delay: 1.2s; }
.slide-in-list li:nth-child(13) { animation-delay: 1.3s; }
.slide-in-list li:nth-child(14) { animation-delay: 1.4s; }
.slide-in-list li:nth-child(15) { animation-delay: 1.5s; }
.slide-in-list li:nth-child(16) { animation-delay: 1.6s; }
.slide-in-list li:nth-child(17) { animation-delay: 1.7s; }
.slide-in-list li:nth-child(18) { animation-delay: 1.8s; }
.slide-in-list li:nth-child(19) { animation-delay: 1.9s; }
.slide-in-list li:nth-child(20) { animation-delay: 2.0s; }
.slide-in-list li:nth-child(21) { animation-delay: 2.1s; }
.slide-in-list li:nth-child(22) { animation-delay: 2.2s; }


/* ~~~~~~~ Brotkrümmel ~~~~~~~~~~~~~~~~~ */

nav.breadcrumb {position:sticky; top:115px !important; z-index:1; display:flex; justify-content:center; align-items:center; transition: all 1s; text-align:center;}

.breadcrumb ol {
  display: flex;
  flex-wrap:wrap;
  list-style: none;
  padding: 0;
  margin:10px;
  padding:10px;
  background: #E1E1E1; 
  border: 1px solid #333; /* Rahmen für alle Seiten */
  border-top: none; 
 border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

}

.breadcrumb span {
  margin: 0 10px;
  color: #666;
}

.breadcrumb li a {
  text-decoration: none;
  color: #333;
}

.breadcrumb li a:hover {background:#26a73b; color:#fff; transition: all 1s;}


.breadcrumb li[aria-current="page"] {
  color: #333;
  font-weight: bold;
}


/* ~~~~~~~~~~~ mwst privat/firma ~~~ */

.mwst {display:flex; flex-direction:row; text-align:center;}
.mwst span {display:block; cursor:pointer; font-size:17px; hyphens:auto; border:1px solid black; border-radius:4px; display:block; text-align:left; padding:2px; margin:1px;}


.aktiv {background-color:rgb(255,255,255,1);}
.inaktiv {background-color:rgb(255,255,255,0.4); color:#777; border:1px solid #777;}
.inaktiv:hover {background-color:rgb(255,255,255,0.9); color:#333; border:1px solid #333; transition:all 1s;}
.inaktiv:hover::before	{color: #dd0000; transition: all 1s;}


.inaktiv:before {
	content: "✘ ";
	color: #ff9999;

	
}

.aktiv:before {
	content: "✔ ";
	color: green;

}

@media (max-width: 800px)
{
	.mwst {flex-direction:row;}
	.mwst span {font-size:12px; padding:1px 1px 1px 2px;}
	.headerlink {font-size:13px;}
	.material {font-size:38px;}
	nav.breadcrumb {top:100px !important; font-size:14px; nav.breadcrumb }
	.sicht {display:none !important;}
}



#warenkorbinhalt5 {display:flex; justify-content:center; align-items:center;  position:absolute; width:20px; height:20px; border-radius:50%; background:red; color:#fff; font-size:15px; }