/* open-sans-300 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* indie-flower-regular - latin */
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/indie-flower-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/indie-flower-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


body{margin:0; height:100%;}
html{height:100%;overflow-y:scroll;margin-bottom:0; background-color:#FAFAFA;}
img{vertical-align:middle;border:0px;}
.image_container{padding-bottom:1px;}
a,button,body,div,em,input,label,li,ol,p,select,span,strong,td,th,textarea,u,ul {font-family:"Open Sans", sans-serif; font-size:1em; font-weight: 400; line-height:1.7em; word-spacing:0.15em;}
a,button,body,div,input,label,li,ol,p,select,textarea,u,ul {color:#444; font-weight:300;}

p,pre,form{margin:0;padding:0;}
a{text-decoration:none;color:#444;outline:none; cursor: pointer;}
a:hover{color:#000;}

#main a,
#footer a,
#main a i {transition: color 0.3s, transform 0.3s;}

#main a,#main button,#main div,#main em,#main input,#main label,#main li,#main ol,#main p,#main select,
#main span,#main strong,#main td,#main th,#main textarea,#main u,#main ul {line-height:1.7em;}

/*Textauszeichnung*/
h1 { 		font-size: 16px; margin: 0.25em 0px 1em 0px; }
h2 { 		font-size: 15px; line-height: 1.3em; margin: 0px 0px 5px 0px; padding: 0; }
h3 { 		font-size: 13px; line-height: 1.3em; margin: 0; padding: 0; }
h4 { 		font-size: 11px; line-height: 1.3em; margin: 0; padding:0; }

h1,h2,h3,h4,h5{padding-bottom:0px; color:#bd0000; font-weight:300; line-height:1.2em;}
h1{font-size:2.5em;}
h2{margin-top:0;font-size:1.7em;}
h3{margin-top:0;font-size:1.4em; color:#666}
h4{margin-top:0;font-size:1.2em; color:#666}
h5{margin-top:0;font-size:1.2em; color:#333;}


b, strong { 		color: #333; font-weight: bold; margin: 0; padding: 0; }
.bigger {	font-size: 1.2em; line-height: 1.4em;}
.small,.small a{font-size:0.8em;}
.red,
.red label { color:#df2222; font-weight:bold; } /*Fehlerfelder bei Dateneingabe */
input.red {border-color:#df2222;}
.green {color:#4A4 !important;}
.bold {		font-weight:bold; } /*Suchfunktion Highlight */
.hidden {	position:relative; left:-9999px; }
.no_display {	display:none !important;}
.super {		vertical-align:top; font-size:70%; line-height:0.9em;}
.clear {		clear:both;}
.flexbox {display: flex; justify-content: flex-start; align-items: baseline; column-gap: 10px;}

#main p {margin-bottom:1.5em;}

#wrapper{ margin:0px auto; padding:0px; width:100%; position:relative; min-width:980px;}
#header{min-height:140px; padding:0px; overflow:visible; position:relative;}
.loginpage #header{min-height:100px;}
#header{min-height:100px;}

.w960{width:1200px; margin:0px auto; padding:0px; position:relative !important;}
#container{width:1200px; clear:both; overflow:auto; background-color:rgba(255,255,255,1); margin: 0 auto; border:1px solid #ECEDED;}
#main{min-height:200px; overflow:hidden; margin:0px auto 20px; padding:20px 40px 40px; float:none;}

/* footer */
#footer{padding-bottom:20px;}
#footer .inside {width: 1180px; margin: 0 auto; padding-left:20px;}
#footer a {color:#666; font-size:11px}
#footer a:hover {color:#000;}

/* logo */
#logo_pv {border-bottom:1px solid #ECEDED; position:relative; top:0px; left:0px; height:75px;}
#logo_pv img {width:200px; position:absolute; top:27px; left:20px;}
#logo_pv {border-bottom-width:0px;}
#logo_pv img {top:37px;}

/*1 Spalte */
#main.fullwidth{ min-height:400px; overflow:visible; margin:0px auto 20px; padding:20px 40px 40px; float:none;}

/* ------------- login ------*/
.loginpage #container { position:relative; }
.loginpage #container:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;  background-position: -120px calc(100% + 120px); background-image: url("/img/background_kompass.png"); background-repeat: no-repeat; background-size: 450px; opacity: 0.05;}

.login a,.login button,.login div,.login input,.login label,.login li,.login ol,.login p,.login select,.login textarea,.login u,.login ul{font-size:16px;}
#wrapper {opacity: 0;}
#main .inside,
#main .inside {	position:relative; max-width: 850px; margin:0 auto;}

#text_02,#text_03 {text-align: center;}
#text_01 {padding-top:1em;}
#text_03 {padding-top:2em;}
#text_04 {padding-top:3em; display:flex; justify-content:center;}

#text_05,
#text_07 {display:flex; justify-content:space-between; align-items:center;}
#text_09 {padding-top:2em; text-align: center;}
#text_11 {color:#666;}
#text_11:hover {color:#000;}

#text_05 i, #text_07 i  { position: relative; left: 1.9em; font-size: 1.2em;}

#text_error { background-color:rgba(240,200,200,0.5); padding:0.5em 0.5em; text-align:center; border:1px solid rgba(240,200,200,1); margin:2em auto 0em; max-width:650px; width:80%;display:none;}
#text_error.error_active { display:block;}
.login2 #text_error { margin:0em auto 1em; }

.login input,
.login2 input,
.login3 input{ width:195px; font-weight: 400; border-radius: 5px; text-align: left; padding:0.4em 1em; margin:0.5em 0; border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; background-color:rgba(255,255,255,1); filter: none;}
.login2 input{ letter-spacing: 0.25em; width:100px;}
.login label,
.login2 label,
.login2 label{margin-right:1em;}
.login #button_10,
.login2 #button_10 {min-width: 10em;}
input.with_icon{ padding:0.4em 0.5em 0.4em 2.2em; margin: 0.5em 0;}


.toggler i {transition:0.3s all;}
#sprache_kasten { color: #666; font-size:0.9em; width:120px; font-weight: 600; text-align: center; border-radius: 5px; padding:0.4em 1.5em; margin:0.5em auto; border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; transition:background 0.3s, color 0.3s;position: relative;}
#sprache_kasten i { font-size:1.4em; width:1em; position: absolute; left:0.4em; top:0.4em;}
#sprache_kasten:hover { border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; color:#000; background-color: #fafafa;}
#sprache_kasten:hover i {color: #bd0000;}

.text_sprache { z-index:100; margin:1em auto 0; display: flex; max-width: 750px; flex-wrap: wrap; justify-content: center; flex-direction: row;}
.text_sprache div { margin: 5px 15px;}
.text_sprache span { display:block; cursor:pointer; font-size:0.9em; color:#333; width:100px; margin:0px auto; padding:7px 12px; border:1px solid #e5e5e5; border-radius: 3px; box-shadow:0px 0px 3px #eee; text-align: center;}

.text_sprache span.active {cursor:default;}
.text_sprache span.active,
.text_sprache span:hover {border:1px solid #c0c0c0; box-shadow:0px 0px 3px #bbb; color:#000; background-color: #fafafa;}

#password_box_form {	padding:20px; position:absolute; width:450px; opacity:0; display:none; z-index:19999;}
#text_12 {text-align: center; padding-bottom: 1em;}
#lost_mail,
#lost_name {display:flex; justify-content:space-between; align-items:center; padding-top:1em; width:400px; margin:0 auto}
#password_box_form input {max-width:200px; }
#lost_buttons {display:flex; justify-content:center; align-items:center; padding-top:1em;}
#recaptcha {margin-top: 20px; display:flex; justify-content: center;}

#text_js_error { background-color:rgba(240,200,200,0.5); padding:2.5em 0.5em; text-align:center; border:1px solid rgba(240,200,200,1); margin:2em auto 0em; max-width:650px; width:80%; }
#text_js_error i { color:#bd0000;}
#text_js_error span { display:block; margin:1em; }

#text_nl {max-width:450px; margin: 80px auto 0; text-align:center;}
#text_nl a {font-size:13px;}
#text_nl h3 {font-size:17px; padding-bottom:3px; border-bottom:1px solid #f0f0f0}


/* --- buttons etc --- */
.textbutton3 {padding:6px; border-radius: 5px; margin-top:0.5em; margin-bottom:0.1em; border:1px solid #bd0000;
background-color:#bd0000; color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0.3); cursor:pointer;}
.textbutton3:hover {background-color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0); color:#bd0000;}
.textbutton3 span {font-size: 1em;}


.textbutton2 { 		padding:6px; border:1px solid #aaa; border-radius: 3px; text-shadow:1px 1px 0px #fff; 
					margin:5px 20px 5px 0px; background-color:#eceded; cursor: pointer; overflow:visible;
					box-shadow:0px 0px 2px #bbb; display:inline-flex; align-items:center;}
.textbutton2:hover {	border-color:#666666; box-shadow:0 0 5px #bbb;}
.textbutton2:active { background-color:#ddd;}
.cancel {			border:1px solid #C69393;}
.cancel:hover {		box-shadow:0 0 5px #C69393; border-color:#B25959;}
.cancel:active {		background-color:#F2D5D5;}
.okay {				border:1px solid #8DB289}
.okay:hover {		box-shadow:0 0 5px #8DB289; border-color:#71AA6B;}
.okay:active {	background-color:#D2E5D0;}
.textbutton2:disabled {background-color:#d0d0d0;}
.off {background-color:#d0d0d0;}
.on {background-color:#eceded;}
button.master{			border:1px solid #CE9CBE; color:#8F3073;}
button.master:hover {	box-shadow:0 0 5px #CE9CBE; border-color:#B75894;}
button.master:active {	background-color:#EFDEEA;}

.textbutton2 i {	font-size:18px; text-shadow:none;}
.textbutton2:hover i {	color:#777;}
.okay:hover i{		color:#71AA6B;}
.cancel:hover i{		color:#B25959;}
button.master:hover i{	color:#B75894;}
.textbutton2:disabled:hover i{color:#444;}

button i {margin-right:8px;}
input {padding:5px 8px; margin:0px 3px 4px 0px; border:1px solid #aaa; border-radius: 3px; outline:none;}
input:focus {border-color:#bd0000}
input[type=text] {margin:-3px 0px 3px 0px;}
input[type=radio] {margin:-3px 3px 0px 0px;}
select { padding:5px; border:1px solid #aaa; border-radius: 3px;}
option { margin:5px;}
input[type=radio],input[type=checkbox] { display:none; }
input[type=checkbox] + label:before,
input[type=radio] + label:before  {font-family: 'Font Awesome 5 Pro'; display: inline-block; font-size:1.2em; width:1em; font-style: normal; font-weight: 400; text-align:left; padding-left:0.2em; padding-right:0.2em; cursor:pointer;}
input[type=checkbox]:hover + label:before,
input[type=radio]:hover + label:before  { color:#000;}
input[type=radio] + label:before  {vertical-align:bottom}
input[type=checkbox] + label:before {content: "\f0c8";}
input[type=checkbox]:disabled + label:before {content: "\f146";}
input[type=checkbox]:checked + label:before {content: "\f14a";}
input[type=checkbox].false:checked + label:before {content: "\f146";}
input[type=radio] + label:before {content: "\f111";}
input[type=radio]:checked + label:before {content: "\f192";}
input[type=checkbox]:disabled + label:before,
input[type=radio]:disabled + label:before  {color:#777;}
input[type=file] {border-width:0px; padding:5px 0px;}
label i {font-size: 16px;}

.trenner { border-top:1px solid #ddd;}
table hr { border:0px; background:#ddd; height:1px; margin:1em 0;}
.box1 {	width:90%; margin:20px auto; background-color:#FAFAFA; padding:15px;
		border:1px solid rgb(128, 128, 128); border-radius: 5px;}

.toggler.fa,
.toggler.fal,
.toggler.far,
.toggler.fas {transition:0.3s all;}
.fa.changed,
.fal.changed,
.far.changed,
.fas.changed {color:#bd0000;}
.fa.changed:hover,
.fal.changed:hover,
.far.changed:hover,
.fas.changed:hover {color: #aa050d;}

/* ------------- Top-Popups ------*/
#TopOverlay { visibility: hidden; opacity: 0; display: block; width: 99999%; height: 99999%;
				position: fixed; z-index: 10000; top: 0; left: 0; background-color: #fff; }
#TopLogout_wrapper {visibility: hidden; opacity: 0; display: block; width: 100%; height: 100%; position: fixed; z-index: 10001; top: 0; left: 0; display: flex; justify-content: center;align-items: center;}
#TopLogout { width:300px; height:auto; max-height: 100%; background-color:#f5f5f5; padding:25px 30px !important; 
				border:1px solid rgba(128, 128, 128,0.7); box-shadow:1px 1px 10px rgba(128,128,128,0.7);
				display:block; border-radius: 5px; text-align:center; }

/* ------------- Notification-Popups ------*/
#Notification { width:100%; min-width:360px; height:auto; background-color:#fff; padding:10px 30px !important; font-size: 1.2em;
  border-bottom:2px solid #cc3333;  box-shadow:0px 0px 20px rgba(0,0,0,0.5); text-align:center; transition: transform 0.5s;
transform: translateY(-30px);visibility: hidden;opacity: 0; position: fixed; z-index: 10001; top: 0; left: 0;}


/* ------------- Popups ------*/
#mbOverlay {		opacity: 0; display: none; width: 99999%; height: 99999%;
				position: fixed; z-index: 9998;	top: 0;	left: 0; background-color: #fff; }
				
.popup_box { 	position: absolute; width:700px; height:auto; max-height: 100%; background-color:#f5f5f5; padding:35px !important; 
				border:1px solid rgba(128, 128, 128,0.7); box-shadow:1px 1px 10px rgba(128,128,128,0.7);
				display:block; z-index:9999; opacity:0; border-radius: 5px; }

/* ------------- Flex-Popups ------*/
#popup_flexwrapper { display: none; justify-content: center; align-items: flex-start; overflow:auto; position:fixed; top:0; right:0; height:100vh; width:100%; z-index:9999; }
#popup_flexwrapper .popup_box {margin-top:45px; max-height:unset; position: relative; display:none; transition: transform 0.5s;}

.popup_box.has_header { 		padding-top:70px !important; }
.popup_box table{		width:100% }
.popup_box tr{ 		vertical-align:top;}
.popup_box th { 		font-size:14px; font-weight:normal;
					letter-spacing: 2px; text-align:left; text-transform:uppercase;
					color: #000; border-bottom:1px solid #ddd; padding-bottom:10px; }
.popup_box td { 		padding:10px 0px; }
.popup_box td.eng { 	padding:5px 0px; }
.popup_box .hinweis {	color:#555; font-size:10px; }
.popup_box .last {	border-top:1px solid #ddd;}
.popup_box select {	width:300px; margin-top:0px;}
.popup_box input {	width:284px;}

.btn_close {position: absolute; top:15px; right:15px; font-size: 2em; z-index: 3; cursor:pointer;transition:0.3s color;}
.btn_close:hover {color:#cc3333;}

.pop_header {background-color:#fff; border-bottom: 2px solid #cc3333; height:31px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; top:0px; left: 0px; padding:0.5em 35px; border-radius: 4px 4px 0px 0px; width:calc(100% - 70px);font-size: 1.7em; color:#bd0000; font-weight:300; line-height:1.2em; margin-bottom:1em; z-index: 2;}
.pop_header>span {font-size:1em; font-weight:300; color: #000;}
.ticket_type {font-size:0.6em; color:#555;}


/* ------------- schmale box ------*/
.small_box { 		width:450px !important;}


/* ------------- transition ------*/
.textbutton2,
.textbutton2 i,
.textbutton3,
.text_sprache span {	transition:0.3s all;}

/* ------------- accordion/sortables------*/
.toggler {cursor:pointer;}
.sortables {padding:0px; margin:10px 0px; }
.sortables li {border:1px solid #aaa; border-radius: 3px; padding:6px; list-style-type:none; margin:8px 0px; }
.sortables i {padding:3px 5px 0px; cursor:pointer; display: inline-block; float:right; touch-action:none;}

/* ------------- werbe-banner ------*/
#banner_breit {background-color:#bc4b4b; padding: 0.2em; text-align:center;  transition: background-color 1s, padding 1s;}
#banner_breit:hover {background-color:#BD0000; padding: 1.3em;}
#banner_breit a {color: #fff; transition: color 0.5s, font-size 1s;}
#banner_breit a:hover {color: #fdd;}
#banner_breit i {font-weight:300; padding-right:5px; transition: font-size 1s; vertical-align:text-bottom; font-size:1.2em;}
#banner_breit:hover a {font-size:1.2em;}
#banner_breit:hover i {font-size:1.6em;}

#banner {position: absolute; width:1200px;}
#bannerinfo {position: absolute; top:20px; right:20px; width:200px; border:1px solid #f0f0f0; border-left:2px solid #BD0000; background-color: #fafafa; padding:0.5em 0.5em 0.5em 3.5em; text-align:center;}
#bannerinfo i {position: absolute; top:15px; left:10px; font-size:2.5em; opacity: 0.15; font-weight: 300;}


/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */

@media screen and (max-width: 979px) {
	body{ min-width: 320px; width: 100%; max-width: 979px;}
	#wrapper{ width: 100%; min-width:320px; margin: 0px; padding: 0px; transform:none !important; -webkit-transform: none !important;}
	#container{ margin: 0px; padding: 0px; width:100% !important;}
	#main{ width:92% !important; padding: 2px 4% !important; margin: 0px 0px 20px !important; border-width:0px;}
	.w960 {width:92%;}
	#header {min-height:110px;}
	#footer { border-top:1px solid #ECEDED; padding-top:10px;}
	#footer .inside { width:92%; padding-left:4%;}

	#main .image_container img{ max-width: 100%; height: auto;}
	#header .caption {display:none;}
  #text_error { max-width:unset; width:calc(100% - 1em);}

}

@media screen and (max-width: 599px) {
	body{ max-width: 599px;}
	#header {min-height:120px;}
		
	#text_05, #text_07 {flex-direction:column;}

	input.with_icon{ padding:0.4em 1em 0.4em 2.2em; margin: 0.5em 0 1.5em -2em !important;}
	#text_05 i, #text_07 i  {left: 0.2em !important;}
	
	h1{font-size:1.7em;}
	h2{font-size:1.5em;}

	/* popup */
	#popup_flexwrapper .popup_box {margin-top:0px; max-height:unset;}
	#password_box_form {	padding:50px 5px 10px 5px !important; width:calc(100vw - 10px); height:calc(100vh - 60px); margin:0; border-width:0px;}
	#password_box_form form div {flex-direction:column;}
	#password_box_form form input {margin-top: 0.25em;}
	#password_box_form #recaptcha iframe {margin:0 auto;}
	#lost_mail,
	#lost_name { width:unset;}
	
}