*{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing: border-box;}

html { scroll-behavior: smooth; }
.waiting * {cursor: progress;}

input, select, textarea { vertical-align:middle; }

body { line-height:1; color: #444; font-size: 12px; background: #F0F0F0; font-weight:400; font-family: Arial, Helvetica, sans-serif;padding:60px 0 0 0;overflow-x: auto;}
.hidemewhensmall{display:none;}
@media only screen and (min-width: 600px)
{
body { line-height:1; color: #444; font-size: 16px; background: #F0F0F0;padding:60px 0 0 0;overflow-x: auto;}
.hidemewhensmall{display:inline-block;}
}

.desktopheader{z-index:10000;position: fixed;white-space:nowrap;left:0;right:0;top:0;height:65px;background: linear-gradient(to bottom right, #a0e050 -60%, #3cab72 98%);box-shadow: 0.15em 0.15em 0.15em 0.15em rgba(0, 0, 0, 0.4);}

.formheader{font-size:150%;width:100%;text-align:center;margin:0px;padding-bottom:20px;}

.auswahllink:link{text-decoration: none;}
.auswahllink:visited{text-decoration: none;}
.auswahllink{width: 100%;}
.auswahlzeile{width: 100%;display: flex;flex-direction: row;height:4em;}
.auswahlzeile:hover{background:#F0F0FF;}
.auswahlicon{max-width: 4em;max-height:4em; height: auto;flex-grow:0;padding:0.4em;}
.auswahltext{padding: 1.7em 0em 0em 0.6em;flex-grow:10;font-weight: bold;text-decoration: none;color: #909090;}
.auswahlarrow{width: 1.5epx;height:auto;margin:1.3em 1.2em 1.2em 1em;flex-grow:0;}
.auswahldivider{width: 100%;height: 1px;border-radius: 6px;background-color: #E5E5E5;float: right;}

.main-container{padding: 1.5em 1.5em 1.5em 1.5em;background-color: #F5F4F9;overflow-x: auto;}
.main-content, .advice-content
{
	margin:0em 1.5em 1.5em 0em;
	flex-grow:0;
	display: inline-block;
	vertical-align: text-top;
	flex-direction:row;
	padding: 0.5em 1.5em 1.5em 1.5em; /*wird für menus auf 0 gesetzt*/
	border-radius: 10px;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
	background: linear-gradient(to top left, #F8F8F8, #FFFFFF);
	position:relative;
}
.advice-content{margin:0em 1.5em 1.5em 0em;background: linear-gradient(to top left, #E0FFD0, #F0FFE0);}

table {border-collapse: collapse;border-spacing:0;}
th{padding:0.5em;height:1.1em;border: 1px solid;font-size: 1.25em;font-weight: 600;background:#D0D0D0;vertical-align: middle;}
td{padding:0.5em;border: 1px solid;vertical-align: middle;}

hr{border-top: solid 1px #808080;border-left: solid 1px #808080;border-right: solid 1px #FFFFFF;border-bottom: solid 1px #FFFFFF;height:2px;}

p,li { font-size: 120%;line-height: 1.25em; }
.absatz{padding-top:1.25em;}
.center{width:100%;text-align:center;}

h1{font-size:1.6em;font-weight:600;color:#606060;letter-spacing:-.05em;margin:0.5em 0em 0.5em 0em;}
h2{font-size:1.4em;font-weight: 400;color: #606060;letter-spacing:-.05em;}

input[type="checkbox"]
{
	box-sizing: border-box;
	display: inline-block;
	border-radius: 0.4em;
	border:solid 2px red;
	background:blue;
}

input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.button2,
.redbutton,
.sbutton,
.tbutton,
.tbutton2
{
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
	vertical-align:middle;
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	outline: 0;
	white-space: nowrap;
	font-size: 1.12em;
	line-height: 1.5em;
	color: #fff;
	padding: 0.2em 0.5em 0.2em 0.5em;
	border: none;
	margin: 0;
	border-radius: 0.4em;
	cursor: pointer;
	min-width: 4em;
	background: linear-gradient(to top right, #3cab72 -25%, #a0e050 110%);
	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
}
.sbutton,.tbutton
{
	padding: 0.15em 0.5em 0.15em 0.5em;
	font-size: 1em;
	line-height: 1.3em;
}
.tbutton{width:100%;}

.container { text-align:center; padding:0em 2em 0em 2em;}

.row { display: flex; }

.column { flex: 33.33%;padding: 0px; }

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=password],
input[type=date],
textarea
{
	padding: 0px 10px;
	box-sizing: border-box;
	border: 1px;
	height: 2em;
	background-color: #fff;
	font-size: 1em;
	border-radius: 8px
}

.inp1{flex-grow:10;font-size: 16px;font-weight: normal;padding-left:0.3em;} /*to be used inside div-input*/
.inp2{padding:0.3em 0.4em 0.3em 0.4em;border-radius: 10px;box-shadow: inset 0.1em 0.1em 0.1em 0em rgba(0, 0, 0, 0.15);} /*to be used alone*/

.item-cell {background: #ffffff;border:0;text-align:left;border-radius: 8px;padding: 15px;box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
.sel-header{box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
.sel-cell {background: #ffffff;border:0;text-align:left;border-radius: 8px;padding: 15px;box-shadow: 0 2px 6px rgba(0,0,0,0.15);cursor: pointer;transition: box-shadow 0.2s ease, transform 0.15s ease; }
.sel-cell:hover {box-shadow: 0 4px 12px rgba(0,0,0,0.25);transform: translateY(-2px);}
.sel-cell:active {transform: translateY(0);box-shadow: 0 1px 4px rgba(0,0,0,0.2);}


.combobox {  position: relative; width: 100%; }
.combobox select,
select
{
	width: 100%;
	padding: 0px 10px;
	box-sizing: border-box;
	border: 1px;
	height: 2em;
	background-color: #fff;
	font-size: 1em;
	border-radius: 8px;
}
.combobox > * { box-sizing: border-box; height: 1.5em; }
.combobox input { position: absolute; width: calc(100% - 20px); margin: 0.2em 0em 0em 0.4em; padding:0;height: 1.75em;}


.tooltip { position: relative; display: inline-block; } /* Tooltip container */
.tooltip .tooltiptext { visibility: hidden; width:auto; max-width: 40em; background-color: #FFF; color: black; padding: 0.5em 0.2em; border:solid 2px #800000; border-radius: 6px; box-shadow: 0.2em 0.2em 0.2em 0em rgba(0, 0, 0, 0.4); position: absolute; z-index: 1; } /* Tooltip text */
.tooltip:hover .tooltiptext { visibility: visible; }/* Show the tooltip text when you mouse over the tooltip container */
.tooltipinvisible{visibility: hidden;}

.dropbtn {background-color: #04AA6D;color: white;padding: 1em;border: none;}/* Dropdown Button */
.dropdown {position: relative; display: inline-block; } /* The container <div> - needed to position the dropdown content */
.dropdown-content {display: none;position: absolute;background-color: #f0f0f0;min-width: 10em;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;} /* Dropdown Content (Hidden by Default) */
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;} /* Links inside the dropdown */
.dropdown-content a:hover {background-color: #ddd;} /* Change color of dropdown links on hover */
.dropdown:hover .dropdown-content {display: block;} /* Show the dropdown menu on hover */
.dropdown:hover .dropbtn {background-color: #3e8e41;} /* Change the background color of the dropdown button when the dropdown content is shown */

:modal{background-color: beige;border:3px solid burlywood;border-radius: 8px;padding:1em;position: absolute;float: left;left: 50%;top: 50%;transform: translate(-50%, -50%);max-height: 90%;}
dialog::backdrop {background-image: linear-gradient(45deg,#404040,#606060);opacity: 0.75;}
