* {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	margin: 0px;
	scroll-behavior: smooth; /*scrollen zum Ankerpunkt verlangsamen*/
}

.Volleyball1, .Urlaub1, .FreundeFamilie1 {
	margin-left: 10px;
	margin-top: 20px;
	height: 300px;
	width: auto;
 	transition: transform 0.3s ease; /* Animiert die Veränderung der Skalierung */
	border-radius: 5px;
}
 	
.Volleyball1:hover, .Urlaub1:hover, .FreundeFamilie1:hover {
	transform: scale(1.1); /* Vergrößert das Bild auf 110% bei Hover */
}

.Bilder {
	background-color: hsla(0,25%,66%,1.00);
	height: 105%;
	padding-right:10px;
}

.InhaltImpressum {
	background-color: hsla(0,25%,66%,1.00);
	height:105vh;
	padding:20px 10px 20px 20px;
	color:white;
}

header {
	height: 50px;
	position: right;
	padding-right: 10px;
	font-size: 20px;
	display: flex;
}

.navigation {
	background-color: hsla(0,25%,54%,0.84);
	padding: 10px;;
	width: 100%;
	margin: -20px;
	text-align: right;
}

.IB {
	position: absolute;
}

nav ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	position:fixed; 
	top:10px; 
	right:20px; 
} 

nav {
	float: right;
}

li {
	display: inline;
	margin:15px;
}

nav a {
	display: inline-block;
	padding-top: 15px;
	color: hsla(0,0%,100%,1.00);
	text-decoration: none;
}

.active{
	font-weight: bold;
}

a {
	display: inline-block;
	color: hsla(0,0%,100%,1.00);
	text-decoration: none;
}

nav a:hover{
	color: hsla(188,48%,58%,1.00);
	text-decoration: underline;
}

tr td a:hover {
	color: hsla(205,100%,37%,1.00);
	text-decoration: underline;
}

tr td a{
	color: hsla(0,0%,100%,0.79);
}

.bodynormal {
	margin-top: -50px;
	padding: 0px;
}

.FreundeFamilie {
	background-color: hsla(0,25%,60%,1.00);
	color: hsla(0,0%,100%,1.00);
	font-size: 20px;
	padding: 20px;
	padding-bottom: 20px;
}

.UrlaubBilder {
	background-color: hsla(0,25%,66%,1.00);
	height:101vh;
}

.Bildergesamt {
	margin-left: 20px;
}

nav ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	position: fixed;
	top: 10px;
	right: 20px;
	z-index: 1001; /*im Vordergrund*/
}

nav ul li a {
	font-weight: normal;

}

.Website {
	display: flex;
	flex-flow: row wrap;
	color: hsla(0, 0%, 100%, 1.00);
}

.Website>* {
	padding: 80px;
	margin-top: 0px;
	flex: 1 100%; /*Element im verfügbaren Raum zu verteilen*/
	height: 400px;
}

.Freundschaft {
	background: linear-gradient(to top, rgba(121, 121, 121, 0.4), rgba(121, 121, 121, 0.8)), url("images/Startseite/Sonne.jpg");
	background-size: cover; /*Bild soll ganzes Element verdecken*/
	background-position: center;
	text-align: center;
	z-index: 1000;
	height: 500px;
}

.Kontakt {
	background-color: hsla(0, 25%, 66%, 1.00);
	height: 150px;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 999;/*im Hintergrund*/
	padding-bottom: 140px;
}

.Bild {
	border-radius: 100%;
	width: 19em;
	height: 19em;
}

.Linie {
	border-bottom: solid 2px hsla(0,0%,100%,0.60);
}

.LinieHome {
	border-bottom: solid 2px hsla(0,0%,100%,0.60);
	margin: 0px 300px 0px 300px;
}

.LinieKontakt {
	border-bottom: solid 2px hsla(0,0%,100%,0.60);
	margin-right: 100px;
}

.Bild1 {
	height: 130px;
	width: 130px;
	margin-left: 3px;
	border-radius: 5px;
}

.Bild1:hover {
	filter: brightness(70%); /*Bild verdunkeln*/
}

h3 {
	padding: 20px;
}

p {
	padding-top: 15px;
	font-size: 18px;
}

.h3 {
	padding-top: 20px;
}

h4 {
	font-size: 24px;
	padding-top: 10px;
}

h2 {
	font-size: 20px;
}

.Visitenkarte {
	height: 190px;
	margin-top: 15px;
}

.container {
	display: flex;
	align-items: center;
}

.container img {
	margin-right: 10px;
}

.BilderSchrift {
	font-size: 10px;
	margin-bottom: -10px;
}

.nichts {
	height: 200px;
}


#Ubermichalles {
	display: flex;
	background-color: hsla(0, 25%, 66%, 1.00);
	z-index: 1000;
}

#Bildich {
	margin-right: 35px;
	margin-top: 30px;
}

#Ubermich-text {
	margin-left: 30px;
	margin-right: 70px;
	margin-top: 100px;
}

#Freizeitalles {
	display: flex;
	background-color: hsla(0, 25%, 60%, 1.00);
	z-index: 1000;
	text-align: right;
}

#BildVolleyball {
	margin-left: 35px;
	margin-top: 50px;
	order: 1;
}

#Freizeit-text {
	margin-left: 70px;
	margin-right: 30px;
	margin-top: 20px;
	order: 2;
}

.FreundschaftH1Box span {
	font-size: 20px;
}

.Schrift {
	font-family: 'Alex Brush';
	font-size: 40px;
}

.Schriftunten {
	font-family: 'Annie Use Your Telescope';
	font-size: 21px;
	letter-spacing: 1px
}

.button {
	border: 1.5px solid white;
	margin: 5px;
	/*Breite*/
	padding: 5px 10px;
	background-color: hsla(0,25%,66%,1.00);
	text-transform: uppercase;
	font-size: 12px;
	/*Schriftgröße*/
	border-radius: 15px;
	cursor: pointer;
}

.buttons {
	text-align: right;
	margin-right: 100px;
	margin-top: 20px;
}

.button a {
	text-decoration: none;
}

.button span {
	cursor: pointer;
	position: relative;
	transition: 0.5s;
	color: hsla(0, 0%, 100%, 1.00);
}

.button span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.button:hover span {
	padding-right: 25px;
}

.button:hover span:after {
	opacity: 1;
	right: 0;
}
.home-icon {
	border-radius: 10000%;
	padding: 15px;
	text-align: center;
	border: 2px solid hsla(0,0%,100%,0.47);
}

table {
    padding: 20px;
	width: 100%;
	font-size: 25px;
}

td {
	padding: 2px 10px 2px 10px;
	font-size: 19px;
}

table, td {
	border: 1px solid white; /*border-radius: 10px;*/
	border-collapse: collapse;
}

tr:nth-child(even) td{
	background-color:hsla(0,25%,60%,1.00);
}

.Bildrechte {
	background-color: hsla(0,25%,60%,1.00);
	height:100px;
	color: hsla(0,0%,100%,1.00);
	font-size: 20px;
	padding: 20px;
	padding-bottom: 5px;
}

.alles {
	background-color: hsla(0,25%,66%,1.00);
	height: 100vh;
	color: hsla(0,0%,100%,1.00);
}

.rechte {
	padding: 20px;
}

.rechteeigeneBilder {
	padding-top: 60px;
}

.Uberschrift {
	margin-bottom: 10px;
}

.Uberschrift2 {
	margin-bottom: -7px;
}

.Uberschrift, .Uberschrift2 {
	font-size: 23px;
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* alex-brush-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Alex Brush';
	font-style: normal;
	font-weight: 700;
	src: url('font/alex-brush-v22-latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* annie-use-your-telescope-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Annie Use Your Telescope';
	font-style: normal;
	font-weight: 600;
	src: url('font/annie-use-your-telescope-v18-latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}

@keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}