@font-face {
	font-family: Aller; 
	src: url('../inc/fonts/Aller.ttf');
}

html, body {
	background: white;
}

html, body, div, td, span {
	font-family: "Aller", 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 18px;
}

td {
	padding: 4px;
}

a,
a:visited,
a:active {
	text-decoration: underline;
	color: #3d96e1;
}

a:hover {
	color: #1166aa;
}

/*div#header {
	display: inline-block;
	padding: 30px;
	padding-bottom: 20px;
	width: 750px;
}*/

div#header {
	height: 550px;
	background: #ffffff url('../img/page/header_photo_low.jpg') no-repeat 50% 50%;
	background-size: cover;
}

@media (min-width: 1700px) {
	div#header {
		background: #ffffff url('../img/page/header_photo_border.jpg') no-repeat 50% 50%;
		background-size: auto;
	}
}

div#header #text {
	position: relative;
	width: 315px;
	height: 100%;
	background: transparent url('../img/page/white_transparent.png');
	margin-left: -600px;
	text-align: center;
}

@media (max-width: 1015px) {
	div#header {
		text-align: left;
	}
	div#header #text {
		margin-left: 50px;
	}
}

div#header #logo_123 {
	display: inline-block;
	margin-top: 25px;
	margin-bottom: 15px;
	width: 130px;
}

div#header #telnumber {
	font-size: 17px;
	margin-top: 30px;
}

span.headerText {
	vertical-align: middle;
	font-size: 55px;
	color: #fa6503;
	line-height: 70px;
	text-decoration: underline;
}

span.headerSubtext {
	vertical-align: middle;
	font-size: 16px;
	color: #4c4c4c;
}

span.registered {
	vertical-align: super;
	text-decoration: none;
	font-size: 25px;
}

div#header #codeForm {
	position: absolute;
	width: 100%;
	bottom: 10px;
	font-weight: bold;
	font-size: 16px;
	color: black;
	background: rgba(255, 255, 255, 0.95);
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

div#header #codeForm .line1 {
	color: #fa6503;
	font-weight: inherit;
	font-size: inherit;
}

div#header #codeForm .line2 {
	color: inherit;
	font-weight: inherit;
	font-size: 14px;
}

div#header #codeForm .error {
	display: block;
	color: #940404;
	font-weight: inherit;
	font-size: 13px;
}

div#header #codeForm .line3 {
	display: inline-block;
	color: #515151;
	font-weight: inherit;
	font-size: 14px;
	cursor: help;
	padding: 4px;
	margin-top: 4px;
}

div#header #codeForm .line3:hover {
	border: 1px dashed #7e7e7e;
	padding: 3px;
}

img#printcard_help_image {
	height: 180px;
}

div#header #codeForm input {
	text-align: center;
	width: 100px;
	font-size: 16px;
	color: #4c4c4c;
	font-weight: normal;
	padding: 8px;
	border: 2px solid #fa6503;
	border-radius: 4px;
	min-width: 120px;
}

div#navigation {
	background: #fa6503;
}

div#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    display: block;
    height: 100%;
}

div#navigation ul li {
    display: inline;
    vertical-align: top;
	margin-top: 104px;
}

div#navigation ul a,
div#navigation ul a:active,
div#navigation ul a:visited {
	color: white;
	text-decoration: underline;
	font-size: 15px;
	padding: 0px 15px;
	margin: 0px 10px;
	line-height: 45px;
	display: inline-block;
}

div#navigation ul a:hover {
	background: #ff8a3c;
}

div#content {
	text-align: center;
	padding-top: 20px;
	margin: 0px 20px;
}

div.partner_compact_box {
	display: inline-block;
	padding: 8px 20px;
	margin: 8px;
	border: 1px solid #646464;
	font-size: 15px;
}

/* ========================================
   RESPONSIVE OPTIMIERUNGEN FÜR MOBILE
   ======================================== */

@media (max-width: 768px) {
	/* Header anpassen */
	div#header {
		height: auto;
		min-height: 500px;
		background-position: center center;
	}
	
	div#header #text {
		width: 100%;
		margin-left: 0 !important;
		padding: 20px;
		box-sizing: border-box;
		position: static;
	}
	
	div#header #logo_123 {
		width: 100px;
		margin-top: 15px;
	}
	
	span.headerText {
		font-size: 40px;
		line-height: 50px;
	}
	
	span.registered {
		font-size: 20px;
	}
	
	span.headerSubtext {
		font-size: 15px;
		line-height: 1.4;
		display: block;
		margin: 10px 0;
	}
	
	div#header #telnumber {
		font-size: 16px;
		margin-top: 20px;
	}
	
	div#header #telnumber span {
		font-size: 22px !important;
	}
	
	/* Formular auf mobil */
	div#header #codeForm {
		position: static;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	div#header #codeForm input[name="printcardCode"] {
		width: 60%;
		max-width: 200px;
		display: block;
		margin: 10px auto;
	}
	
	div#header #codeForm button {
		display: block;
		margin: 10px auto;
		min-width: 80px;
	}
	
	/* Navigation auf mobil - VERTIKAL */
	div#navigation ul {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	
	div#navigation ul li {
		display: block;
		margin: 0;
		margin-top: 0;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}
	
	div#navigation ul a {
		display: block;
		padding: 12px 15px;
		margin: 0;
		line-height: 1.4;
		font-size: 16px;
	}
	
	/* Content */
	div#content {
		padding: 15px 10px;
		margin: 0;
	}
}