/* CSS Document */

/* SCHRIFTEN */
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Serif:wght@400;700&display=swap'); 
 @import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap');



/* 
font-family: 'Noto Sans', sans-serif;
font-family: 'Noto Serif', serif;
font-family: 'Chilanka';
*/



/* ===============================*/
/* CSS Reset
/* ===============================*/
*{
	box-sizing:border-box;
	padding:0;
	margin:0;
}

:root {
	--hauptfarbe_rot:228,0,11;
	--hauptfarbe_gelb:254,192,42;
	--hauptfarbe_schwarz:0,0,0;
	--rand_naht: 3px dashed rgba(var(--hauptfarbe_schwarz),1);
	--rand_naht_auswahl: 3px dashed rgba(var(--hauptfarbe_rot),1);
	--rand_naht_auswahl_nav: 3px dashed rgba(var(--hauptfarbe_gelb,1));
}



/* ===============================*/
/* HTML Elemente
/* ===============================*/


html {
	height:100%;
	font-size: 112.5%; /*18px*/
}

body {
	min-height:100vh;  
	color:var(--hauptfarbe_schwarz);
	font-family: 'Noto Sans', sans-serif;
	background-color:rgba(var(--hauptfarbe_gelb),0.1);
	width:100%;
	max-width:1600px;
	margin:0 auto;
	/*right: 0;*/
	/*left:0;*/
}


header {
	position: fixed;
	display:flex;
	justify-content:space-between;
	height:5rem;
	padding:1rem;
	width:100%;
	max-width:1600px;
	margin:0 auto;
	right: 0;
	left:0;
	z-index:3000;
}

	#logo {
		text-align: right;
		padding:0 1rem;
	}


	#logo img {
		width:100%;
		max-height:3rem;
		z-index: 100;
	}
 
main {
	max-width:1600px;
	margin: 0 auto;
	position: relative;
}

/*h1 {
	color:var(--hauptfarbe);
	font-style: italic;
	font-weight: normal;
	font-size: 1rem;
}*/

/* Nur für CMS */
h2 {
	color:rgba(var(--hauptfarbe_gelb),1);
	background-color: rgba(var(--hauptfarbe_rot),1);
	padding:2rem 0 1rem 0;
	text-align: left;
	text-decoration: none;
	font-weight:bold; 
	font-size: 1.5rem;
	font-family: 'Chilanka';
	border:var(--rand_naht);
}

/* Die grossen Überschriften */
h3 {
	color:rgba(var(--hauptfarbe_schwarz),1);
	padding:0rem 0 0.5rem 0;
	text-decoration: none;
	font-size: 2.5rem;
	font-family: 'Chilanka';
	/* text-shadow: 1px 1px 2px black;*/
}

/* h4: Datenschutz/Impressum */



a:link {
	color:rgba(var(--hauptfarbe_gelb),1);
	text-decoration: none;
	cursor:pointer;
}

a:visited {
	color:rgba(var(--hauptfarbe_gelb),1);
}

a:hover {
	color:rgba(var(--hauptfarbe_schwarz),1);
}

a:active {
	color:rgba(var(--hauptfarbe_gelb),1);
}



/* ===============================*/
/* Navigation
/* ===============================*/

	nav {
		color:rgba(var(--hauptfarbe_gelb),1);
		font-weight:bold;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 1rem;
		top:2rem;
		left:0rem;
		z-index:100;
		font-family: 'Chilanka';
		background-color: rgba(var(--hauptfarbe_rot),1);
    }
		
	nav a { 
		font-size: 1.4rem;
        text-decoration: none;
		padding:0rem 1rem;
        border-left:var(--rand_naht);
		cursor:pointer;
    }
    
    nav a:first-child {
        border-left:none;
    }

/*	
	.fafa {
		font-family: 'Chilanka';
		color:green;
	}
*/
/*
	i .fa {
		font-family: 'Chilanka';
	}

/* ===============================*/
/* Hamburger/*
/* ===============================*/
	/* Checkbox */
	#menucheckbox {
		position:absolute;
		display:none;
		/*left:-100%;*/
	}

	/* Label für Checkbox */
	#menubutton {
		color:rgba(var(--hauptfarbe_gelb),1);
		background-color: rgba(var(--hauptfarbe_rot),1);
		cursor:pointer;
		position:fixed;
		top:0;
		left:0;
		z-index: 10;
		display:none;
		margin:0.2rem;
		padding:0.2rem;
	}

	#menubutton_innen {
		border:var(--rand_naht);
		width:2rem;
		height:2rem;
		text-align: center;
		padding:0.2rem;	
	}
/*
	#menubutton:hover {
		color:rgba(var(--hauptfarbe_gelb),0.3);
	}
*/
	#menubutton .fas {
		font-size:1.5rem;
	}

	#nav_hamburger {
		margin:0.2rem;
		display:flex;
		flex-direction:column;
		padding:0.6rem;
		position:absolute;
		width:calc(100% - 0.4rem);
		top:0;
/*		transition:ease-in-out 0.3s all;
*/		/*line-height:2rem;*/
		z-index: 5;
		cursor:pointer;
        
	}

	#nav_hamburger a:link, #nav_hamburger a:link i {
		font-size:1.5rem;
		text-decoration: none;
		padding:0.1rem;
		margin:0.1rem;
	}

	#nav_hamburger a:link {
		border:var(--rand_naht);
	}

	#nav_hamburger a:visited {
		border:var(--rand_naht);
	}

	#nav_hamburger a:hover {
		border:var(--rand_naht_auswahl_nav);
	}

	#nav_hamburger a:active {
		border:var(--rand_naht);
	}



/* ===============================*/
/* BEREICHE: ID und Container */
/* ===============================*/

section {
/*	min-height:100vh;*/
	position: relative;
	padding-top:5rem;
}

.hintergrund_bild {
	width: 100%;
	background-attachment: fixed;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-top:inherit;
}


#abschnitt_ueber #abschnitt_produkte p {
	line-height: 1.5rem;
}

#abschnitt_produkte {
	background-blend-mode:color;
	background-color:rgba(var(--hauptfarbe_gelb),0.2);
}

#abschnitt_ueber {
	background-blend-mode: color;
	background-color:rgba(84,132,136,0.2);
}

#abschnitt_galerie {
	background-color:rgba(var(--hauptfarbe_gelb),0.2);
}

#abschnitt_kontakt {
	background-blend-mode: color;
	background-color:rgba(84,132,136,0.2);
}



.textbox_zentriert {
	box-sizing: border-box;
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width:80vw;
	position:relative;
	padding:1rem 1rem 3rem 1rem;
	z-index:500;
}

#abschnitt_warenkorb .textbox_zentriert{
	background-color:rgba(var(--hauptfarbe_schwarz),0.3);
}



/* ===============================*/
/* Design Stuff */
/* ===============================*/


.schmuckrand_breit {
    border:var(--rand_naht);
    margin:0.1rem -0.5rem;
    padding:0.2rem;
}


/* ===============================*/
/* FILTER */
/* ===============================*/

.filter, .filter_kategorie, .filter_allezeigen {
	display:flex;  
	flex-wrap:wrap; 
/*	justify-content:space-around; */	
}


/* ===============================*/
/* click-BUTTONS: Filter, Kontakt: absenden, Warenkorb: bestellen */
/* ===============================*/

.filterbutton, #absenden, #bestellen {
 	width:auto;
	padding:0.5rem;
	cursor:pointer;
	border:var(--rand_naht);
    margin:0.3rem;
}

.filterbutton, .filterbutton a, #absenden, #bestellen a {
	font-size:1.2rem;
	font-family: 'Chilanka';
    background:rgba(var(--hauptfarbe_gelb),1);
	color:black !important;
}


.filterbutton:hover, #absenden:hover, #bestellen:hover {
    border:var(--rand_naht_auswahl);
	color:rgba(var(--hauptfarbe_rot),0.7) !important;
}

.filterbutton:hover a {
	color:rgba(var(--hauptfarbe_rot),0.7) !important;
}

.allezeigen {
	color:black !important;
}




/* ===============================*/
/* up-/down-BUTTON */
/* ===============================*/


.totopbutton {
	color:rgba(var(--linkfarbe),1);
	right:2rem; 
	bottom:2rem;
	position:fixed;
	z-index:5000;
}


.totopbutton .fas {
	font-size:4rem;
}

.downbutton {
	color:rebeccapurple;
	bottom:0;
	left:50%;
	position:absolute;
	z-index: 20000;
}

.downbutton .fas {
	font-size:4rem;
}

/* ===============================*/
/* PRODUKTE */
/* ===============================*/

.produkte_galerie {
	display:flex;  
	flex-wrap:wrap; 
	justify-content:space-around;
	margin-left:auto;
	margin-right:auto;
	gap:1rem; 
	max-width: 1600px;
	width:90vw;
	padding-bottom: 3rem;
}

.produkte_container {
	height:400px;
	width:300px;
	position:relative; 
	background-color: rgba(var(--hauptfarbe_gelb),0.8);
	
	
	font-size: 0.9rem;
}

.produkte_text  {
	padding:1rem;
	font-size:1rem;
}

.produkte_bild {
	position:relative;
	width:300px;
	max-height:180px;
	top:0px;
	right:0px;
	left:0px;
	
	
}



.fancyhidden{
    display: none;
}

.produkte_container:hover img {
	transition:ease 0.4s all; 
	opacity: 0.8;
}

.produkte_titel {
	font-weight: 600; 
}

.fisch_bild {
	max-height: 1.3rem;
}

.warenkorb_legen {
	color:black !important;
	cursor: pointer;
	font-weight: bold;
}




/* ===============================*/
/* UEBER OMAZIERFISCH */
/* ===============================*/

#ueber_inhalt {
	display: flex;
	gap: 5rem;
}

#ueber_text, #ueber_bild {
	width: 50%;
}

#ueber_bild img {
	max-width: 100%;
	max-height: 500px;
}



/* ===============================*/
/* Galerie */
/* ===============================*/

.galerie {
	position:relative;
	margin-top: 1rem;
	width: 80vw;
	height:70vw;
	
}


.galerie_bild {
	position:absolute;
	max-width: 100%;
	top:0px;
	right:0px;
	left:0px;
}



/* ===============================*/
/* KONTAKT */
/* ===============================*/

.zeile {
	display:flex;
	flex-wrap:wrap;
    justify-content:space-between;
}

.formularbloeckli {
	width:45%;
}

.formularbloeckli input {
	height:1.5rem;
}

.formulartext {
	font-family:"Chilanka", "Noto Sans", "Noto Serif", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
}

input, textarea {
	width:100%;
	background-color: rgba(var(--hauptfarbe_gelb),0.5);
	border-color: rgba(var(--hauptfarbe_gelb),0.3);
	color:rgba(var(--hauptfarbe_schwarz),1);	
	margin-bottom:1rem;
	padding:1rem;
	font-size: 1rem;
}

::placeholder{
	color:rgba(var(--hauptfarbe_schwarz),0.5);
}

.acht {
	max-width:4rem;
}



/* ===============================*/
/* Footer: Impressum und Datenschutz */
/* ===============================*/


footer {
	position:relative;
	display: flex;
	justify-content:space-around;
	width:100%;
	max-width:1600px;
	margin:0 auto;
	right: 0;
	left:0;
	z-index:3000;
}

#datenschutz {
	position:absolute;
	bottom:0;
	padding:0.3rem;

}

#datenschutz a {
	font-size: 0.8rem;
}

h4 {
	color:rgba(var(--hauptfarbe_gelb),1);
	padding:1rem 0;
	text-decoration: none;
	font-weight: bold; 
	font-size: 0.9rem;
	font-family: 'Noto Sans', sans-serif;
}

.mehrlesen {
	cursor:pointer;
	margin-left:1rem; 
}

.versteckt {
	margin-top:1rem;
	display:none;
	border:var(--rand_naht);
	padding:0.5rem;
}

.versteckt p {
		font-size: 0.7rem;
}



.hintergrund_rot {
	background-color:rgba(var(--hauptfarbe_rot),1);
	width: 100%;
	background-size:cover;
}




/* ===============================*/
/* WARENKORB */
/* ===============================*/
#abschnitt_warenkorb {
	background-image:  url("../bilder/bild_wolken.jpg");

}



	/* ===============================*/
	/* WARENKORB - EMAIL
	/* ===============================*/

table {
	max-width: 500px;
	border:var(--rand_naht);
	background-color: rgba(var(--hauptfarbe_gelb),0.5);
}

tr {
	max-width: 100%;
}

th, td {
	max-width: 1000px
}



/* ===============================*/
/* KEYFRAMES */
/* ===============================*/

@keyframes tonan {
            
            0% {
                transform:scale(0.8); 
            }
            
            100% {
                 transform:scale(1);
            }
            
        }


/* ===============================*/
/* BREAKPOINTS */
/* ===============================*/

@media screen and (max-width:1150px) {

	html {
		font-size:250%;
	}
			
	h2 {
		font-size:1.8rem;
	}

	h3 {
		font-size: 1.5rem;
		padding: 0;
	}
	
	header {
		flex-direction:column-reverse;
		height:auto;
		padding:0.2rem
	}
	
	#nav_produkte {
		display: none;
	}	

	#logo {
		padding:0;
	}
	
	#logo img {
		height: 2.4rem;
		width: auto;
	}

	.filterbutton {
		padding: 0.2rem;
		margin: 0.1rem;
	}

	#abschnitt_produkte {
		padding-top: 3rem;
	}

	.produkte_container {
		height:800px;
		width:600px;
	}

	.produkte_bild {
		width:600px;
		max-height:360px;
	}

	#ueber_inhalt {
		flex-direction: column;
		gap: 1rem;
	}

	#ueber_text, #ueber_bild {
		width: 80vw;
	}

	
	/* ===============================*/
	/* HAMBURGER */
	/* ===============================*/  
	nav {
		display:none;
	}
	
	#menubutton {
		display:block;
	}
	

}	
	
@media screen and (max-width:768px) {

	
	.textbox_zentriert {
		max-width:80vw;
	}	
	
	
	
	

		
}

@media screen and (max-width:576px) {
	
	html {
		font-size:15px;
	}

		
	h2 {
	font-size:1.4rem;
	}
		
	#logo img {
	width:200px
	}
		
	.textbox_zentriert {
		max-width:90vw;
	}
	
	
	
}
		
		
	
		
@media screen and (max-width:450px) {

		
	#logo img {
		width:200px;
	}
		
	.zeile {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin:0.5rem 0;
	}
		
	.zeile input {
		width:150%;
	}
	
	
	

}