/*Variablen*/
:root{
	--hgrau : #383838;
	--mgrau : #464646;
	--dgrau : #1B1C1E;
	--bg : #272727;  /* Seiten-Hintergrund */
	--font : #afafaf; /* Schriftfarbe */
	--link : #FFFFFF;
	--hlink : #E0B332;
	--link_men : #E0B332;  /* Link */
	--hlink_men : #EDD581;  /* Link hoover */
	--hb : #D2D2D2;
	--shaddow : #3b3b3b;
}
*{
	font-family: Verdana,Arial,Helvetica;
	font-size : 10pt;
	color: var(--font);
}

html {
	height: 100%;
	min-height: 100%;
}
body{
	margin:0px; height:100%;
	background-color: var(--bg);
}

.randr { border: 1px solid red; }
.randg { border: 1px solid green; }
.randb { border: 1px solid blue; }
.clear{clear: both;}
.bg {background-color: var(--dgrau);}
.hbg {background-color: var(--bg);}
.r { border:1px solid #464646; }

/* ANCHOR Schrift Farben und Größen*/
.fgr { color:var(--font);font-size:0.8em; }
.fw { color:#FFFFFF; }
.fr { color:#FF0000; }
.fg { color:var(--hlink); }
.fm { font-size: 0.8em; }
.fsm { font-size: 0.7em; }
.err { color:#F00;font-size:0.8em; }
.ok { color:#0F0;font-size:0.8em; }
.hgr { color:var(--mgrau);background-color:var(--mgrau);border-width:1px;}
.table { display:table; }
.table div { display:table-row; }
.table div div { display:table-cell;vertical-align:top;padding:3px;}
p {margin:10px 0px;}


/* Links allgemein */
a { text-decoration: none;}
a, a:visited {color :var(--link); }
a:active,a:focus,a:hover {color:var(--hlink); }
.mailto{ color: var(--link);}
.mailto:hover{ color: var(--hlink);}


/* Überschriften */
.h0 { color:var(--hlink);font-weight:bold;font-size:1.2em; }
.ha { color:var(--link_men);font-weight:bold; }
.hb { color:var(--hb);font-size:0.9em;font-weight:bold; }
.hc { color:var(--hb);font-size:0.8em;font-weight:bold; }
.ha_a { color:var(--link_men) !important; font-weight:bold; }
.ha_a:hover {color: var(--hlink_men) !important;}

/*Input*/
.i, .ic, .ir { 
	color:var(--font);
	border-left:1px solid var(--dgrau);
	border-top:1px solid  var(--dgrau);
	border-right:1px solid var(--mgrau);
	border-bottom:1px solid var(--mgrau);
	background-color:var(--bg);
	padding-left:2px;
}
.ic, .tc { text-align:center; }
.ir, .tr { text-align:right; }
.top { vertical-align:top; }

.b { 
	color: var(--link);
	background-color:var(--hgrau);
	border-left:1px solid var(--mgrau);
	border-top:1px solid var(--mgrau);
	border-right:1px solid var(--dgrau);
	border-bottom:1px solid var(--dgrau);
	padding: 3px;
	}
	/*Cursor*/
	.curp {cursor:pointer;}
	.point{cursor:pointer;}

.rund5 {
	-moz-border-radius:5px; /* Firefox */
	-webkit-border-radius:5px; /* Safari, Chrome */
	-khtml-border-radius:5px; /* Konqueror */
	border-radius:5px; /* CSS3 */
	behavior:url(border-radius.htc);
}

.rund10 {
	-moz-border-radius:10px; /* Firefox */
	-webkit-border-radius:10px; /* Safari, Chrome */
	-khtml-border-radius:10px; /* Konqueror */
	border-radius:10px; /* CSS3 */
	behavior:url(border-radius.htc);
}

.rund20 {
	-moz-border-radius:30px; /* Firefox */
	-webkit-border-radius:30px; /* Safari, Chrome */
	-khtml-border-radius:30px; /* Konqueror */
	border-radius:30px; /* CSS3 */
	behavior:url(border-radius.htc);
}
.shaddow {
	box-shadow:0px 0px 10px var(--font);
	-moz-box-shadow:0px 0px 10px var(--font);
	-webkit-box-shadow:0px 0px 10px var(--font);
	-khtml-box-shadow:0px 0px 10px var(--font);
}

.tab, .ad_tab{
	background-color: #000000;
	border: 1px solid var(--mgrau);
	padding: 10px;
}
.ad_tab{ margin-top: 10px;min-width:750px;}

.verlauf {
	background: rgb(50,50,50);
	background: linear-gradient(180deg, rgba(50,50,50,1) 0%, rgba(0,0,0,1) 53%);
}

.box { /*buttons*/
	border-top:1px solid var(--mgrau);
	border-left:1px solid var(--mgrau);
	border-right:1px solid var(--dgrau);
	border-bottom:1px solid var(--dgrau);
	padding:3px;
}
.layer {
	position: fixed;
	z-index:199;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
	background: rgba(255,255,255,0.2);
}
.layer_box {
	max-width: 600px;
	min-width: 250px;
	min-height: 300px;
	margin: 100px auto;
	background: rgba(25,25,25,0.9);
	border: 1px solid var(--hgrau);
	position: relative;
	padding: 20px;
}

.layer_img{
	max-width: 60%;
	min-width:380px;
	margin: 150px auto;
	background: rgba(25,25,25,0.9);
	border: 1px solid var(--mgrau);
	position: relative;
	padding: 5px;
}

#layer_close {
	width:40px;
	height:40px;
	position: absolute;
	top: -20px;
	right: -20px;
	background-color: var(--dgrau);
	font-size: larger;
	font-weight: 700;
}

/*Seite*/
#container {
	/* width: 90%; */
	max-width: 1000px;
	margin: 20px auto;
	/* padding:20px; */
	min-height:350px;
	border: 1px solid var(--mgrau);
	position: relative;
}
/* Header */
#header {
	width:100%;
	height: 122px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-bottom:10px;
}
#header a {
	display: block;
	height: 100%;
}
#header a span {
	display: none;
}

/* For width 400px and smaller: */
@media screen and (max-width: 480px){
    #header { 
       background-image: url('../images/logo_oben_mobil.png') !important;
    }
		#info_haft{width: 90%;}
		.cont{ width: 95%;max-width:450px; }
		#container { width: 95%;padding:5px; }
		#tab_ds { max-width:400px; }
}


/* For width 400px and larger: */
@media screen and (min-width: 481px) and (max-width: 899px) {
    #header { 
       background-image: url('../images/logo_oben_tab.png') !important;
    }
		.cont{ width: 95%;max-width:850px; }
		#container { width: 95%;padding:10px; }
		#tab_ds { max-width:800px; }
}


/* For width 900px and larger: */
@media only screen and (min-width: 900px) {
    #header { 
       background-image: url('../images/logo_oben2.png');
    }
		.cont{ width: 95%; }
		#container { width: 90%;padding:20px; }
		#content { padding: 20px; }
		#tab_ds { width:96%; }
}

/* Seiteninhalt*/
#content {
	margin: 10px auto;
	min-height: 350px;
	width: 100%;
}

/* Scroll to top Button */
	div#back-top {
		z-index: 999;
		position: fixed;
		right: 20px;
		bottom: 20px;	
		width: 40px;	
		height: 40px;	
		line-height: 34px;	
		text-align: center;	
		background: #272727;
		display: none;
		border:2px solid var(--hgrau);
	}
	div#back-top a {	
		width: 100%;	
		height: 100%;	
		display: block;	
		color: var(--hlink);
		font-weight: bold;
		/* text-transform: uppercase; */	
		text-decoration: none;
		font-size:32px;
		transform: rotate(90deg);
	}

.cont{
	display:flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
}

/* ANCHOR Startseite*/
.ins_center { margin: 0 auto; }
.ins_right { display:flex;justify-content: flex-end; }
.ins_left { display:flex;justify-content: flex-start; }
.ins_mitte { display:flex;justify-content: center;}
.ins_div { margin: 0 40px; }

.ins_left, .ins_right {
	margin: 10px auto;
}

#start_news{ 
	width: 75%; 
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	border: 1px solid var(--mgrau);
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

/* ANCHOR Webhosting */
#cont_pak > div{ margin: 0 auto; }
#pakete { margin:10px !important; width: 200px !important; }
.detail:hover  { color:var(--hlink); }

.cont_zus{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 85%;
	min-width:300px;
	margin-left: auto;
	margin-right: auto;
}
.cont_des{
	width:80%; padding: 6px;
}

.cont_zus div{min-width:300px;}
.cont_zus div div{margin-bottom: 20px;}

/*Informationen*/
#cont_news {
	display: flex;
	margin:10px auto;
	width: 90%;
}
#info_haft{
	width: 100%;
	height:160px;
	overflow : auto;
}
#info_agb > ol{
	list-style-type:upper-roman;
}
#info_agb > ol > li{color: var(--link); font-weight: bold;}
#info_agb > ol > li > ol{ list-style-type: decimal !important; }
#info_agb ol li{ margin-bottom: 5px; }
#info_agb > ol li ol li{ margin-bottom: 10px; }

#info_agb_web > ol > li{color: var(--link); font-weight: bold;}
#info_agb > ol > li > ol{ list-style-type: decimal !important; }
#info_agb_web ol li { margin-bottom: 10px !important; }
/* #info_agb_web ol li ol li { margin-bottom: 10px !important; } */

#tab_ds{ font-size:10pt; display: block; }

.thumb {
	margin:5px;
	padding: 5px;
	border: 1px solid #464646;
}

#footer {
  width: 90%;
	position: relative;
	margin-bottom: 0px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

#footer div ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  justify-content: center;
	list-style-type: none;
	margin: 0 auto;
	
}
#footer div ul li{
	display: inline;
	list-style-type: none;
	margin: 0 20px;
	font-size: 0.8em;
}
#footer div ul li a{color:var(--font);}
#footer div ul li a:hover{color:var(--hlink);}

/* Copyright */
#cr{margin:-15px auto;text-align:center;}
.cop { color: var(--mgrau);font-size: 0.8em;text-decoration:none;line-height:2em; }
.cop:hover { color:var(--font); }