html, body {
	position: absolute;
	width: 100%;
	height: 100%;
}
body {
	background-image: linear-gradient(rgb(255,255,255) 0px,rgb(255, 224, 21) 600px);
	background-attachment:fixed;
	font-family: Arial, Helvetica, Geneva;
	color: #666666;
}

html, body, p, div {
	margin:0px;
	padding:0px;
	box-sizing: border-box;
}

a { color: #666; text-decoration: none; transition:all .3s ease; }
a:hover,
.content h1 a:hover   { background-color: #666; color: #ffffcc; text-decoration: none; }
.content a:hover   { background-color: transparent; color: #666; text-decoration: none; }

/* eMail-Addresses */
a[href^="javascript"] span {
	display: inline-block;
	width: .9em;
	height: .9em;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(pictures/at.svg);
	vertical-align:middle;
}
/* a[href^="javascript"]:hover span { background-image: url(images/at.svg); } */


.JSclick    {  cursor: pointer; }


/* Menu */
#menu {
	background-image: url(pictures/menu.gif);
	background-repeat: no-repeat;
	margin-left: 0;
	position: absolute;
	z-index: 2;
	top: 124px;
	left: 0;
	width: 220px;
	height: 308px;
	visibility: visible;
	cursor: pointer
 }

#menuback     {
	position: absolute;
	top: 0;
	left: 0;
	width: 230px;
	height: 435px;
	margin: 0;
	z-index: 0;
	background-image: url(pictures/index.jpg);
	text-align: center;
}

.menu_1 { font-size: 11px; font-weight: bold; line-height: 11px; background-image: url(pictures/dotM.gif); background-repeat: no-repeat; position: relative; width: 140px; height: 19px; margin-left: 20px; }
.menu_1 a { color: #666; text-decoration: none; position: absolute; width: 120px; height: 19px; max-height: 15px; margin-left: 10px; padding-top: 4px; padding-left: 5px; }
.menu_1 a:hover { color: #ffc; background-color: #666; text-decoration: none; }
.menu_2 { font-size: 10px; font-weight: normal; line-height: 10px; background-image: url(pictures/dotM.gif); background-repeat: no-repeat; position: relative; width: 130px; height: 19px; margin-left: 30px; }
.menu_2 a { color: #666; text-decoration: none; position: absolute; width: 110px; height: 19px; max-height: 15px; margin-left: 10px; padding-top: 4px; padding-left: 5px; }
.menu_2 a:hover { color: #ffc; background-color: #666; text-decoration: none; }


/* Kalender */
#kale   {
	background-image: url(pictures/semitrans.gif);
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0 0;
	z-index: 1;
	position: absolute;
	margin-left: -400px;
	top:140px;
	left: 0;
	width: 170px;
	height: 155px;
	visibility: visible;
	cursor:pointer;
}
.txt1   { color: #999999; font-size: 14px; line-height: 14px; }
.txt2   { font-size: 12px; font-weight: bold; line-height: 12px; }
.txt3   { color: #333333; font-size: 12px; line-height: 12px; }
.txt4   { font-size: 9px; line-height: 10px; }

#rent   { cursor: pointer }


/* Formate */
h1 {
	font-size:18px;
	line-height:1.2em;
	border-radius:.5rem;
	background-color: rgb(255, 224, 21);
	color: #666;
	text-align:center;
	padding:5px 0 3px 0;
	margin: 10px 0 3px 0;
	box-shadow: -1px 2px 3px rgba(0,0,0,.4) inset;
}


/* Styles */
.align-c {text-align:center; }
.align-r {text-align:right; }
.align-j {text-align:justify; }

.c666 { color: #666666 !important; }

.pbold { font-weight:bold; }

.head1  { font-size: 32px; line-height: 36px; }
.head2 { font-size: 18px; line-height: 22px; }

.text09 { font-size: 9px; line-height: 11px; }
.text10 { font-size: 10px; line-height: 12px; }
.text10or  { color: #B48A1B; font-size: 10px; line-height: 12px; }
.text11 { font-size: 11px; line-height: 13px; }
.text11or { color: #B48A1B; font-size: 11px; line-height: 13px; }
.text12 { font-size: 12px; line-height: 16px; }
.text14  { font-size: 14px; line-height: 18px; }
.text14sw   { color: black; font-size: 14px; line-height: 18px; }
.text14or  { color: #fc3; font-size: 14px; line-height: 16px; }
.text16  { font-size: 16px; line-height: 18px; }
.text16ws  { color: #fff; font-size: 16px; line-height: 18px; }
.text16sw  { color: black; font-size: 16px; line-height: 18px; }
.text16or   { color: #B48A1B; font-size: 16px; line-height: 18px; }
.text18  { font-size: 18px; line-height: 20px; }
.text18ws  { color: #fff; font-size: 18px; line-height: 20px; }
.text18_666  { color: #666; font-size: 18px; line-height: 20px; }
.text18or   { color: #B48A1B; font-size: 18px; line-height: 20px; }
.text20 { font-size: 20px; line-height: 22px; }
.text20ws { color: #fff; font-size: 20px; line-height: 22px; }
.text20sw { color: black; font-size: 20px; line-height: 22px; }
.text20or   { color: #B48A1B; font-size: 20px; line-height: 22px; }
.text32 { font-size: 32px; line-height: 34px; }

.note   { color: white; font-size: 12px; line-height: 14px; }
.notedis { color: #ccc; font-size: 8px; line-height: 10px; }
.alertxt { color: #c00; font-size: 16px; font-weight: bold; line-height: 18px; }
.Feld   { background-color:#CCCCCC; width:460px; border:6px solid #DDDDDD; }

/* Elements */
.linkbox { 
	background-color: rgba(255,224,21,0) !important; 
	color: #666;
	border:1px solid #666; 
	border-radius:5px;
	padding:3px;
}
.linkbox:hover { 
	background-color: rgba(255,224,21,1) !important;
}



/* 3D Worlds */
.world {
	position: relative; width: 80px; height: 30px;
	background-repeat: no-repeat;
}
.world a { position:absolute; width:100%; height:100%; }
#world_1 { background-image: url(pictures/world-icon1off.jpg); }
#world_2 { background-image: url(pictures/world-icon2off.jpg); }
#world_3 { background-image: url(pictures/world-icon3off.jpg); }
#world_4 { background-image: url(pictures/world-icon4off.jpg); }
#world_5 { background-image: url(pictures/world-icon5off.jpg); }
#world_6 { background-image: url(pictures/world-icon6off.jpg); }
#world_7 { background-image: url(pictures/world-icon7off.jpg); }
#world_8 { background-image: url(pictures/world-icon8off.jpg); }
#world_9 { background-image: url(pictures/world-icon9off.jpg); }
#world_10 { background-image: url(pictures/world-icon10off.jpg); }
#world_11 { background-image: url(pictures/world-icon11off.jpg); }
#world_1:hover { background-image: url(pictures/world-icon1.jpg); }
#world_2:hover { background-image: url(pictures/world-icon2.jpg); }
#world_3:hover { background-image: url(pictures/world-icon3.jpg); }
#world_4:hover { background-image: url(pictures/world-icon4.jpg); }
#world_5:hover { background-image: url(pictures/world-icon5.jpg); }
#world_6:hover { background-image: url(pictures/world-icon6.jpg); }
#world_7:hover { background-image: url(pictures/world-icon7.jpg); }
#world_8:hover { background-image: url(pictures/world-icon8.jpg); }
#world_9:hover { background-image: url(pictures/world-icon9.jpg); }s
#world_10:hover { background-image: url(pictures/world-icon10.jpg); }
#world_11:hover { background-image: url(pictures/world-icon11.jpg); }


/* Teaser */
.teaser_volcano {
	position:relative;
	top:0;
	left:0;
}
.teaser_volcano::after {
	content:'Enter';
	display:block;
	position:absolute;
	left:5rem;
	top:-4rem;
	width:100px;
	height:30px;
	background-color: rgba(255,224,21,.6);
	background-image: linear-gradient(rgba(0,0,0,0) 20%,rgba(0,0,0,0.2) 100%);
	border-radius:5px;
	text-align:center;
	font-size:22px;
	line-height:1.2em;
	text-shadow:1px 1px 1px rgba(0,0,0,.1);
	box-shadow:1px 1px 10px rgba(0,0,0,.5);
	transition: all .5s ease;
	transform:scale(0) rotateZ(0) translateX(0) translateY(0);
}
.teaser_volcano:focus::after,
.teaser_volcano:hover::after,
.teaser_volcano:active::after {
	transform:scale(1) rotateZ(-10deg) translateX(15px) translateY(8px);
}


/* 2022 */

.content, .col_l, .col_r, .col_m, .col_f {
	position:relative;
	left: 0;
	display: flex;
	flex-flow: row wrap;
}

.content {
	left:0;
	width: 100%;
	max-width: 1100px;
	min-height: 600px;
	margin: auto;
	background-image: url('pictures/index.png');
	background-repeat:no-repeat;
	background-position:center bottom;
	padding: 0 0 40px 0;
}
.col_l {
	background-image: url('pictures/menubase.png');
	background-repeat:no-repeat;
	background-position:0 383px;
}
.col_l, .col_r { flex: 0 0 220px;}
.col_m { flex: 1 1 0; min-width:310px; }


.col_33, .col_50, .col_100 { padding: 10px; }
.col_33 { flex: 1 1 33%; }
.col_50 { flex: 1 1 50%; }
.col_100 { flex: 0 0 100%; }


@media all and (max-width:800px) {
/*
	.col_l { flex: 0 0 100%;}
	.col_m { flex: 1 1 0; }
*/
}