::selection { background:var(--marker); color:#000; } 
*       	{ box-sizing:border-box; margin:0; padding:0; }
img     	{ border:none; height:auto; max-width:100%; }
p 			{ margin-bottom: 2rem; }
.cnt 		{ text-align:center; }
/* .beta, b 	{ background:var(--beta); font-weight:inherit; }  */
html {
	-webkit-text-size-adjust: 100%; /* Apple rotation bug */
	font-size: 62.5%; /* 1.6rem = 16px */
	scroll-behavior: smooth; 
    /* schwarz, weiss und graue brauchen keine variable */
    --green: #00ac46;
    --green-hover: #006E2C;
    --grau1: #ddd;
    --grau2: #bbb;
    --bg: #f3f3f3;
    --txt: #4b4a4b;
    --antrazit: #23282a;
    --marker: #FFF6C3;
    --beta: pink;
	}

@font-face {
    font-display: swap;
    font-family: 'Vorwerk BETA';
    font-style: normal;
    font-weight: 400;
    src: url('VorwerkBETALatin-Regular.woff2') format('woff2'), 
         url('VorwerkBETALatin-Regular.woff') format('woff');   
    }
@font-face {
    font-display: swap;
    font-family: 'Vorwerk BETA';
    font-style: normal;
    font-weight: 700;
    src: url('VorwerkBETALatin-Bold.woff2') format('woff2'), 
         url('VorwerkBETALatin-Bold.woff') format('woff');   
    }
body {
	background: var(--bg);
    font-family: 'Vorwerk BETA', Arial, sans-serif;
    line-height: 1.5;
    font-size: 1.6rem;
	font-weight: 400;
	color: var(--txt);
	}	
a {
    color: var(--green);
    transition: 0.3s ease;
    text-decoration-line: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    }
a:hover {
    color: var(--green-hover);
    text-decoration-color: var(--green-hover);
}
.box_L, .box_M, .box_S {
    width: 90%;
    height: auto;
    position: relative;
    margin: 0 auto;	
    }
.box_L { max-width: 1140px; }
.box_M { max-width: 900px; }
.box_S { max-width:  650px; }
.grid_2 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 1fr;
	}
.grid_3 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 1fr 1fr;
	}
.grid_1-2 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 2fr;
	}
.grid_1-3 {
	display: grid;
	grid-gap: 2vw;
	grid-template-columns: 1fr 3fr;
	}
.abstand { height: 5vh; }
.debug { color: #f3f3f3; }
header {
    background: #fff;
    height: 90px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
header .box_L {
	display: flex;
	flex-direction: row;
	justify-content: space-between; 
	align-items: center;
}
.logo {
    width: 140px;
    height: auto;
    padding: 8px 0 0 0;
	}
/* NAVIGATION ============================ */
nav {
	width: 100%;
	height: auto;
	position: relative;
	}
nav ul {
	list-style-type: none;
	float: right;
	}
nav li { float: left; }
nav ul a {
	display: block; 
	padding: 30px 20px 30px 20px;
	text-align: center;
	color: var(--txt);
	font-weight: 400;
	font-size: 1.8rem;
	text-decoration: none;
	}
nav a:hover {
	color: var(--green);
	text-decoration-line: underline;
	text-decoration-color: var(--green);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;	
    }

.nav_logout {}
#register .nav_register,
#remote .nav_remote,
#program .nav_program,
#anreise .nav_anreise,
#abreise .nav_abreise,
#kontakt .nav_kontakt
    {
	color: var(--green);
	text-decoration-line: underline;
	text-decoration-color: var(--green);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
    }
.hamburger { display: none; }
.bar1, .bar2, .bar3 {
	width: 30px;
	height: 3px;
	background-color: var(--txt);
	margin: 6px 0;
	transition: 0.4s;
	}
.change .bar1 { transform: rotate(-45deg) translate(-5px, 6px); }
.change .bar2 { opacity: 0; }
.change .bar3 {	transform: rotate(45deg) translate(-7px, -8px); }

    
main { 
    margin-top: 130px;
    min-height: 62vh; 
}

table.uebersicht {
	width: 100%;
	border-collapse: collapse;
    margin: 5vh 0;
    }
.uebersicht i {  display: block;}
.uebersicht td { 
    border-bottom: 1px solid var(--grau2); 
    padding: 1rem; 
    vertical-align: top;
    width: 20%;
    }
.farbe { background: var(--grau1); }
.hinweis {
    border-left: 5px solid var(--green); 
    padding-left: 20px;
}

/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */

input[type=password],
input[type=email],
input[type=text],
select {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 1.6rem;
}

input[type=date] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 15px 6px 15px;
    font-size: 1.6rem;
    display: inline-block;
    font-family: 'Vorwerk BETA', Arial, sans-serif;
}
input[type=radio],
input[type=checkbox] {
    width: 25px;
}
input[type=button],
input[type=submit] {
    border: none;
    padding: 10px 30px;
    border-radius: 12px;
    border-top-right-radius: 0;
    background: var(--green);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
}
input[type=button]:hover,
input[type=submit]:hover {
    background: var(--green-hover);
    color: #fff;
}

.feedback {
    background: var(--green-hover);
    color: #fff;
    padding: 3px 10px;
}
.btn {
    border: none;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 12px;
    border-top-right-radius: 0;
    background: var(--green);
    color: #fff;
    font-size: 1.6rem;
    margin: 10px 0;
}
.btn:hover {
    background: var(--green-hover);
    color: #fff;
    text-decoration: none;
}
.disabled {
    background: #ccc;
}
.disabled:hover {
    cursor: default; 
    background: #ccc;  
}
/* input[type=text]:focus {
    background-color: lightblue;
  } */

table { width: 100%; }
td { padding: 10px 0; vertical-align: top; }
.form-login { }
.form-register td:first-child { width: 30%; }
.form-register td:last-child { width: 70%; }
table + p { margin-top: 50px; }
.sprachwahl { margin-bottom: 70px; }

.halb {
    width: 48.5%;
    float: left;
    margin-right: 3%;
    }
.halb:last-child {
    margin-right: 0;
    }

h1 { 
    font-size: 4.4rem;
    line-height: 1.3;
    margin: 0 0 40px 0;
    font-weight: normal;
    }
h1 b { font-weight: inherit; }
h2 { 
    font-size: 3.6rem;
    }
h3 { 
    font-size: 2.4rem;
    margin-top: 3vh;
    line-height: 1.2;
    }

#reiseinfos ul { margin: 30px 0 60px 40px; }
#reiseinfos ul ul { margin: 10px 0 10px 30px; }


/* iframe Adobe Sign ================== */
.nda {}



footer {
    background: var(--antrazit);
    color: #fff;
    margin-top: 100px;
    padding: 30px 0;
    min-height: 15vh;
}
footer i {
    color: var(--antrazit);
    padding: 0 20px;
}
footer a {
    color: #fff;
    text-decoration: none;
}
footer a:hover {
    color: var(--green);
    text-decoration: none;
}



/* ------------------------- Anker mit JS einblenden */
#top {
	position: fixed;
	bottom: 40px;
	right: 5vw;
	z-index: 98;
	display: none;  /* einblenden per JS */
    background: none;
    width: 60px;
    height: auto;
    padding: 15px;
    font-size: 4rem;
    text-decoration: none;
    /* transform: rotate(270deg); */
    color: var(--grau);
	}	
#top:hover {
	color: var(--green);
}


/* ####   Responsive   ############################################### */
@media screen and (min-width: 2000px) {
    nav ul a {
        display: block; 
        padding: 30px 1vw 30px 1vw;
    }
}



@media screen and (max-width: 800px) {
	h1 { font-size: 3rem }
	.grid_2, 
    .grid_3 {
		grid-template-columns: 1fr; 
		}
	header .box_L {
		display: flex;
		flex-direction: row;
		justify-content: space-between; 
		align-items: start;
	}
    .logo {
        width: 200px;
        height: auto;
        padding: 20px 0 0 0;
        }
	.hamburger {
		cursor: pointer;
		position: relative;
		padding: 28px 10px 20px 20px;
		display: inline-block;
        background: #fff;
		}
	.mobile { /*  per JS an ul.hauptnavigation  */
		display: block; 
		opacity: 1; 
		}
	nav { text-align: right; }
	nav ul {
		width: 100%;
		height: auto;
		display: none;
        background: #fff;
        padding-bottom: 20px;
		}
	nav ul li {
		float: none;
		width: 100%;
		}
	nav ul a {
		display: block; 
		padding: 10px 25px 10px 10px;
		text-align: right;
		}
    
    .tabelle {
        overflow: hidden;
        overflow-x: scroll;
    }
    td { padding: 5px 0; }
    .form-login td,
    .formular-daten td {
        display: block;
    }
    .sprachwahl { margin-bottom: 40px; }
    input[type=date] {
        padding: 6px 15px 1px 15px;
        display: block;
    }
    footer i {
        padding: 0 10px;
    }
} /* 800 */


/* [gst] */
.loginMsg { font-weight: bold; color: var(--green); margin-bottom: 20px; }
.required-field { font-weight: bold;  color: red; }
.form-error { display: none; color: #d90000; margin: 20px 0 ; }

.formAction {  font-weight: bold; color: var(--green); margin-bottom: 3px;}

/* admin list  */
form.adminEdit {
  display: inline-block;
}

input[type=submit].edit{
    padding: 3px;
    border-radius: 0;
    border: 1px solid black;
    background: none;
    color: var(--green);
    font-size: 1.5rem;
    cursor: pointer;
}
input[type=submit].edit:hover{
    /*background: gray;
    */
    background: var(--green);
    color: #fff;
}
.adminList li {
  margin-bottom: 3px;
  border:1px solid #fff;
}
.adminList li:hover {
  border-color: var(--green);

}
/*

*/