/* Stylesheet for impressum */

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



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

	/* Header */
	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 #777;
		background-color: #bbb;
	}

	h3 {
		color: #fff;  
		font-family: Literata; 
		font-size: 1.2em; 
		font-weight: 600;
	}


	/* ============== 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: orange;
		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: orange;
		color: #000;
	}
	.topnav.responsive a:hover {
		color: #000;
	}

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

	/* ============== Impressum Handy ============== */


	.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.0em;
		color: #888;
	}
	.impr_description {
		color: #777;  
		font-family: Literata;
		font-size: 0.9em;
		hyphens: auto;
	}
}

/* ============================== Tablet Auflösung =============================*/
@media screen and (min-width: 701px) and (max-width: 1300px) {
	h1 {
		color: #fff;  
		font-family: Literata; 
		font-size: 3.7em; 
		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 6px #777;
		background-color: #bbb;
	}

	h3 {
		color: #fff;  
		font-family: Literata; 
		font-size: 1.2em; 
		font-weight: 600;
	}


	.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: orange;
		color: #fff;
	}

	.topnav .icon {
		display: none;
		color: #fff;
	}
	.topnav a:link {
		color: #fff;
	}
	.topnav a:hover a:link {
		color: #000;
	}

	.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_description {
		color: #777;  
		font-family: Literata;
		font-size: 1.0em;
		hyphens: auto;
	}
}

/* ============================== PC Auflösung =============================*/
@media screen and (min-width: 1301px){
	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: #bbb;
	}

	/* ============== Navigation ============== */
	.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: orange;
		color: #fff;
	}
	.topnav .icon {
		display: none;
		color: #fff;
	}
	.topnav a:link {
		color: #fff;
	}
	.topnav a:hover a:link {
		color: #000;
	}
	.topnav a:link {
		color: #fff;
		text-decoration: none;
	}
	.topnav a:hover {
		color: #fff;
		background-color: orange;
	}
	.topnav a:active {
		color: #fff;
		background-color: transparent;
	}
	.topnav a:visited {
		color: #fff;
		background-color: transparent;
	}

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

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

	.impr_title {
		font-family: Oswald;
		font-size: 2em;
		color: #777;
	}
	.impr_subtitle {
		font-family: Literata;
		font-weight: 600;
		font-size: 1.1em;
		color: #888;
	}
	.impr_description {
		color: #777;  
		font-family: Literata;
		font-size: 0.9em;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}

	.code {
		color: #555;  
		font-family: 'Source Code Pro';
		font-size: 1.0em;
	}
}