@font-face {
    font-family: Lobster;
    src: url(./fonts/Lobster-Regular.ttf);
} 

@font-face {
    font-family: Kedebideri-Regular;
    src:url(./fonts/Kedebideri-Regular.ttf);
} 

@font-face {
    font-family: LavishlyYours-Regular;
    src:url(./fonts/LavishlyYours-Regular.ttf);
} 

@font-face {
    font-family: PetitFormalScript-Regular;
    src:url(./fonts/PetitFormalScript-Regular.ttf);
} 

@font-face {
    font-family: ElmsSans-Regular;
    src:url(./fonts/ElmsSans-Regular.ttf);
} 

@font-face {
    font-family: Unkempt-Regular;
    src:url(./fonts/Unkempt-Regular.ttf);
} 

html{
	scroll-behavior: smooth;  /* Smooth scrolling effect */
	background: floralwhite;
}



body{
	display: grid;
    grid-template-areas: 
        "anker anker"
        "header header"
        "nav content"
        "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 0px auto 1fr auto;
    min-height: 98vh;
    gap: 40px;
	font-family: Kedebideri-Regular;
}

header{
	grid-area: header;
	height:103px;
	font-size: 64px;
	margin:0px;
	padding-left:40px;
	padding-top:0px;
	font-family: LavishlyYours-Regular;
}


#anker{
	grid-area: anker; /*für autoscroll*/
	margin: 0px;
	padding: 0px;
}

content{
	grid-area: content;
	display:block;


}

footer {
	grid-area: footer;
	display: block;


	padding-right: 1%;
	text-align: right;
}


nav{
	grid-area: nav
	display: block;
	float: left;
	font-size: 12pt;

}

nav a{
	color: darkslategrey;
	text-decoration: none;
	display: inline-block;
	width: 180px;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 0px;
	background: floralwhite;
}

nav a.haupt_kat_link{
	font-weight: bold;
}

nav a.unter_kat_link{
	border-left: 15px solid darkslategrey;
	color: darkslategrey;
}


nav a.haupt_kat_link.active{
	border-left: 15px solid darkslategrey;
	border-bottom: 3px double darkslategrey;
}

nav a.unter_kat_link.active{
	border-left: 15px solid orange;
	color: darkslategrey;
}

a.lic {
	backround: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}

footer a{
	text-decoration: none;
	color: darkslategrey;
	padding: 0px;
	margin: 0px;

}

.auswahl {
	margin-top: 24px;
}

content a{
	display: inline-block;
	width: 250px;
	text-decoration: none;
	color: darkslategrey;
	background: white;
	padding: 10px;
	margin-bottom: 5px;
	font-size: 12pt;
	font-weight: bold;
	box-shadow: -2px 1px 4px darkgray;
}

content a img{
	max-width: 250px;	
	display: block;
	width:	250px;
	margin: 0;
	padding-bottom: 10px;

}

content p{
	display: inline-block;
	max-width: 570px;
	float: left;
	margin-bottom: 73px;
	padding-left: 25px;
	padding-right: 35px;
	font-size: 20px;
	line-height: 23pt;

}

content img{
	float: left;
	margin-top: 23px;
	max-width: 40%;	
	margin-right: 20px;
	box-shadow: -2px 1px 5px darkgray;
}

.auswahl img{
	box-shadow: none;
}

content img.qr{
	position: absolute;
	top: 25px;
	right: 5%;
	width: 125px;
	margin: 0px;
	box-shadow: none;
}

content h1{
	text-align: right;
	color: darkslategrey;
	border-bottom: 3px double darkslategrey;
	font-family: Unkempt-Regular;
	margin: 0;
	margin-right: 7%;
	padding-right: 20px;
	padding-bottom: 6px;
	margin-bottom: 21px;
	font-size: 28pt;
}

.back-to-top {
    position: fixed;  /* Keeps the button in a fixed position */
    bottom: 20px;     /* Distance from the bottom */
    left: 20px;      /* Distance from the right */
    background-color: darkslategrey; /* Background color */
    border-radius: 50px;       /* Rounded corners */
    padding: 10px;            /* Padding for better appearance */
    display: none;            /* Initially hidden */
    z-index: 1000;           /* Ensure it appears above other elements */
    height: 30px;
    width: 30px;
    text-decoration: none;
    font-size: 14pt;
    text-align: center;
    color: floralwhite;
}



@media only screen and (orientation: portrait) {
	body{
		display: grid;
	    grid-template-areas: 
	        "header"
	        "nav"
	        "anker"
	        "content"
	        "footer";
	    grid-template-columns: 1fr;
	    grid-template-rows: auto 1fr 0px auto auto;
	    min-height: 100vh;
	    gap: 40px;
		font-family: Kedebideri-Regular;
	}


	content h1{
		margin: 0;
		margin-right: 0%;
		padding-right: 5%;
	}


	content img{
		max-width: none;
		width: 100%;
		margin-left: 0px;
		padding-left: 0px;

	}


	content p{
		width: 84%;
		padding-left: 8%;
		padding-right: 0px;

	}


	content a{
		margin-left: 3%;
		
		width: 90%;
	}

	content a img{
		width:	100%;	
		max-width: none;
	}

	content img.qr{
		position: relative;
		float: none;
		top: auto;
		right:auto;
		width: 32%;
		margin-left: 34%;
		padding-top: 20%;
		
	}



	nav a{
		color: darkslategrey;
		text-decoration: none;
		display: inline-block;
		font-size: 14pt;
		width: 87%;
		padding-top: 12px;
		padding-bottom: 24px;
		margin-bottom: 0px;
	}



	.back-to-top {
		display: initial;
		}

}