/* Stil für gh7 */

html {
    font-family: verdana, sans-serif, arial;
    font-size: 0.85em;
    line-height: 1.2;
}


body {
    margin: 0 auto;
    max-width: 55em;
    text-align: left;
    color: black;
    background-color: white;
}

/*
p {
    font-size: 14px;
    line-height: 1.5em;
}
*/

/* Links im Fließtext normal und unterstrichen. */
.caintext {
	color: black;
    text-decoration:underline;
}

a, a:link, a:visited {
    text-decoration:none;   
}

a:hover, a:active, a:focus{
    text-decoration:underline;
}

h1 {
/*
    font-size: 260%;
    font-weight: 300;
*/
    font-size: 150%;
    font-weight: 700;

    margin-top: 3px;
    margin-bottom: 5px;
}

h2 {
    font-weight:bold;
    font-size: 115%;
    line-height: 1.2;

	color: var(--col-font-h2);
    margin-top: 3px;
    margin-bottom: 5px;
}

h3 {
    font-size: 90%;
    font-weight:normal;
    line-height: 1.3;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* vormals strong */
strong {
    font-weight:normal;
	font-size: 125%;
	line-height: 1.4;
    color:  var(--col-mark-2);
    margin-top: 0px;
    margin-bottom: 0px;
}

/* vormals h7 */
small {
    font-size: 75%;
/*    color:  var(--col-grey0); */
}


img {
	max-width: 100%;
}

.chowtoimg {
  width: 500px;
  border:3px solid #555;
  -moz-box-shadow: 7px 7px 3px #aaa;
  -webkit-box-shadow: 7px 7px 3px #aaa;
  box-shadow: 7px 7px 3px #aaa;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  filter: brightness(1.1) contrast(1.1) grayscale(0.3);	
  -webkit-filter: brightness(1.1) contrast(1.1) grayscale(0.3);	
}

ul {
    margin-top: 4px;
    margin-bottom: 4px;
}


li {
	color: black;
/*	font-size: 14px;  */
	text-decoration: none;
}

/***
#divmenu {
	background-color: #375623;
	color: white;
	vertical-align:middle;
}
***/

header {
	padding: 0.5em 0.5em 0.5em 0.5em;
	/* vertical-align:middle;
	height:165px;   
	width: 100%; */
    max-width: 55em;
	display: table;
	margin-top: 1px;
	margin-bottom: 12px;
	margin-left: 17px;
	margin-right: 17px;
}

#divtiteltab {
	display: table-row;
}

#divtitellinks {
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 20%; 
	height: auto; 
	display: table-cell;
	vertical-align: top;
 }
 
#divtitelrechts {
	padding: 0.5em 0.5em 0.5em 0.5em;
	display: table-cell;
}

#divtitelbrandtext {
	display: table-row;
	vertical-align: top;
}

#divtitelbrandhintgh {
	display: table-row;
	vertical-align: bottom;
	text-align: right;
}

#divtitelbrandlogogh {
	width: 7%; 
	padding: 0.5em 0em 0.5em 0em;
	display: table-cell;
	vertical-align: bottom;
}


#titelbold {
	float: left;
	padding: 0px;
	color: var(--col-mark-2);
}


#titelboldlast {
	padding: 0px;
	color: var(--col-mark-2);
}


main {
	background-color: white;
	border: 0px solid;
	padding: 8px;

	margin: 8px;
}

#divevent {
	background-color: var(--col-mark-4);
	color: var(--col-font-4);

	border: 0px solid;
	border-color: black;
	border-radius: 4px;

	padding-top: 8px;
	padding-bottom: 16px;
	padding-left: 8px;
	padding-right: 8px;

	margin-top: 0px;
	margin-bottom: 16px;
	margin-left: 1px;
	margin-right: 1px;
}

#diverror {
	background-color: var(--col-error-b);

	border: 0px solid;
	border-color: black;
	border-radius: 4px;

	padding: 8px;
	margin: 8px;
}

#divhint {
	background-color: var(--col-hintback);
	color: var(--col-hintfont);

	border: 2px solid;
	border-color: var(--col-hintborder);
	border-radius: 4px;
	padding: 8px;

	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 1px;
	margin-right: 1px;
}

#divmark {
	background-color: var(--col-act-8);
	color: black;

	border: 0px solid;
	border-color: var(--col-act-8);
	border-radius: 4px;
	padding: 8px;

	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 1px;
	margin-right: 1px;
}

#divprompt {
	background-color: var(--col-promptback);
	color: var(--col-prompfont);
	border: 2px solid;
	border-color: var(--col-promptborder);
	border-radius: 4px;
	padding: 8px;

	margin: 1px;
	margin-top: 1em;
}

.clink {
    font-weight:normal;
	font-size: 90%;
}


#divsellist {
	background-color: var(--col-white);
	
	border: 2px solid;
	border-color: var(--col-white);
	border-radius: 4px;
	padding: 8px;

	margin: 8px;
}

.cdivselitem {
	background-color: white;

	border: 2px solid;
	/* border-top: 2px solid; */
	border-color: var(--col-mark-2) white white white;
	border-radius: 4px;
	padding: 8px;

	margin: 8px;
}

.cdivselitem_disabled {
	background-color: var(--col-grey4);

	border: 2px solid;
	border-color: var(--col-grey4);
	border-radius: 4px;
	padding: 8px;

	margin: 8px;
}

.cdivselitem:hover, .cdivselitem:focus {
	transition: all ease 0.5s;
	background-color: var(--col-mark-8);
	color: var(--col-font-8);

	border: 2px solid;
	border-color: var(--col-mark-2);
	border-radius: 4px;
	padding: 8px;

	margin: 8px;
}

/* Damit Hover-Optik auch normal verfügbar ist. */
.cdivselitem_hover {
	transition: all ease 0.5s;
	background-color: #CFF0FB;

	border: 2px solid;
	border-color: #0E7496;
	border-radius: 4px;
	padding: 8px;

	margin: 8px;
}

.cdivselitem_selected {
 	background-color: var(--col-act-8);
	border: 2px solid;
	border-color: var(--col-act-8);
	border-radius: 4px;
	padding: 8px;

	margin: 8px;
}


#divaction {
	/* damit wird div zum Container für absolut positionierte Buttons */

	display: flex;
	position: relative;
	height: 3em;
	border: 0px solid;
	border-color: black;
	border-radius: 4px;
	padding: 8px;
	text-align: right;
	margin: 8px;
}

.but_inactiv {
	background-color: var(--col-grey5);
	border: 2px solid;
	border-color: var(--col-grey3);
	color: var(--col-grey3);
	border-radius: 4px;
	padding: 8px;
	margin: 12px;
}

.but_activ {
	font-size: 100%;
	font-weight: 600;
	background-color: var(--col-grey5);
	border: 2px solid;
	border-color: var(--col-act-4);
	color: var(--col-act-4);
	border-radius: 4px;
	padding: 8px;
	margin: 12px;
}


.but_activ:hover, .but_activ:focus {
	font-weight: 800;
	transition: all ease 0.5s;
	background-color: var(--col-act-4);
	border: 2px solid;
	border-color: var(--col-act-2);
	color: var(--col-grey3);
	border-radius: 4px;
	padding: 8px;
	margin: 12px;
	cursor: pointer;
}


.cbutbotstyle {
}

.cbutbotleft {
	position: absolute;
	left: 0px;
	top: 0px;
}

.cbutbotright {
	position: absolute;
	right: 0px;
	bottom: 0px;
	outline-style: solid;
	outline-color: var(--col-grey5);
	outline-width: 8px;
}
           
.cbutinbox {
	position: absolute;
	right: -4px;
	bottom: -4px;
}

	 
#but1.but_activ {
	font-size: 115%;
	color: var(--col-mark-4);
	border-color: var(--col-mark-4);

	background-color: var(--col-grey5);
	border: 2px solid;
	border-color: var(--col-act-4);
	color: var(--col-act-4);
	border-radius: 4px;
	padding: 8px;
	margin: 12px;

}       

#but1.but_activ:hover, #but1.but_activ:focus {
	font-weight: 800;
	transition: all ease 0.5s;
	background-color: var(--col-act-4);
	border: 2px solid;
	border-color: var(--col-act-2);
	color: var(--col-grey3);
	border-radius: 4px;
	padding: 8px;
	margin: 12px;
	cursor: pointer;
}

.labtxtin {
	width: 13.3em;
	padding-left: 0.1em;
	line-height: 2em;
	display: inline-block;
}

.inptxtin {
	width: 55%;
	height: fitcontent;
}

.inpmailin {
	width: 55%;
}


.inpdate {
	width: 7em;
}

.inptime {
	width: 4em;
}

.inpnumber {
	width: 4em;
}

.inpfloat2 {
	width: 4em;
}

.labshorttxtin {
	width: 7em;
	padding-left: 0.1em;
	line-height: 2em;
	display: inline-block;
}

.inpshorttxtin {
	width: 70%;
 	height: fit-content;
	rows: 3; 
}

#asterik {
/*	margin-top: 3em; */
}
        

.divtextinput_activ {
	background-color: var(--col-act-8);
/*	background-color: var(--col-grey5); */
	display: block;
	border: 2px solid;
	border-color: var(--col-act-2);
	border-radius: 4px;
	padding: 8px;
	margin: 8px;
	/* Damit Kind hier positioniert werden kann, aendert nichts an Positionierung des Rahmens */
	position: relative;
	right: 0px;
	top: 0px;

}

.divtextinput_inactiv {
	background-color: var(--col-inact);
	display: none;
	border: 2px solid;
	border-color: var(--col-inact);
	border-radius: 4px;
	padding: 8px;
	margin: 8px;
	
	position: relative;
	right: 0px;
	top: 0px;
}


footer {
	background-color: var(--col-grey1);
	border: 0px solid;
	padding: 4px;
	padding-left: 2em;
	margin: 8px;
	font-size: 85%;
	color: white;
	text-align: left;
}

footer a  {
	color: white;
}

footer small  {
	color: white;
}

.clastcol {
	text-align: right;
}

table {
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}


.mediaBig {
	display: inline;
}

.mediaSmall {
	display: none;
}

.mediaThin {
	display: none;
}

.ch4u_hide {
	display: none;
}

.ch4u_show {
	display: inline;
}

@media only screen and (min-width: 32em) and (max-width: 40em) {
	html {
		font-size: 0.825em;
		line-height: 1.15;
	}
	
	.inptxtin {
		width: 24em;
	}
	
	.mediaBig {
		display: none;
	}

	.mediaSmall {
		display: inline;
	}

	.mediaThin {
		display: none;
	}

footer {
	padding-left: 1em;
}

/*
	body {
		background-color: lightblue;
	}
*/
}

@media only screen and (max-width: 32em) {
	html {
		font-size: 0.80em;
		line-height: 1.1;
	}
	
	.inptxtin {
		width: 12em;
	}
	
	.mediaBig {
		display: none;
	}

	.mediaSmall {
		display: none;
	}

	.mediaThin {
		display: inline;
	}

footer {
	padding-left: 0em;
}


/*
	body {
		background-color: green;
	}
*/
}