/* CSS Document */
/* Für alle Bildschirme: */
@font-face {
    font-family: 'lucida_faxregular';
    src: url('/fonts/lucida_fax_regular-webfont.woff2') format('woff2'),
         url('/fonts/lucida_fax_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

	html {
		font-size: 62.5%;	
		box-sizing: border-box;
	}
	body {
		background-color: rgb(233, 225,213) ; /* beige */
		font-family: 'Lucida_faxregular','sans-serif';	
		color: rgba(51,52,65,1.00);
	}

	*, *::before, *::after{
		box-sizing: inherit;
	}
	table {
		text-align: center;
	}

	.table_wrapper{
		display: block;
		overflow-x: auto;
		}
	#customers {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		border-collapse: collapse;
		width: 100%;
		height: 100px;
		font-size: 0.8em;
		text-align: center;
		text-shadow: 2px 2px 4px #000000;
	}

	#customers td, #customers th {
		border: 2px solid #ddd;
		padding: 4px;
	}
	td {
		text-shadow: none;
		white-space: nowrap;
	}

	/* #customers tr:nth-ch ild(even){background-color: #f2f2f2;} */

	#customers tr:hover {background-color: #ddd;}

	#customers th {
	  padding-top: 12px;
	  padding-bottom: 12px;
	  background-color: #ADA79E;
	  color: white;
	}


	.button {
	  background-color: inherit; /* Green */
	  border: 1px solid #6C3839;
	  color: saddlebrown;
	  padding: 10px 32px;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  font-size: 1.2em;
	  margin: 4px 2px;
	  cursor: pointer;
	  -webkit-transition-duration: 0.2s; /* Safari */
	  transition-duration: 0.2s;
	  border-radius: 0px;
	}
	.button:hover {
	  background-color: #ADA79E;
		color: white;
	 /* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 1px 50px 0 rgba(0,0,0,0.19);
		*/
	}

	.rahmen { /* Schnoerkelrahmen von Sarah */	
	  background-color: rgb(253, 252, 250); /* Hintergrundfarbe der Textblöcke */	  
	  border:  20px solid transparent;
	  padding: 0px;
	  border-image-source: url("/bilder/elemente/rahmen.svg");  
	  border-image-repeat: stretch;
	  border-image-slice: 34%;
	}

	.trenner {
		width: 100%;
		height: auto;
	}
	.trenner img {
		max-width: 900px;
		max-height: auto;
		margin: 15px 0px;
	}
	header {
		grid-area: kopf;
		text-align: center;
		color: rgba(155,108,41,1.00); /* Textfarbe */
		font-size: 2em;
	}	


	main {
		grid-area: inhalt;
		font-size: 2em;
		padding: 5px;
	}

	footer {
		grid-area: unten;
		display: flex;
		font-size: 1.5em;	
		justify-content: space-around;
		border-top: 2px solid rgba(153,123,90,1.00);
	}

	p {
		line-height: 1.5;
		font-size: 0.8em;
		margin: 0px 0px;
		padding: 0px;
		
	}
	.normalgross {
		line-height: 1.5;
		margin-left: 5px;
		color: black;
		font-size: 0.8em;
	}
	.aufzaehlung ul {	
		font-size: 0.8em;
		color: black;
		border: 1px solid #aaa;
		background-color: #dadada;
		margin-left: 0px;
		margin-top: 10px;
		padding-left: 25px;		
		line-height: 1.5;		
		display: block;
		list-style-type: disc;
		text-align: left;
}
	h2 {
		margin: 10px 0px;
	}
	img {
		max-width: 100%;
		height: auto;	
		padding: 1px;		
	}
	header img {
		max-width: 50%;
	}

	ul {
		list-style: none;
		font-size: 1.5em;
		color: black;
		background-color: #dadada;
		margin:0px;
		padding: 1px;
		display: none;
		text-align: center;
		
	}
	a {
		color: black;
		text-decoration: none;
	}
	a:hover, a:active {	
		border-bottom: 1px solid black;
	}
	#click {display: none;}

	.floated { /* für das Bild im Main */	
    	border: 1px solid #aaa;
		float: right;
		max-width: 250px;
		margin: 2px;
	}
	.center {
        position: relative;
		left: 25%;
		padding: 1px;
		border: 1px solid #aaa;
	}

	.galerie {
		grid-area: galerie;
		overflow: hidden;
	}
	.galerie-wrapper {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: 100px 200px;
		grid-auto-flow: dense;
		grid-gap: 5px;	
	}
.galerie-wrapper .heading {
	width: 100%;
	padding: 10px 20px;
}

.galerie-wrapper .heading h2{
	text-align: center;
	font-size: 3em;
	font-weight: bolder;
	border-bottom: 2px solid #aaa;
}
.galerie-wrapper .heading h2 span{
	font-weight: 100;
}

	.galerie-item {
		width: 100%;
		height: 100%;
		position: relative;		
	}

	.galerie-item .image {
		width: 100%;
		height: 100%;
		overflow: hidden;	
	}
	.galerie-item .image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
		cursor: pointer;
		transition: .5s ease-in-out;
	}
	.galerie-item:hover .image img {
		transform: scale(1.5);
	}
	.galerie-item .text {
		opacity: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 25px;
		pointer-events: none;
		z-index: 4;
		transition: .3s ease-in-out;
	}

.w-1 {
	grid-column: span 1;
}

.w-2{
	grid-column: span 2;
}
.w-3 {
	grid-column: span 3;
}
.w-4 {
	grid-column: span 4;
}
.w-5 {
	grid-column: span 5;
}
.w-6 {
	grid-column: span 6;
}

.h-1 {
	grid-row: span 1;
}
.h-2 {
	grid-row: span 2;
}
.h-3 {
	grid-row: span 3;
}
.h-4 {
	grid-row: span 4;
}
.h-5 {
	grid-row: span 5;
}
.h-6 {
	grid-row: span 6;
}



/* für grosse Bildschirme */
@media screen and (min-width: 601px) {

	.grid-container {
		display: grid;
		max-width: 800px;
		margin: 0 auto;
		padding: 0 5px;
		grid-template-areas: 
			"kopf kopf"
			"navi navi"
			"galerie ."
			"inhalt bild"
			"unten unten";
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto auto 100px;
		gap: 10px;

	}
	.bild {
		grid-area: bild;
		max-width: 250px;
		text-align: end;
		margin: 0;
		padding: 0;	
	}

		
	nav {
		grid-area: navi;
		display: flex;	
		flex-direction: column;
		background: #fffbf0;
  		border-color: #e7c157;
		border: 1px solid #aaa;
	}
	ul {
		font-size: 1.5em;
		background-color: antiquewhite;
		margin: 0px;
		padding: 5px;
		display: flex;
	}
	.ebeneeins {
		justify-content: space-around;
		font-size: 1.5em;
		overflow: hidden;
		white-space: nowrap;
	}
	
}


@media (max-width : 600px ){

	.grid-container {
		display: grid;
		/*max-width: 800px;*/
		margin: 1px;
		padding: 0 ;	
		grid-template-areas: 
			"kopf"
			"navi"
			"galerie"
			"inhalt"
			"unten";
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto 100px;
		gap: 2px;

		}
	footer {
		font-size: 0.95em;
	}
	p {
		font-size: 0.7em;
	}
	h2 {
		font-size: 1.2em;
	}
	.floated {    	
		float: right;
		max-width: 150px;
		margin-left: 10px;
	}	
	.button {
	  padding: 5px 8px;
	  font-size: 15px;
	  font-weight: 600;
	  color: saddlebrown;
	  margin: 4px 4px;
	  border-radius: 0px;
	}
	
/* Für das Hamburger Menü in verkleinerter Ansicht: */
	.ebeneeins {
		background-color: #FFFFFF;
		font-size: 1.7em;
		overflow: hidden;
		white-space: nowrap;	
	}
	.ebeneeins > li {
		border-bottom: 1px solid #A9A9A9 ;
	}
	#click:checked ~ ul {display: block;}

	#click:checked ~ label .zweiham {opacity: 0;}
	#click:checked ~ label .einsham {transform: rotate(-45deg); top:13px;
	transition: transform 0.5s;}
	#click:checked ~ label .dreiham {transform: rotate(45deg);top:13px;
	transition: transform 0.5s;}

	
	.hamlinie {
		width: 23px;
		height: 3px;
		border-radius: 1px;
		background-color: rgba(153,123,90,1.00);
		position: absolute;
	}
	.hamrahmen {
		display: flex;
		justify-content: center;
		width: initial; 
		height: 29px;
		border-color: saddlebrown;
		border-radius: 2px;
		margin: 0;	
		background-color: rgba(186,186,186,0.80);
		padding: 10px;
		position: relative;
		cursor: pointer;
	}
	
	.einsham {
		top: 5px;
	}
	.zweiham {
		top: 13px;
	}
	.dreiham {
		top: 21px;
	}

	#click:checked ~ .ebeneeins {
		animation:move 0.5s forwards;
	}	
	@keyframes move {
		0% {width:0;}
		100% {width:100%}
	}
td {
	font-size: 0.8em;
}
#customers th {   
	font-size: 0.9em;
}
.aufzaehlung ul {	
		font-size: 0.7em;
		margin-left: 4px;
		padding-left: 20px;		
		padding-right: 10px;
		}

.normalgross {
	color: black;
	font-size: 0.7em;
}
	
.galerie-wrapper {	
		grid-template-columns: repeat(1, 1fr);	
	}
	
.w-1, .w-2, .w-3, .w-4, .w-5, .w-6 {
		grid-column:  span 1;
	}
}