/*   Y O U R   C S S   S T Y L E S
**
** Style all markdown content elements properly
** Use the markdown test file to check it: https://github.com/typemill/typemill/blob/master/content/00-Welcome/03-Markdown-Test.md
** You can activate and use the Tachyons CSS library: https://typemill.net/theme-developers/helper-functions#activate-tachyons

.class
#id
element

*/

.expander {
	background-color: #99b;
}
.expander:hover {
	background-color: #66f;
}
.landingpagenews li, .newsbox{
	background-color: white;
}
.landingpagenews li a{
	color: #333;
}
.mainnavigation li, tr, hr {
	border-color: lightgray;
}
/************************************
*  		STANDARD-ELEMENTS  			*
************************************/
html{}
body{}
header{}
footer{}
nav{ 
	clear: both; 
	background: #669;
	border-top: solid 2px #99b;
	border-left: solid 2px #99b;
	border-bottom: solid 2px #448;
	border-right: solid 2px #448;
}
#breadcrumb {
	background: #ccf;
}
#bottompager {
	background: #ccf;
	padding: 1rem;
	border-top: solid 2px #99b;
	border-left: solid 2px #99b;
	border-bottom: solid 2px #448;
	border-right: solid 2px #448;
}
#bottompager a {
	background-color: #99d;
	color: #000;
}
#bottompager a:hover {
	background-color: #cfc;
}
main{}
aside{
	background-color: #669;
}
article{
	background: white;
	padding-left: 1rem;
}
article a, article a:link, article a:visited{ text-decoration: underline; }
/* article a:before{ content: '\203A'; margin-right: 5px; } */
abbr{}

article pre, article code{
	font-family: monospace;
}
article pre{
	white-space: pre;
	padding: 0em;
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
article code{
	font-size: 0.8em;
	line-height: 1.4em;
	padding: 0 0.5em;
	word-break: break-word;
}
pre > code{
	font-size: 0.8em;
	padding: 1em;
	display: inline-block;
}
pre > code.language-pagebreak{
	display: none;
}
dl{ 
	clear: both; 
	border-top: 1px solid #66f;
	border-bottom: 1px solid #66f;
	padding: 0.5em 0;
}
dt{}
dd{
	margin: 0rem 2rem;
}
article ul{
	/*! overflow: hidden; 
	margin: 0;
	padding: 0;*/
}
article li{
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

article p {
  margin: 0 0 1rem 0;
}
.TOC li::before{
	 content: unset;
}
img{}
article h1, article h2, article h3, article h4, article h5, article h6{
	line-height: 1.15em;
	font-weight: 700; 
	line-height: 1em;
}
h1,h2,h3,h4,h5,h6{ word-wrap: break-word; hyphens: auto; }
article h1{ font-size: 2.2em; margin: 1.4em 0 0.6em; z-index:1; clear: both; }
article h2{ font-size: 1.6em; margin: 1.8em 0 0.6em; clear: both; }
article h3{	font-size: 1.3em; margin: 1.6em 0 0.6em; clear: both; }
article h4{	font-size: 1.1em; margin: 1.4em 0 0.6em; color: gray; }
article h5{	font-size: 1em; margin: 1.2em 0 0.6em; color: red; }
article h6{	font-size: 1em; font-style: italic; font-weight:300; margin: 1em 0 0.6em; color: blue; }
article .h1, article .h2, article .h3, article .h4, article .h5, article .h6{
	height: auto; /* fix for tachyons */
}
hr{
	border: none;
	border-top: 1px solid;
	clear: both;
}
ol{}
footer ul{ padding-left:1em; }

sup{}
/* Make table look good */
.tm-table{
	overflow-x: auto;
}
table{
	width: 100%;
	border-spacing: 2px;
	font-size: .8em;
}
thead{
	text-align: left;
}
tr{

}
th{
	padding: .5em 1em;
	background: #999;
	color: black;
}
td{
	padding: .5em 1em;
	background: #ccc;
}
.hljs-ln td{
	background: unset;
}
main b, main strong{
	font-weight: 600;
}

/************************************
*  		STANDARD SUGGESTIONS 		*
************************************/

/* Make links and buttons smooth */
.link, .link:active, .link:focus, .link:hover, .link:link, .link:visited{
	transition: none;
}
a, a:link, a:visited, a:focus, a:hover, a:active, button{
	transition: all .15s ease!important;
	transition-property: color, background-color, text-shadow, border;
}
.navPagBotFolder a:hover {
	Color: #99f;
	font-weight: bold;
}
.footerline {
	width: 100%;
	padding: 1rem 1rem;
    background: #ccf;
	font-size: .875rem;
}
article a:hover, article a:focus, article a:active,
footer a:hover, footer a:focus, footer a:active{ 
	color: #f00;
}
.justify-between{
	padding: 0rem 2rem;	
}
.bottompages {
	padding: 0.5rem;
}
/* For definition list */
dt::after{
	content: ":";
}
dt {
	font-weight: bold;
}

/* Make images and image captions look good */
img, figure,figure img{
	max-width: 100%;
	height: auto;
	aspect-ratio: attr(width) / attr(height);
}
figure{
	display: grid;
	margin: 2em auto;
	padding: 0;
}
figure.right, figure.left {
    width: auto;
    float: none;
    margin: auto auto;
}
figure img{
	display: block;
	margin: auto;
	/* border: #777 2px solid; */
}
figcaption{
	display: table-caption;
	caption-side: bottom;
	font-size: 0.8em;
	line-height: 1.2em;
    padding: 0.5rem;
}
/************************************
*  		zoombox 
************************************/
.rightmousewheel {
	border: 2px solid #999;
	width: 400px;
	float: right;
	margin: 0 0 1rem 1rem;
	background-color: #ccc;
}
.rightmousewheel:hover {
    border: 2px solid #66f;
	background-color: #ccf;
}
/* zoombox ist geschlossen (default) */
.zoomboxleft {
    cursor: pointer;
    float: left;
	margin: 0 1rem 1rem 0rem;
    border: 2px solid #999;
}
.zoomboxleft:hover {
    border: 2px solid #6f6;
}
.zoomboxleft:hover figcaption {
    background-color: #cfc;
}
.zoomboxleft img{
	width: 250px;
    margin: 0;
}
.zoomboxleft figcaption{
    background-color: #ccc;
}
.zoomboxleft figcaption::before{
    content: "+";
	padding-right: 0.3rem;
	font-weight: bold;
	color: #0a0;
}
.zoomboxleft .zoomboxbig {
    display: none;
}
/* zoombox ist offen (clicked) */
.zoomboxopen {
    cursor: pointer;
    margin: 0;
	display: block;
}
/* .zoomboxopen:hover {
    border: 2px solid #f66;
} */
.zoomboxopen:hover figcaption {
    background-color: #fcc;
	font-weight: bold;
}
.zoomboxopen img{
	width: 250px;
	margin: 0;
    border: 2px solid #999;
}
.zoomboxopen figcaption{
    background-color: #ccc;
	display: block;
	margin-right: -4px;
	font-weight: bold;
}
.zoomboxopen figcaption::before{
    content: "-";
	padding-right: 0.3rem;
	font-weight: bold;
	color: #f00;
}
.zoomboxopen:hover img{
    border: 2px solid #f66;
}
.zoomboxopen .zoomboxbig {
    display: block;
    width: 100%;
}
.zoomboxopen .zoomboxbig img {
    width: 100%;
}
/************************************
*  		accordion 
************************************/
.accHead{
    cursor: pointer;
	background-color: #ccc;
    padding: 0.5rem 1rem;
    border: 1px solid #666;
}
.accOpen .accHead:hover{
	background-color: #fcc;
}
.accClosed .accHead:hover{
	background-color: #cfc;
}
blockquote {
	margin: 0;
	transition: margin linear 0.2s;
}
.accClosed {
	margin: 0 3px 1rem 3rem;
}
.accOpen {
	
}
.accClosed div::before{
    content: "+";
	padding-right: 0.3rem;
	font-weight: bold;
	color: #0a0;
}
.accOpen div::before{
    content: "-";
	padding-right: 0.3rem;
	font-weight: bold;
	color: #a00;
}
.accClosed div {
	
}
.accOpen div {
	
}
.accClosed p{
	display: none;
}
.accOpen p{
	display: block;
    border: 1px solid #666;
	background-color: #eee;
	padding: 1rem;
}

.lastchanged {
	clear: both;
	color: #99f;
	font-size: 0.9rem;
	margin: 1rem 0.5rem;
}
.accordiontextarea {
    border: 1px solid #000;
    padding: 5px;
    width: 100%;
    font-size: 16px;
    background: #eee;
}
.accordion {
    background-color: #999;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    text-align: left;
    font-size: 15px;
    border-radius: 0px 30px 0px 0px;
    margin: 0px;
}
.accordionactive {
    border: 1px solid #000;
    color: #000;
}
.accordion:hover {
    background-color: #cfc;
    border: 1px solid #000;
    color: #000;
}
.accordionactive:hover {
    background-color: #fcc;
    border: 1px solid #000;
    color: #000;
}



.footnotes ol{
	font-size: .8em;
	line-height: 1em;
	margin: 0 0 0 0;
}

/************************************
* 			TYPEMILL-ELEMENTS 		*
************************************/

ul.TOC,.TOC ul{
	list-style: none;
}
.TOC{
	padding: 1em;
	border: 1px solid;
}
.TOC{
	border-color: lightgray;
	background: #ddf;
}
.TOC li{
	position: relative;
}
.TOC li a{
	text-decoration: none;
	display: inline-block;
	width: 100%;
	border-bottom: 1px dashed;
	line-height: 1em;
	margin: .3em 0;
}
.TOC li a:hover,.TOC li a:focus,.TOC li a:active{
	border-bottom: 1px solid;
}
.TOC li a:after{
	content: '\203A'; 
	position: absolute;
	right: 5px;
	transition: all .2s;
}
.TOC li a:hover:after{
	right: 0px;	
}
.notice1 {
	clear: both;
    margin: 1em 0;
    padding: 10px 1em;
	background-color: #ffded4;
	border-left: 4px solid #f65a3c;
}
.notice2 {
	clear: both;
    margin: 1em 0;
    padding: 10px 1em;
	background-color: #fff3d4;
	border-left: 4px solid #f6b73c;
}
.notice3{
	clear: both;
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #d4e0ff;
    border-left: 4px solid #3c7bf6;	
}
.notice4 {
	clear: both;
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #cfc;
    border-left: 4px solid #383;	
}
.notice1::before,.notice2::before,.notice3::before,.notice4::before{
    content: unset!important;
	display: none;
}
/* used for pro content box 
.notice4{
  position: relative;
  text-align: center;
  padding: 1em;
  border: 1px solid;
}
*/
/* Style the optional anchor-links for headlines */
a.tm-heading-anchor {
	display:  inline-block;
	margin-left:  -0.8em;
	width: 0.8em;
	font-weight: 300;
    opacity: 0;
    text-decoration: none;
    float: right;
}
a.tm-heading-anchor:hover,a.tm-heading-anchor:focus {
    opacity: 1;
    text-decoration: none;
}
h2:focus > .tm-heading-anchor, 
h2:hover > .tm-heading-anchor, 
h3:focus > .tm-heading-anchor, 
h3:hover > .tm-heading-anchor, 
h4:focus > .tm-heading-anchor, 
h4:hover > .tm-heading-anchor,
h5:focus > .tm-heading-anchor, 
h5:hover > .tm-heading-anchor,
h6:focus > .tm-heading-anchor, 
h6:hover > .tm-heading-anchor{
	opacity: .5;
	text-decoration: none;
}

/* style the typemill download-button for files */
a.tm-download
{
	line-height: 40px;
	margin-left: 70px;
}
a.tm-download::before{
	content: '\2193';
	position: absolute;
	margin-left: -50px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-family: Calibri, "Segoe UI", Roboto, Courier, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.4em;
	font-weight: 900;	
	border: 2px solid #ccf;
	border-radius: 20%;
	color: #99c;
	text-align: center;
	text-decoration: none;
}
a.tm-download:hover::before{
	text-decoration: none;
	color: #fff;
	background: #99c;
}

/* Fake youtube button. Works with typemillutilities.js */
.video-container{
	position: relative;
	text-align: center;
	float: left;
    margin: 0 1rem 1rem 0;
}
img.youtube{
	position: relative;
	max-width: 560px;
}
button.play-video { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	height: 100px;
	width: 100px;
	background: #e0474c;
	color: #FFFFFF;
	border-radius: 50%;
	border: 0px;
	padding: 0;
	text-align: center;
}
button.play-video:hover {
	background: #cc4146;
	cursor: pointer;
}
button.play-video::after {
	position: absolute;
	top: 50%;
	margin: -20px 0 0 -15px;
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 20px 0 20px 40px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
	content: ' ';
}

.landingpageinfo h2{
	font-size: 2.25rem;
}
.landingpageinfo h3{
	font-size: 1.5rem;
}
.landingpageinfo h4{
	font-size: 1.25rem;
}
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}
/************************************
* 		TACHYONS ADDITIONS 			*
************************************/

/* Keeps Footer at the bottom */
.body-footer-bottom { /* add this class to the body-tag */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.footer-bottom { /* add this class to the footer-tag */
  margin-top: auto;
}
/* Nice set of system fonts, add this to the body-tag */
.sans-serif-tm { 
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 
}
.sans-serif-title{
	font-family: arial,"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 	
}
/* optimize text, add this to the body-tag */
.optimize-text{
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
	text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
.grid-container{
	display: block;
	background-image: url(/themes/SideBack.jpg);
	background-repeat: repeat-y;
}
.grid-header, .grid-main, .grid-sidebar{
	display: block;
	width: 100%;
}
.f-large{
	font-size: 4rem;
}
.h4-5{
	height: 12rem;	
}
.shadow-2-hover{
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);	
}
.shadow-2-hover:hover, .shadow-2-hover:focus{
	box-shadow:0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );
}
.margin-bottom-1{
	margin-bottom: -1px;
}
.arrow-after:after{
	content: '\203A'; position: absolute; right:5px;
}
.arrow-after-transition:after{
	content: '\203A'; position: absolute; right:5px;
	transition: all .2s;
}
.arrow-after-transition:hover:after{
	right:0px;
}
.indent-l{ padding-left:1rem; }
.indent-l-1{ padding-left:1rem; }
.indent-l-2{ padding-left:2rem; }
.indent-l-3{ padding-left:3rem; }
.indent-l-4{ padding-left:4rem; }
.indent-l-5{ padding-left:5rem; }
.indent-l-6{ padding-left:6rem; }
.b--solid-hover:hover,.b--solid-hover:focus,.b--solid-hover:active{
	border-style: solid;
}

/*************************
*  RESPONSIVE NAVIGATION *
*************************/
.navfile {
	font-weight: 300;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	position: relative;
	padding-right: 0.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	margin-bottom: -1px;
	background: #ccf;
	border-top: solid 1px #eee;
	border-left: solid 1px #eee;
	border-bottom: solid 1px #99b;
	border-right: solid 1px #99b;
}
.navfolder {
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	position: relative;
	padding-right: 0.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	margin-bottom: -1px;
	background: #ccf;
	border-top: solid 1px #eee;
	border-left: solid 1px #eee;
	border-bottom: solid 1px #99b;
	border-right: solid 1px #99b;
}
.navPagBotFolder {
	display: flex;
	text-align: left;
	padding: 0;
	list-style-type: none;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	color: #66b;  
	background-color: #ccf;
}
.navPagBotFolder a {
	color: #000;
}
.navfoldercont {
	list-style-type: none;
	background: #88b;
	padding-left: 0.7rem;
	border-left: 1px solid #77a;
}
.mainnavigation {
	background: #669;
}
.menu a:hover{
	background-color: #cfc;
}
.navfolder a:hover{
	background-color: #cfc;
}
.contentnav{
	width: 70%;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccf;
}
.contentnav.collapse .folder > ul{
	display: none;
}
.contentnav .folder.active > ul,.contentnav .folder.activeParent > ul{
	display: block;
}
.burgerbutton{
	display: inline-block;
	font-size: 2em;
	width: 100%;
	text-align: right;
	padding: 2rem;
	box-sizing: border-box;
}
.burgerbutton, .menu{
    transition:all .2s ease;
}
.menu {
   	max-height: 0; /* hide menu completely when burger unchecked */
	margin: 0px;
	overflow:hidden;
	position: relative;
	z-index: 1;
	font-size: 1.3rem;
}
#burger:checked ~ .menu {
	max-height: 200%;
}

#burger:checked ~ .menu {
	background: #333;
}
#burger a{
	color: #f88;
}
.menu a{
	color: #000;
}
#burger:checked ~ .burgerbutton {
	color: #fff;
	background: #88b;
}

.logo-image{
	max-width: 80px;
}

@media screen and (min-width:30em){
	h1,h2,h3,h4,h5,h6{ hyphens: manual; }
}

@media (min-width: 40em) {
	figure.right {
	    width: auto;
	    float: right;
	    margin: 0 0 2em 2em;
	}
	figure.left {
	    width: auto;
	    float: left;
	    margin: 0 2em 2em 0;
	}
}

/**************
* 	Forms 	  *
**************/

form{
	width: 100%;
	max-width:  800px;
	border: none;
	margin: 20px 0 20px 0;
	padding: 0 0 0 0;
}
form fieldset{
	width: 100%;
	border: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
form label{
	width: 100%;
	display: block;
	color: #333;
	margin-top: 1.5em;
}
form input, form textarea{
	width: 100%;
	display: block;
	border: 1px solid #ddd;
	padding: 15px;
	margin: 0 0 20px 0;
	background: #f5f5f5;
}
form input:focus,form select:focus,form textarea:focus{
	outline: none;
	border: 1px solid rgba(229, 226, 211, 1);
	box-shadow: 0 0 2px #D73B00;;
}
form input[type="submit"],form button,form .button{
	cursor: pointer;
	font-size: 1em;
	border: 0;
	margin-top: 1.5em;
	width: 100%;
	padding: 15px;
}
form input[type="submit"]:hover,form button:hover,.button:hover{
	opacity: .8;
}


@media screen and (min-width:50em) {
	.grid-container{
		display: grid;
		grid-template-columns: 30% 70%;
		grid-column-gap: 1em;
		grid-template-rows: auto auto;
		grid-template-areas: 
		"gridHeader gridMain"
		"gridSidebar gridMain"
		". gridMain"
	}
	.grid-header{
		grid-area: gridHeader;
		background: #669;
		/* border-top: solid 1px #eee;
		border-left: solid 1px #eee;
		border-bottom: solid 1px #99b;
		border-right: solid 1px #99b; */
	}
	.grid-main{
		grid-area: gridMain;
		margin-left: -1rem;
	}
	.grid-sidebar{
		grid-area: gridSidebar;
	}

	.logo-image{
		max-width: 98%;
		border-top: solid 3px #666;
		border-left: solid 3px #666;
		border-bottom: solid 3px #ccc;
		border-right: solid 3px #ccc;
	}

	#burger:checked ~ .burgerbutton {
		color: inherit;
		background: inherit;
	}
	#burger:checked ~ .menu {
		background: inherit;
	}
	.menu a{
		color: inherit;
	}
	.contentnav{
		position: relative;
		width: auto;
	}
	.burgerbutton{
		display: none;
	}
	.menu{
		font-size: inherit;
		max-height: inherit;
	}
	a.tm-heading-anchor {
		float: left;
	}
}
.logo {
	/* background-image: url(/themes/LogoBack.png); */
	max-width: fit-content;
}

@media print {
	#contentnav, nav, #bottompager,.widgetcontainer,.funcicons,.account,footer{
		display:  none;
	}
	.grid-main{
	    margin-top: -10px!important;
	    padding-top: 0px!important;
	}
	.logo-image{
		max-width: 150px;
	}	
	main{
		padding-bottom: 0!important;
	}
	aside{
		padding-top: 0!important;
		padding-bottom: 0!important;
	}
	main,footer{
		border:  0px!important;
	}
	footer .ph3
	{
		padding-top: 0;
		padding-bottom: 0;
	}
	body, .landingpagecontrast, .account, main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews, button.expander, .notice4{
		background: #fff!important;
		color:  black!important;
	}
	article{
		font-size: .8em;
	}
	article a[href]{
		color: black;
		text-decoration: underline;
	}
	article a[href]:after {
		content: " (" attr(href) ")";
	}
	nav .mw6{
		width:  100%;
	}
	a.tm-heading-anchor {
		display: none;
	}
}
.rechner form {
	margin: 0;
}
.rechner {
    margin-top: 1rem;
}
.rechner a:hover{
     color:#0F0;
}
.rechner p{
     margin: 0 0 0 0;
     padding: 0 0 0 0;
	 font-weight: bold;
}
a.calcdel:hover{
     color:#F66;
}
.rechner a{
     color:#ddd;
     text-decoration:none;
}
.calcinput {
     margin-top: 0.2rem;
	 padding: 0.5rem;
}
.rechner:hover{
     color:#36F;
     cursor:pointer;
}

html {
	scroll-behavior: smooth;
}

#BackToTop {
  display: none;
  position: fixed;
  bottom: 64px;
  right: 5px;
  z-index: 99;
  font-size: 8px;
  border: 1px solid #666;
  outline: none;
  background-color: #99f;
  cursor: pointer;
  /*! border-radius: 10px; */
  width: 25px;
  height: 86px;
  padding-top: 10px;
  padding-bottom: 15px;
}

#BackToTop:hover {
  background-color: #9f9;
  font-weight: bold;
  color: black;
  width: 100px;
  font-size: 28px;
}