body {margin: 0;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}

#first {
	border-color: rgba(154, 175, 50, 1.0);
	color: #333;
}
#second {
	border-color: rgba(84,84,84,1.0);
	color: #333;
}
#third {
	border-color: rgba(225, 0, 0, 1.0);
	color: #333;
}

#first:hover {
	background-color: rgba(154, 175, 50, 1.0);
	color: #fff;
}
#second:hover {
	background-color: rgba(84,84,84,1.0);
	color: #fff;
}
#third:hover {
	background-color: rgba(225, 0, 0, 1.0);
	color: #fff;
}

 
/* =============================== Handy Auflösung =============================== */
@media screen and (max-width: 800px) {

	h1 {
		color: #fff;  
		font-family: Literata; 
		font-size: 1.9em; 
		font-weight: 600;
		text-align: center;
		margin-top: -5px;
		margin-bottom: 2px;
		padding-bottom: 10px;
		padding-top: 15px;
		opacity: 1.0; 
		text-shadow: 2px 2px 8px #555;
		background-color: red; /*#bbb;*/
		height: 80px;
	}

	/* -------------------- Frontpage Layout -------------------- */
    /* Background Image Styles */
    .bg-image {
        position: relative;
        width: 100%;
		margin-top: 2px;
        height: calc(100vh - 78px); /* Set height to 100vh to match the viewport height */
        background-image: url('title-image_1.webp'); /* Replace with your image URL */
        background-size: cover; /* Cover the entire container, even if part of the image is not visible */
        background-position: center; /* Center the image horizontally and vertically */
        background-repeat: no-repeat; /* Prevent image repetition */
    }

    /* Content Styles (for demonstration) */
    .title-content {
        position: absolute; /* Position the text container absolutely */
        top: 35%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Center both vertically and horizontally */
        max-width: 450px;
        text-align: center;
        font-family: Literata; 
        color: #fff;
        background: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
        border-radius: 10px; /* Rounded corners for the text container */
    }

    .title-content-title {
        font-size: 1.7em;
        font-weight: bold;
        padding-top: 10px;
        padding-bottom: 15px;
		padding-left: 5px;
		padding-right: 5px;
        letter-spacing: 3px;
        text-shadow: 3px 3px 5px black, -1px -1px 3px black, 0 0 15px white, 0 0 15px white;
    }
    .title-content-text {
        font-size: 1.0em;
        text-shadow: 1px 1px 3px black, -1px -1px 3px black, 0 0 5px white, 0 0 5px white;
        padding-bottom: 10px;
		padding-left: 5px;
		padding-right: 5px;
    }
    .start-prepping-button {
        display: block;
        margin-top: 20px;
        text-align: center;
        text-decoration: none;
        background-color: rgba(255,0,0,0.7);
        font-family: Literata; 
        font-size: 1.1em;
        color: white;
        padding: 8px 10px;
        border-radius: 5px;
        font-weight: normal;
    }
    .start-prepping-button:hover {
        background-color: red;
        color: white;
    }

	/* -------------------- End - Frontpage Layout -------------------- */



	/* -------------------- ANFANG Cookie Consent -------------------- */
	#cookies{
		visibility: hidden;
		position: fixed;
		width: 100%;
		margin: auto;
		bottom: 5px;
	}
	
	#cookies.show {
		visibility: visible;
		-webkit-animation: fadein 2s;
		animation: fadein 2s;
		position: fixed;
		background: rgba(0, 0, 0, 0.3);
	}
	
	@-webkit-keyframes fadein {
		from {bottom: -150px; opacity: 0;} 
		to {bottom: 5px; opacity: 1;}
	}
	
	@keyframes fadein {
		from {bottom: -150px; opacity: 0;}
		to {bottom: 5px; opacity: 1;}
	}
	
	.sub-title {
		color: #777;  
		font-family: Literata; 
		font-size: 1.5vw; 
		line-height: 2.5vw; 
		font-weight: 300;
		text-align: center;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: -20px;
		}

	.cookieContainer{
		background-color: #F0F0F0;
	}
	.cookieContainerTitle {
		font-family: Oswald; 
		font-size: 1.2em;
		text-align: center;
		color: #eee;
		padding-top: 5px;
	}
	.cookieContainerText {
		padding: 2px;
		font-family: Oswald; 
		font-size: 0.8em;
		line-height: 1.2em;
		text-align: center;
		color: #eee;
	}
	
	.cookieNavbar {
		text-align: center;
		width: 100%;
		margin: auto;
		background: rgba(0, 0, 0, 0.0);
		overflow: auto;
		padding-top: 5px;
	}

	.cookieNavbar a {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 1%;
		margin-bottom: 5px;
		background-color: white; 
		border: 3px solid rgba(0, 0, 0, 1.0);
		border-radius: 7px;
		font-weight: 500;
		color: #333;
		text-decoration: none;
		font-family:Oswald; 
		font-size: 14px;
		line-height: 16px;
		width: 32%; 
		text-align: center;
	}

	/* ============== Navigation Handy ============== */
	.topnav {
		background-color: #666;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.topnav a {
		float: left;
		display: block;
		font-family: Literata; 
		text-align: center;
		padding: 8px 10px;
		text-decoration: none;
		font-size: 16px;
		color: #fff;
	}
	.topnav a:hover {
		background-color: #ddd;
		color: #000;
	}
	.topnav  .active {
		background-color: red;
		color: #fff;
	}
	.topnav .icon {
		display: none;
		color: #fff;
	}
	.topnav a:link {
		color: #fff;
	}
	.topnav a:hover a:link {
		color: #000;
	}
	.topnav a {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		color: #fff;
	}
	.topnav.responsive.  icon:hover {
		background-color: red;
		color: #000;
	}
	.topnav.responsive a:hover {
		color: #000;
	}

	.update{
		font-family: Arial;
		font-size: 0.6em;
		color: #888;
		margin-top: -15px;
		padding-right: 10px;
		padding-bottom: 15px;
		text-align:right;
	}

	/* ============== About: Handy ============== */
	.about {
		column-count: 1;
		padding-left: 10px;
		padding-right: 10px;
		}
	.about_title {
		font-family: Oswald;
		font-size: 1.6em;
		color: #555;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 15px;
	}
	.about_subtitle {
		font-family: Literata;
		font-size: 1.1em;
		color: #555;
		margin-bottom: 10px;
	}
	.about_description {
		color: #555;  
		font-family: Literata; 
		font-size: 0.9em; 
		line-height: normal;
		text-align: left;
		column-count: 1;
		padding-bottom: 5px;
		}	
	.about_description a {
		color: #B22222;  
		text-decoration: none;
	}
	a:hover {
		color: #FF4500;
		background-color: transparent;
	}

	a:active {
		color: red;
		background-color: transparent;
	}
	
	.about_image_l {
		padding-top: 7px;
		margin-right: 10px;
		width: 200px;
		height: 200px;
		float: left;
	}
	.about_image_r {
		padding-top: 7px;
		margin-left: 10px;
		width: 200px;
		height: 200px;
		float: right;
	}
	.about_image_2 {
		margin-top: 7px;
		padding-bottom: 10px;
		margin-right: 10px;
		width: 360px;
		height: 200px;
		float: left;
		border: 1px solid #999;
	}

	.link-list-title {
		font-family: Literata;
		font-size: 1.2em;
		color: #666;
		padding-top: 15px;
		padding-left: 10px;
		text-align: left;
	}

	.link-list li{
		font-family: Literata;
		font-size: 1.0em;
		padding-left: 10px;
		text-align: left;
	}

	/* -------------------- Info -------------------- */
	.front-title {
		font-family: Literata;
		font-size: 1.1em;
		max-width: 250px;
		margin: auto;
		text-align: center;
		margin-top: 10%;
	}


	/* ============== Impressum: Smartphone ============== */
	.impr {
		padding-left: 10px;
		padding-right: 10px;
		color : #777;
	}

	.impr_title {
		font-family: Oswald;
		font-size: 1.6em;
		color: #777;
	}
	.impr_subtitle {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.1em;
		color: #888;
	}
	.impr_subtitle2 {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.0em;
		color: #888;
	}
	.impr_description {
		color: #777;  
		font-family: Literata;
		font-size: 1.0em;
		hyphens: auto;
	}

}



/* =============================== Tablet Auflösung =============================== */
@media screen and (min-width: 801px) and (max-width: 1300px){

	h1 {
		color: #fff;  
		font-family: Literata; 
		font-size: 3.1em; 
		font-weight: 600;
		text-align: center;
		margin-top: -5px;
		margin-bottom: 2px;
		padding-bottom: 10px;
		padding-top: 15px;
		opacity: 1.0; 
		text-shadow: 2px 2px 8px #555;
		background-color: red;
		height: 110px;
	}

	/* -------------------- Frontpage Layout -------------------- */
    /* Background Image Styles */
    .bg-image {
        position: relative;
        width: 100%;
		margin-top: 2px;
        height: calc(100vh - 108px); /* Set height to 100vh to match the viewport height */
        background-image: url('title-image_1.webp'); /* Replace with your image URL */
        background-size: cover; /* Cover the entire container, even if part of the image is not visible */
        background-position: center; /* Center the image horizontally and vertically */
        background-repeat: no-repeat; /* Prevent image repetition */
    }

    /* Content Styles (for demonstration) */
    .title-content {
        position: absolute; /* Position the text container absolutely */
        top: 40%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Center both vertically and horizontally */
        max-width: 550px;
        text-align: center;
        font-family: Literata; 
        color: #fff;
        background: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
        border-radius: 10px; /* Rounded corners for the text container */
        padding: 20px;
    }
    .title-content-title {
        font-size: 2.2em;
        font-weight: bold;
        padding-bottom: 15px;
        letter-spacing: 3px;
        text-shadow: 3px 3px 5px black, -1px -1px 3px black, 0 0 15px white, 0 0 15px white;
    }
    .title-content-text {
        font-size: 1.1em;
        text-shadow: 1px 1px 3px black, -1px -1px 3px black, 0 0 5px white, 0 0 5px white;
    }
    .start-prepping-button {
        display: block;
        margin-top: 20px;
        text-align: center;
        text-decoration: none;
        background-color: rgba(255,0,0,0.7);
        font-family: Literata; 
        font-size: 1.1em;
        color: white;
        padding: 8px 10px;
        border-radius: 5px;
        font-weight: normal;
    }
    .start-prepping-button:hover {
        background-color: red;
        color: white;
    }

	/* -------------------- End - Frontpage Layout -------------------- */


	/* ------ ANFANG Cookie Consent ------ */
	#cookies{
		visibility: hidden;
		position: fixed;
		width: 100%;
		margin: auto;
		bottom: 5px;
	}
	
	#cookies.show {
		visibility: visible;
		-webkit-animation: fadein 2s;
		animation: fadein 2s;
		position: fixed;
		background: rgba(0, 0, 0, 0.3);
	}
	
	@-webkit-keyframes fadein {
		from {bottom: -150px; opacity: 0;} 
		to {bottom: 5px; opacity: 1;}
	}
	
	@keyframes fadein {
		from {bottom: -150px; opacity: 0;}
		to {bottom: 5px; opacity: 1;}
	}
	
	.sub-title {
		color: #ccc;  
		font-family: Literata; 
		font-size: 1.7vw; 
		line-height: 2.5vw; 
		font-weight: 300;
		text-align: center;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: -20px;
		}

	.cookieContainer{
		background-color: #F0F0F0;
	}
	.cookieContainerTitle {
		font-family: Oswald; 
		font-size: 1.2em;
		line-height: 1.5vw; 
		text-align: center;
		color: #eee;
		padding-top: 15px;
	}
	.cookieContainerText {
		padding: 5px;
		font-family: Oswald; 
		font-size: 1.0em;
		line-height: 1.4em;
		text-align: center;
		color: #eee;
	}
	
	.cookieNavbar {
		text-align: center;
		width: 100%;
		margin: auto;
		background: rgba(0, 0, 0, 0.0);
		overflow: auto;
		padding-top: 5px;
	}

	.cookieNavbar a {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 1%;
		margin-bottom: 5px;
		background-color: white; 
		border: 3px solid rgba(154, 154, 154, 1.0);
		border-radius: 7px;
		font-weight: 500;
		color: #333;
		text-decoration: none;
		font-family: Oswald; 
		font-size: 14px;
		line-height: 16px;
		width: 32%; 
		text-align: center;
	}

	/* ============== About: Tablet ============== */
	.about {
		padding-left: 13%;
		padding-right: 13%;
		color : #777;
		column-count: 3;
	}
	.about_title {
		font-family: Oswald;
		font-size: 2em;
		color: #666;
		text-align: center;
		padding-bottom: 10px;
	}

	.about_subtitle {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.1em;
		color: #888;
	}

	.about_description {
		color: #777;  
		font-family: Literata;
		font-size: 0.9em;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	.about_description a {
		color: #B22222;  
		text-decoration: none;
	}

	a:hover {
		color: #FF4500;
		background-color: transparent;
	}

	a:active {
		color: red;
		background-color: transparent;
	}
	
	.about_image_l {
		padding-top: 7px;
		margin-right: 10px;
		width: 200px;
		height: 200px;
		float: left;
	}
	.about_image_r {
		padding-top: 7px;
		margin-left: 10px;
		width: 200px;
		height: 200px;
		float: right;
	}
	.about_image_2 {
		margin-top: 7px;
		padding-bottom: 10px;
		margin-right: 10px;
		width: 360px;
		height: 200px;
		float: left;
		border: 1px solid #999;
	}
	.link-list-title {
		font-family: Literata;
		font-size: 1.2em;
		color: #666;
		margin: auto;
		padding-top: 15px;
		width: 400px;
		text-align: center;
	}

	.link-list li{
		font-family: Literata;
		font-size: 1.0em;
		margin: auto;
		width: 400px;
		padding-left: 30px;
		text-align: left;
	}


	/* -------------------- Info -------------------- */
	.front-title {
		font-family: Literata;
		font-size: 1.1em;
		width: 300px;
		margin: auto;
		text-align: center;
		margin-top: 10%;
	}

	/* ============== Impressum: Tablet ============== */
	.impr {
		padding-left: 10px;
		padding-right: 10px;
		color : #777;
	}

	.impr_title {
		font-family: Oswald;
		font-size: 1.6em;
		color: #777;
	}
	.impr_subtitle {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.1em;
		color: #888;
	}
	.impr_subtitle2 {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.0em;
		color: #888;
	}
	.impr_description {
		color: #777;  
		font-family: Literata;
		font-size: 1.0em;
		hyphens: auto;
	}


}



@media screen and (min-width: 1301px){
/* =============================== PC Auflösung =============================== */


	h1 {
		color: #fff;  
		font-family: Literata; 
		font-size: 4.1em; 
		font-weight: 600;
		text-align: center;
		margin-top: -5px;
		margin-bottom: 2px;
		padding-bottom: 20px;
		padding-top: 10px;
		opacity: 1.0; 
		text-shadow: 2px 2px 8px #777;
		background-color: red; /*#bbb;*/
		height: 124px;
	}

	/* -------------------- Frontpage Layout -------------------- */
    /* Background Image Styles */
    .bg-image {
        position: relative;
        width: 100%;
		margin-top: 2px;
        height: calc(100vh - 122px); /* Set height to 100vh to match the viewport height */
        background-image: url('title-image_1.webp'); /* Replace with your image URL */
        background-size: cover; /* Cover the entire container, even if part of the image is not visible */
        background-position: center; /* Center the image horizontally and vertically */
        background-repeat: no-repeat; /* Prevent image repetition */
    }

    /* Content Styles (for demonstration) */
    .title-content {
        position: absolute; /* Position the text container absolutely */
        top: 40%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Center both vertically and horizontally */
        max-width: 550px;
        text-align: center;
        font-family: Literata; 
        color: #fff;
        background: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
        border-radius: 10px; /* Rounded corners for the text container */
        padding: 20px;
    }

    .title-content-title {
        font-size: 3.5em;
        font-weight: bold;
        padding-bottom: 15px;
        letter-spacing: 5px;
        text-shadow: 3px 3px 5px black, -1px -1px 3px black, 0 0 15px white, 0 0 15px white;
    }
    .title-content-text {
        font-size: 1.6em;
        text-shadow: 1px 1px 3px black, -1px -1px 3px black, 0 0 5px white, 0 0 5px white;
    }
    .start-prepping-button {
        display: block;
        margin-top: 20px;
        text-align: center;
        text-decoration: none;
        background-color: rgba(255,0,0,0.7);
        font-family: Literata; 
        font-size: 1.3em;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: normal;
    }
    .start-prepping-button:hover {
        background-color: red;
        color: white;
    }

	/* -------------------- End - Frontpage Layout -------------------- */



	/* -- ANFANG Cookie Consent -- */
	#cookies{
		visibility: hidden;
		position: fixed;
		width: 100%;
		margin: auto;
		bottom: 0px;
	}

	#cookies.show {
		visibility: visible;
		-webkit-animation: fadein 2s;
		animation: fadein 2s;
		position: fixed;
		background: rgba(0, 0, 0, 0.3);
	}

	@-webkit-keyframes fadein {
		from {bottom: -150px; opacity: 0;} 
		to {bottom: 0px; opacity: 1;}
	}

	@keyframes fadein {
		from {bottom: -150px; opacity: 0;}
		to {bottom: 0px; opacity: 1;}
	}

	.sub-title {
		color: #999;  
		font-family: Literata; 
		font-size: 1.5vw; 
		line-height: 2.5vw; 
		font-weight: 300;
		text-align: center;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: -20px;
	}

	.cookieContainer{
		background-color: #F0F0F0;
	}
	.cookieContainerTitle {
		font-family: Oswald; /*'Arial', Helvetica, Verdana; */
		font-size: 1.5em;
		text-align: center;
		color: #eee;
		padding-top: 15px;
	}
	.cookieContainerText {
		padding: 15px;
		font-family: Oswald; /*'Arial', Helvetica, Verdana; */
		font-size: 1.1em;
		line-height: 1.4em;
		text-align: center;
		color: #eee;
	}

	.cookieNavbar {
		width: 500px;
		margin: auto;
		padding-top: 5px;
		background: rgba(0, 0, 0, 0.0);
		overflow: auto;
		border-radius: 7px;
	}
	.cookieNavbar a {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 1%;
		margin-bottom: 5px;
		background-color: white; 
		border: 3px solid rgba(154, 154, 154, 1.0);
		border-radius: 7px;
		font-weight: 500;
		color: #555;
		text-decoration: none;
		font-family:Oswald; /*'Arial Narrow', Helvetica, Verdana; */
		font-size: 17px;
		line-height: 20px;
		width: 32%; /* 3 links of equal widths */
		text-align: center;
	}

	/* ============== About: PC ============== */
	.about {
		padding-left: 13%;
		padding-right: 13%;
		color : #777;
		column-count: 3;
	}
	.about_title {
		font-family: Oswald;
		font-size: 2em;
		color: #666;
		text-align: center;
		padding-bottom: 10px;
	}

	.about_subtitle {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.1em;
		color: #888;
		margin-bottom: 5px;
	}

	.about_description {
		color: #777;  
		font-family: Literata;
		font-size: 1.0em;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	.about_description a {
		color: #B22222;  
		text-decoration: none;
	}

	a:hover {
		color: #FF4500;
		background-color: transparent;
	}

	a:active {
		color: red;
		background-color: transparent;
	}
	
	.about_image_l {
		padding-top: 7px;
		margin-right: 10px;
		width: 200px;
		height: 200px;
		float: left;
	}
	.about_image_r {
		padding-top: 7px;
		margin-left: 10px;
		width: 200px;
		height: 200px;
		float: right;
	}
	.about_image_2 {
		margin-top: 7px;
		padding-bottom: 10px;
		margin-right: 10px;
		width: 360px;
		height: 200px;
		float: left;
		border: 1px solid #999;
	}
	.link-list-title {
		font-family: Literata;
		font-size: 1.4em;
		color: #666;
		margin: auto;
		padding-top: 10px;
		width: 400px;
		text-align: center;
	}

	.link-list li{
		font-family: Literata;
		font-size: 1.1em;
		margin: auto;
		width: 400px;
		padding-left: 10px;
		text-align: left;
	}


	/* -------------------- Info -------------------- */
	.front-title {
		font-family: Literata;
		font-size: 1.1em;
		width: 400px;
		margin: auto;
		text-align: center;
		margin-top: 10%;
	}

	/* ============== Impressum: PC ============== */
	.impr {
		padding-left: 25%;
		padding-right: 25%;
		color : #777;
	}

	.impr_title {
		font-family: Oswald;
		font-size: 1.6em;
		color: #777;
	}
	.impr_subtitle {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.1em;
		color: #888;
	}
	.impr_subtitle2 {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.0em;
		color: #888;
	}
	.impr_description {
		color: #777;  
		font-family: Literata;
		font-size: 1.0em;
		hyphens: auto;
	}

}