* {box-sizing: border-box;						/* die Prozent beziehen den Rand (Padding) mit ein */
 /*border: 1px solid greenyellow;*/ 
}					

body {background-color: #0A0D56;
	margin: 0px;
	color: white;
}

a {color: white;
	}
 
img {max-width: 100%;
border-radius: 20px;}

.hauptbild {grid-column: 1 / 11;
		grid-row: 1 / 2;
		max-width: 100%;							/* passt sich an Bildschirmgröße an */
		padding: 2%;						
		}

.carousel {grid-column: 1 / 11;
		grid-row: 1 / 2;							
		padding: 2%;
		margin:  auto;
		width: 100%;
		display: flex;
		overflow-x: auto;
		height: auto;
}

.carousel::-webkit-scrollbar {display: none;}

.group_carousel {display: flex;
			align-items: center;
			justify-content: center;
			gap: 1em;
			animation: spin 20s infinite linear;
			padding-right: 1em;
}

.card {flex: 0 0 5em;
	height: auto;
	width: auto;
	padding: 10px;
	font-size: 3rem;
	border-radius: 10px;
	text-align: center;
	align-content: center;
}

@keyframes spin {from {translate: 0;}
		to {translate: -100%;}
}

.inhalt {grid-row: 2 / 21;
		grid-column: 1 / 11;
		z-index: 1;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		font-size: 25px;
		}




.überschrift {color: white;
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			float: left;
			align-self: start;
			justify-self: center;
			position: relative;
			}

.überschrift2 {grid-column: 2 / 3;
			grid-row: 2 / 3;
			align-self: end;
			justify-self: auto;
			
			}


.logo {float: left;
	max-width: 20%;
	min-width: 150px;
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	padding-left: 10px;
	padding-top: 100px;
	}

main {display: grid;
	grid-template-columns: minmax(150px, 175px) 1fr;	/* minmax= wird nicht kleiner als erste Zahl */
	font-size: 16px;
	}

aside {background-color: #1e205d;				/* Seitending für Links */
	float: left;								/* es kann neben anderen Elementen stehen */
	padding-left: 10px;							/* Platz zwischen Inhalt und Rand Links */
	text-align: left;
	font-size: 20px;
}						
section {width: 1fr;							/* der Haupt Bereich; 1fr= 1 Teil vom verfügbaren Platz */
	float: left;
	grid-column: 2 / 3;
	/* margin: ;								 Rand um section herum */
	display: grid;								/* Eime Grid darin */
	grid-template-columns: repeat(10, 10%);		/* 10x gibt es eine reihe mit der Längeneinheit 1 */
	grid-template-rows: auto repeat(9, auto 1fr);
	align-items: center;						/* in den Kästchen sind Sachen oben/ unten etc */
	justify-items: center;						/* in den Kästchen sind Sachen links/ rechts etc */
	text-align: center;	
}
	

.navbar {background-color: #666896;			/* obere Linkleiste (brauchen wir nicht)*/
		height: 50px;
		}

header {background-color: #1e205d;				/* Logo Leiste */
	display: block;								/* damit es von nichts anderen betroffen ist */
	clear: both;								/* damit es von nichts anderen betroffen ist */
	display: grid;								
	grid-template-columns: 20% 80%;
	grid-template-rows: 100px 50%;
	align-items: center;	
	justify-items: center;
	font-size: 150%;
	}

footer {color: white;							/* Impressum unten */
	display: block;								/* das es nicht vom rest beeinflusst wird */
	clear: both;
	margin: 2%;
	text-align: center;
}

#abschnitt1{grid-column-start:1;					/* weiß nicht, du wolltest was ausprobieren */
		grid-column-end:3;
		background-color: #666896;}





/* Sterne */
.stern1 {max-width: 70%;
		grid-column: 1 / 2;
		grid-row: 5 / 6;
		opacity:0.8;
		align-self: end;
		transition: 0.5s
		}

.stern1:hover {opacity: 100%;
		max-width: 100%;
		}

.stern2 {max-width: 100%;
		grid-column: 5 / 7;
		grid-row: 9 / 12;
		opacity:0.5;
		align-self: end;
		transition: 0.5s
		}

.stern2:hover {opacity: 100%;
		max-width: 100%;
		}

.stern3 {max-width: 100%;
		grid-column: 10 / 11;
		grid-row: 17 / 18;
		opacity:0.7;
		align-self: end;
		transition: 0.5s
		}

.stern3:hover {opacity: 100%;
		max-width: 100%;
		}

.stern4 {max-width: 50%;
		grid-column: 3 / 4;
		grid-row: 15 / 16;
		opacity:0.7;
		align-self: end;
		transition: 0.5s
		}

.stern4:hover {opacity: 100%;
		max-width: 100%;
		}

.stern5 {max-width: 30%;
		grid-column: 8 / 9;
		grid-row: 7 / 8;
		opacity:0.8;
		align-self: end;
		transition: 0.5s
		}

.stern5:hover {opacity: 100%;
		max-width: 100%;
		}

/* Text unter Sternen */
.stern1p {max-width: 70%;
		grid-column: 1 / 2;
		grid-row: 6 / 7;
		opacity:0.8;
		}

.stern2p {max-width: 100%;
		grid-column: 5 / 7;
		grid-row: 12 / 13;
		opacity:0.5;
		}

.stern3p {max-width: 100%;
		grid-column: 10 / 11;
		grid-row: 18 / 19;
		opacity:0.7;
		}

.stern4p {max-width: 50%;
		grid-column: 3 / 4;
		grid-row: 16 / 17;
		opacity:0.7;
		}

.stern5p {max-width: 30%;
		grid-column: 7 / 10;
		grid-row: 8 / 9;
		opacity:0.8;
		}

/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: rgb(149, 163, 235);
}

/* mouse over link */
a:hover {
  color: rgb(244, 227, 77);
  font-size: 120%;
}




/* the shop */
.shop {grid-column: 1 / 11;
	grid-row: 2 / 20;
	z-index: 1;
}

#shop_layout {display: flex;
			justify-content: space-around;
			flex-direction: row;
			flex-wrap: wrap;
			list-style-type: none;
}


.shop_layout_item {background-color: #9c9dc3;
				box-shadow: 0px 0px 8px rgba(0,0,0,02);
				border-radius: 5px;
				width: 300px;
				height: 530px;
				transition: 0.5s;
				color: #0A0D56;
				margin-bottom: 30px;
				justify-self: center;
}



.shop_book_pic {margin-top: 10px;}

.shop_layout_item:hover {transform: scale(1.15);
					border-radius: 20px;
}

#p_name {
	text-align: center;
	font-size: 25px;
	margin-bottom: 0;
	font-weight: 500;
	margin-top: 0;
}

#p_desc {font-weight: 300;
	text-align: center;
	font-size: 15px;
	margin-top: 10px;
	margin-bottom: 0;
}

#p_price {font-weight: 400;
	font-size: 15px;
	margin-top: 5px;
	text-align: center;
}

.üu_text {text-align: center;
	grid-row: 20 / 21;
	grid-column: 1 / 11;
	margin-left: 2%;
	margin-right: 2%;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* cafe */
.layout_cafe {grid-row: 2 / 21;
			grid-column: 1 / 11;
			width: min(1000px, 100%);
			margin: 0 auto;
			columns: 3 300px;
			column-gap: 1em;
			padding: 10px;
			z-index: 1;
}

.img_cafe {width: 100%;
		display: block;
		margin-bottom: 1em;
		box-shadow: 0px 0px 8px rgba(0,0,0,02);
		border-radius: 20px;
}

/* map */
.map {grid-row: 2 / 21;
	grid-column: 1 / 11;
	width: 100%;
	max-width: 1100px;
	z-index: 1;
	margin: 0 auto;
	padding: 1em;
	position: relative;
}

.map img {width: 100%;
	height: 100%;
	object-fit: contain;
}

.pin {background-color: #52f843;
	position: absolute;
	width: 1em;
	height: 1em;
	border-radius: 50%;
}
.pin:hover {transform: scale(1.5);
		background-color: #37ff00;}

.pin::before {
	content: '';
	background-color: #52f843;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: pulse 1.3s ease-in-out infinite;
}

.pin span {display: inline-block;
	white-space: nowrap;
	position: absolute;
	left: 1.5em;
	top: 50%;
	transform: translateY(-50%);
	background-color: #fff;
	border-radius: 3em;
	padding: 0.3em 0.6em;
	font-size: 0.9em;
}

.paris {top: 50%;
	left: 21%;
}

.london {top: 70%;
	left: 75%;
}

.amsterdam {top: 30%;
	left: 80%;
}

.diburg {top: 75%;
	left: 45%;
}

@keyframes pulse {100%{opacity: 0;
					transform: 
						translate(-50%, -50%);
						scale: 2.5;
						}
}

@media screen and (max-width: 600px) {
	.map {font-size: 13px;}
}

/* untergenres */
.h3fantasy {grid-column: 1/11; grid-row:1/2;}
.bekannteAutoren {grid-row:2/21; grid-column:1/11; align-items:start; justify-items: left; padding: 10px;z-index: 1;}
.pic_fantasy {width: min(1000px, 100%);
			margin: 0 auto;
			columns: 3 300px;
			column-gap: 1em;
			padding: 20px;
			}
.img_fantasy:hover {transform: scale(1.15)}

.img_fantasy {width: 300px; 
		width: 100%;
		display: block;
		margin-bottom: 1em;
		box-shadow: 0px 0px 8px rgba(0,0,0,02);
		border-radius: 20px;
		transition: 0.5s;
		}

.baustelle {grid-column: 1 / 11;
		grid-row: 2 / 20;
		z-index: 1;
		width: 100%;}