@font-face {
    font-family: 'Lora';
    src: url('../src/fonts/Lora_font/static/Lora-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('../src/fonts/Lora_font/static/Lora-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: bold;
}

@font-face {
    font-family: 'Lora';
    src: url('../src/fonts/Lora_font/static/Lora-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../src/fonts/Open_Sans/static/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../src/fonts/Open_Sans/static/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: bold;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../src/fonts/Open_Sans/static/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../src/fonts/Open_Sans/static/OpenSans-Light.ttf') format('truetype');
    font-weight: 100;
    font-style: light;
}


/*Small devices*/
@media screen and (min-width: 0px) and (max-width: 767px) /*767*/{

	*{
		font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
		color: hsl(249, 30%, 20%);
		font-size: none;
	}
	/* header, nav, main, footer {
		display: none;
	} */

	.mobile-warning {
    display: none;
    /* position: fixed;
    top: 0; left: 0;
    width: 90%; height: 100%;
    background: white;
    color: #222;
    z-index: 9999;
    padding: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
  }

	html{
		margin-top: 0;
		width: 100%;
	}

	
	header nav {
		font-family: 'Open Sans';
		font-style: italic;
		font-size: .7rem;
		margin-top: 7px;
	}
	
	header h3 {
		font-family: 'Lora';
		font-style: bold;
		font-size: 2em;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	
	.hidePls {
		display: none;
	}
	
	.navigation {
		margin-left: 0vw;
		margin-right: 0vw;
		background-color: hsl(209, 30%, 70%);
	}

	
	.navigation li > ul {
		visibility: hidden;
		position: absolute;
		display: none;
	}
	
	.navigation > ul {
		padding-left: 0;
		justify-content: center;
		display: flex;
		list-style-type: none;
		font-style: bold;
		font-size: 1.3rem;
		margin: 0;
		margin-top: 0.3rem;
	
	}

	/* .navigation ul {
		dipl
	} */
	
	
	.navigation li {
		justify-content: center;
		position: relative;	
			margin: 0 30px 0 30px;
		border-color: #0E0E0E;
		border: 3px;;
		display: block;
	}
	
	.navigationImpressum {
		display: flex;
		height: 30px;
		background-color: hsl(209, 30%, 70%);
		justify-content: center;
	}
	.impressum {
		margin-top: 4px;
	}
	
	a {
			text-decoration: none;
			color: #333;
	}
	a:hover {
		color: #9b9b9b;
	}
	
	.navigation li:hover > a{
			color: #9b9b9b; 
		cursor: pointer;
	} 
	
	.dropdown_nav {
			position: relative; 
		top: 30px;
			background-color: hsl(32, 30%, 60%);
		
			list-style-type: none;
			padding: 0;
	}
	.navigation li > ul > li {
		opacity: 0.9;
		margin-left: 6px;
		margin-right: 7px;
	}
	
	.navigation li > ul > li > a:hover {
		color: hsl(0, 30%, 40%)
	}
	
	.navigation li:hover > ul {
			visibility: visible;
		display: block;
	}
	
	
	body{
		position: 0;
		/* background-color: hsl(32, 50%, 80%); */
		background-color: #c2ccd6;
		margin: 0;
		padding: 0;
	}
	
	header {
		position: relative;
		height: 50%;
		/* font-family: 'Lora';
		font-style: normal;
		font-size: 1.4rem; */
		/* background-color: hsl(32, 30%, 60%); */
		background-color: hsl(209, 30%, 50%);
		/* padding-top: 12vh; */
		/* padding-bottom: 0.3rem; */
		/* background-image: url('../src/Saskia/Maasholm\ \(1\ von\ 1\)-4.jpg'); */
		/* background-image: url('../src/Saskia/Langzeitbelichtung\ Januar\ 22\ \(1\ von\ 1\).jpg'); */
		background-image: url('../src/Saskia.jpeg');
		background-repeat: none;
		background-position: 0;
		/* background-position-y: 320px; */
		background-position-y: 460px;
		background-size: 100% auto;
		background-attachment: fixed;
	}
	
	.Headerline{
		position: absolute;
		display: block;
		filter:brightness(120%)
	}
	
	.logo_header {
		/* margin-top: 30px; */
		filter:brightness(120%);
		/* position: absolute; */
		margin-left: 31vw;
		height: 130px;
	}
	.saskiaFont {
		margin-top: 68px;
		filter:brightness(120%);
		margin-left: 31vw;
		height: 90px;
	}

	/*merged into header*/
	
	/* #welcomeHeader{
		background-image: url('../src/Saskia.jpeg');
		background-repeat: none;
		background-position: 0;background-position-y: 593px;
		background-size: 100% auto;
		background-attachment: fixed;
	}
	
	#aboutHeader {
		background-image: url('../src/coast-7338147_1920.jpg');
		background-repeat: none;
		background-position: 0;
		background-position-y: 887px;
		background-size: 100% auto;
		background-attachment: fixed;
	} */
	
	.longs{
		margin-right: 25vw;
		font-size: 1rem;
		padding-left: 2vw;
		margin-top: 0.5rem;
	}
	
	
	
	.longs p {
		line-height: 1.2rem; /*Durchschuss*/
	}
	/*ueber are the articles*/
	#ueber{
		margin-right: 2vw;
		margin-top: 2vw;
		margin-left: 5vw;
		margin-bottom: 10vh;
		width: 90vw;
	}
	#ueber .longs {
		margin-right: 0vw;
	}
	
	#ueber .bridge{
		padding-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#flex_start {
		display: block;
	}
	
	#info {
		margin-right: 2vw;
		/*float: left;*/
		margin-left: 3vw;
		margin-top: 5vw;
	}
	#info .longs {
		padding-top: 0.7vw; 
		padding-bottom: 0.5vw;
		background-color: #d1d9e0;
		/* border: #c2ccd6; */
		margin-right: 0;
		/* border-style: groove; */
		width: 90vw
	}
	
	.bridge {
		font-style: italic;
	}
	
	form{
		margin-left: 30vw;
		margin-right: 30vw;
		position: static;
		display: grid;
	}
	
	form button{
		width: 200px;
		height: 60px;
		display: block;
		margin-left: 50vw;
	}
	
	#saskia_about_img{

		position: absolute;
		display: none;
		visibility: hidden;
		width: 25vw;
		height: auto;
		margin-left: 4.3vw;
		margin-top: 4vw;
	}
	#saskia_home_img_mask {
		display: none;
		background-size: 220%;
		background-position-x: -210px;
		position: absolute;
		width: 20vw;
		height: auto;
		margin-left: 8vw;
		margin-top: 4vw;
		font-size: 0.7rem;
	
		overflow: hidden;
	
	
	}
	#saskia_home_img {
		visibility: hidden;
		width: 45vw;
		transform: translateX(-220px);	
	}
	
	#saskia_mobile_note {
		position:flex;
		margin-left: 12vw;
		height: 170px;
	}
	
	
	#lotte_img {
		position: absolute;
		margin-left: 60vw;
		margin-top: 4vw;
		font-size: 0.7rem;
	}
	#lotte_img img{
	
		display: block;
		width: 30vw;
		height: auto;
	}
	
	.rasmus {
		display: none;
		position: fixed;
			right: 10; /* Positioniert die Navigationsliste auf der rechten Seite */
			top: 96vh; /* Beginnt von der Oberkante des Bildschirms */
		font-style: italic;
		font-size: 0.7rem;
		text-decoration: none; /* Unterstreichung entfernen */
			color: #333; /* Textfarbe */
	}
	.rasmus:hover{
		color: hsl(0, 0%, 40%); /* Hover-Farbe */
	}

}

/*-------------------------------------------------------------------------------------------------------------------------
// Medium Devices */
@media screen and (min-width: 767px) and (max-width: 1023px) {
	*{
		font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
		color: hsl(249, 30%, 20%);
		font-size: none;
	
	}
	/* header, nav, main, footer {
		display: none;
	} */
	.mobile-warning {
		display: none;
    /* display: block;
    position: fixed;
    top: 0; left: 0;
    width: 90%; height: 100%;
    background: white;
    color: #222;
    z-index: 9999;
    padding: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
  }
	/*before only if not ready*/
	.mobile-warning {
		display: none;
	}
	
	html{
		margin-top: 0;
	}
	
	header nav {
		font-family: 'Open Sans';
		font-style: italic;
		font-size: .7rem;
		margin-top: 7px;
	}
	
	header h3 {
		font-family: 'Lora';
		font-style: bold;
		font-size: 2em;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	
	.hidePls {
		display: none;
	}
	
	.navigation {
		margin-left: 0vw;
		margin-right: 0vw;
		background-color: hsl(209, 30%, 70%);
	}
	
	.navigation li > ul {
		visibility: hidden;
		position: absolute;
		display: none;
	}
	
	.navigation > ul {
		padding-left: 0;
		justify-content: center;
			display: flex;
		list-style-type: none;
		font-style: bold;
		font-size: 1.3rem;
		margin: 0;
		margin-top: 0.3rem;
	
	}
	
	
	.navigation li {
		position: relative;	
			margin: 0 30px 0 30px;
		border-color: #0E0E0E;
		border: 3px;;
		display: block;
	}
	
	.navigationImpressum {
		display: flex;
		height: 30px;
		background-color: hsl(209, 30%, 70%);
		justify-content: center;
	}
	.impressum {
		margin-top: 4px;
	}
	
	a {
			text-decoration: none;
			color: #333;
	}
	a:hover {
		color: #9b9b9b;
	}
	
	.navigation li:hover > a{
			color: #9b9b9b; 
		cursor: pointer;
	} 
	
	.dropdown_nav {
			position: relative; 
		top: 30px;
			background-color: hsl(32, 30%, 60%);
		
			list-style-type: none;
			padding: 0;
	}
	.navigation li > ul > li {
		opacity: 0.9;
		margin-left: 6px;
		margin-right: 7px;
	}
	
	.navigation li > ul > li > a:hover {
		color: hsl(0, 30%, 40%)
	}
	
	.navigation li:hover > ul {
			visibility: visible;
		display: block;
	}
	
	
	body{
		position: 0;
		/* background-color: hsl(32, 50%, 80%); */
		background-color: #c2ccd6;
		margin: 0;
		padding: 0;
	}
	
	header {
		position: relative;
		height: 120px;
		/* font-family: 'Lora';
		font-style: normal;
		font-size: 1.4rem; */
		/* background-color: hsl(32, 30%, 60%); */
		background-color: hsl(209, 30%, 50%);
		/* padding-top: 12vh; */
		/* padding-bottom: 0.3rem; */
	}
	
	.Headerline{
		position: absolute;
		display: flex;
		filter:brightness(120%)
	}
	
	.logo_header {
		margin-top: 5px;
		filter:brightness(120%);
		/* position: absolute; */
		margin-left: 50vw;
		height: 120px;
	}
	.saskiaFont {
		margin-top: 47px;
		filter:brightness(120%);
		margin-left: 3vw;
		height: 70px;
	}
	
	#welcomeHeader{
		/* background-image: url('../src/Saskia/Maasholm\ \(1\ von\ 1\)-4.jpg'); */
		background-image: url('../src/Saskia/Langzeitbelichtung\ Januar\ 22\ \(1\ von\ 1\).jpg');
		background-repeat: none;
		background-position: 0;
		/* background-position-y: 320px; */
		background-position-y: 593px;
		background-size: 100% auto;
		background-attachment: fixed;
	}
	
	#aboutHeader {
		background-image: url('../src/coast-7338147_1920.jpg');
		background-repeat: none;
		background-position: 0;
		/* background-position-y: 320px; */
		background-position-y: 887px;
		background-size: 100% auto;
		background-attachment: fixed;
	}
	
	.longs{
		margin-right: 25vw;
		font-size: 1rem;
		padding-left: 2vw;
		margin-top: 0.5rem;
	}
	
	
	
	.longs p {
		line-height: 1.2rem; /*Durchschuss*/
	}
	/*ueber are the articles*/
	#ueber{
		margin-right: 2vw;
		margin-top: 2vw;
		margin-left: 30vw;
		margin-bottom: 10vh;
		width: 33vw;
	}
	#ueber .longs {
		margin-right: 0vw;
	}
	
	#ueber .bridge{
		padding-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#flex_start {
		display: flex;
	}
	
	#info {
		margin-right: 2vw;
		/*float: left;*/
		margin-left: 0vw;
		margin-top: 5vw;
	}
	#info .longs {
		padding-top: 0.7vw; 
		padding-bottom: 0.5vw;
		background-color: #d1d9e0;
		/* border: #c2ccd6; */
		margin-right: 0;
		/* border-style: groove; */
		width: 23vw
	}
	
	.bridge {
		font-style: italic;
	}
	
	form{
		margin-left: 30vw;
		margin-right: 30vw;
		position: static;
		display: grid;
	}
	
	form button{
		width: 200px;
		height: 60px;
		display: block;
		margin-left: 50vw;
	}
	
	#saskia_about_img{
		position: absolute;
		display: block;
		width: 25vw;
		height: auto;
		margin-left: 4.3vw;
		margin-top: 4vw;
		
	}
	#saskia_home_img_mask {
		background-size: 220%;
		background-position-x: -210px;
		position: absolute;
		width: 20vw;
		height: auto;
		margin-left: 8vw;
		margin-top: 4vw;
		font-size: 0.7rem;
	
		overflow: hidden;
	
	
	}
	#saskia_home_img {
		width: 45vw;
		transform: translateX(-180px);	
	}
	
	#saskia_mobile_note {
		position:flex;
		height: 170px;
	}
	
	
	#lotte_img {
		position: absolute;
		margin-left: 60vw;
		margin-top: 4vw;
		font-size: 0.7rem;
	}
	#lotte_img img{
	
		display: block;
		width: 30vw;
		height: auto;
	}
	
	.rasmus {
		position: fixed;
			right: 10; /* Positioniert die Navigationsliste auf der rechten Seite */
			top: 96vh; /* Beginnt von der Oberkante des Bildschirms */
		font-style: italic;
		font-size: 0.7rem;
		text-decoration: none; /* Unterstreichung entfernen */
			color: #333; /* Textfarbe */
	}
	.rasmus:hover{
		color: hsl(0, 0%, 40%); /* Hover-Farbe */
	}

}/*end of medium screen*/
/*-------------------------------------------------------------------------------------------------------------------------
// Desktop/big devices */
 @media screen and (min-width: 1024px) {/*1024 desktop*/
*{
	font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	color: hsl(249, 30%, 20%);
	font-size: none;
}
.mobile-warning {
	display: none;
}

html{
	margin-top: 0;
}

header nav {
	font-family: 'Open Sans';
	font-style: italic;
	font-size: .7rem;
	margin-top: 7px;
}

header h3 {
	font-family: 'Lora';
	font-style: bold;
	font-size: 2em;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.hidePls {
	display: none;
}

.navigation {
	margin-left: 0vw;
	margin-right: 0vw;
	background-color: hsl(209, 30%, 70%);
}

.navigation li > ul {
	visibility: hidden;
	position: absolute;
	display: none;
}

.navigation > ul {
	padding-left: 0;
	justify-content: center;
    display: flex;
	list-style-type: none;
	font-style: bold;
	font-size: 1.3rem;
	margin: 0;
	margin-top: 0.3rem;

}


.navigation li {
	position: relative;	
    margin: 0 30px 0 30px;
	border-color: #0E0E0E;
	border: 3px;;
	display: block;
}

.navigationImpressum {
	display: flex;
	height: 30px;
	background-color: hsl(209, 30%, 70%);
	justify-content: center;
}
.impressum {
	margin-top: 4px;
}

a {
    text-decoration: none;
    color: #333;
}
a:hover {
	color: #9b9b9b;
}

.navigation li:hover > a{
    color: #9b9b9b; 
	cursor: pointer;
} 

.dropdown_nav {
    position: relative; 
	top: 30px;
    background-color: hsl(32, 30%, 60%);
	
    list-style-type: none;
    padding: 0;
}
.navigation li > ul > li {
	opacity: 0.9;
	margin-left: 6px;
	margin-right: 7px;
}

.navigation li > ul > li > a:hover {
	color: hsl(0, 30%, 40%)
}

.navigation li:hover > ul {
    visibility: visible;
	display: block;
}


body{
	position: 0;
	/* background-color: hsl(32, 50%, 80%); */
	background-color: #c2ccd6;
	margin: 0;
	padding: 0;
}

header {
	position: relative;
	height: 170px;
	/* font-family: 'Lora';
	font-style: normal;
	font-size: 1.4rem; */
	/* background-color: hsl(32, 30%, 60%); */
	background-color: hsl(209, 30%, 50%);
	/* padding-top: 12vh; */
	/* padding-bottom: 0.3rem; */
}

.Headerline{
	position: absolute;
	display: flex;
	filter:brightness(120%)
}

.logo_header {
	margin-top: 30px;
	filter:brightness(120%);
	/* position: absolute; */
	margin-left: 50vw;
	height: 130px;
}
.saskiaFont {
	margin-top: 68px;
	filter:brightness(120%);
	margin-left: 3vw;
	height: 90px;
}

#welcomeHeader{
	/* background-image: url('../src/Saskia/Maasholm\ \(1\ von\ 1\)-4.jpg'); */
	background-image: url('../src/Saskia/Langzeitbelichtung\ Januar\ 22\ \(1\ von\ 1\).jpg');
	background-repeat: none;
	background-position: 0;
	/* background-position-y: 320px; */
	background-position-y: 593px;
	background-size: 100% auto;
	background-attachment: fixed;
}

#aboutHeader {
	background-image: url('../src/coast-7338147_1920.jpg');
	background-repeat: none;
	background-position: 0;
	/* background-position-y: 320px; */
	background-position-y: 887px;
	background-size: 100% auto;
	background-attachment: fixed;
}

.longs{
	margin-right: 25vw;
	font-size: 1rem;
	padding-left: 2vw;
	margin-top: 0.5rem;
}



.longs p {
	line-height: 1.2rem; /*Durchschuss*/
}
/*ueber are the articles*/
#ueber{
	margin-right: 2vw;
	margin-top: 2vw;
	margin-left: 30vw;
	margin-bottom: 10vh;
	width: 33vw;
}
#ueber .longs {
	margin-right: 0vw;
}

#ueber .bridge{
	padding-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#flex_start {
	display: flex;
}

#info {
	margin-right: 2vw;
	/*float: left;*/
	margin-left: 0vw;
	margin-top: 5vw;
}
#info .longs {
	padding-top: 0.7vw; 
	padding-bottom: 0.5vw;
	background-color: #d1d9e0;
	/* border: #c2ccd6; */
	margin-right: 0;
	/* border-style: groove; */
	width: 23vw
}

.bridge {
	font-style: italic;
}

form{
	margin-left: 30vw;
	margin-right: 30vw;
	position: static;
	display: grid;
}

form button{
	width: 200px;
	height: 60px;
	display: block;
	margin-left: 50vw;
}

#saskia_about_img{
	position: absolute;
	display: block;
	width: 25vw;
	height: auto;
	margin-left: 4.3vw;
	margin-top: 4vw;
}
#saskia_home_img_mask {
	background-size: 220%;
	background-position-x: -210px;
	position: absolute;
	width: 20vw;
	height: auto;
	margin-left: 8vw;
	margin-top: 4vw;
	font-size: 0.7rem;

	overflow: hidden;


}
#saskia_home_img {
	width: 45vw;
	transform: translateX(-220px);	
}

#saskia_mobile_note {
	position:flex;
	height: 170px;
}


#lotte_img {
	position: absolute;
	margin-left: 60vw;
	margin-top: 4vw;
	font-size: 0.7rem;
}
#lotte_img img{

	display: block;
	width: 30vw;
	height: auto;
}

.rasmus {
	position: fixed;
    right: 10; /* Positioniert die Navigationsliste auf der rechten Seite */
    top: 96vh; /* Beginnt von der Oberkante des Bildschirms */
	font-style: italic;
	font-size: 0.7rem;
	text-decoration: none; /* Unterstreichung entfernen */
    color: #333; /* Textfarbe */
}
.rasmus:hover{
	color: hsl(0, 0%, 40%); /* Hover-Farbe */
}

} /*end of display screen*/

#body_login {
	display: flex;
	justify-content: center;
  align-items: center;
	margin-top: 5vh;
}

#login_form {
	background-color: hsl(209, 30%, 50%);
	width: 20vw;
	display: flex;
	flex-direction: column;
	margin-top: 5vh;
	border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	align-items: center;
	justify-content: center;
}

#login_form p {
	margin-left: 10px;
}

#login_password {
	background-color: #c2ccd6;
	width: 10vw;
}
#login_submit {
	background-color: #c2ccd6;
	margin-top: 5px;
	margin-left: 0;
	height: 23px;
	width: 54px;
}