:root {
	--maxwidth: 800px;
	--headerheightdesktop: 170px;
	--headerheightmobile: auto;
	--bottomheightdesktop: 140px;
	--menuheight: 50px;
	--main-grey: #CCCCCC;
	--main-green: #7ECB22;
	--margin-left: 10px;
	--margin-right: 10px;
	--mobile-menu-background:rgba(255,255,255,0.9);
	--mobile-menu-icon-top: 40px;
	--mobile-menu-icon-width: 60px;
	--mobile-menu-icon-height: 60px;
	--mobile-menu-icon-bar-height: 10px;
	--mobile-menu-icon-bar-padding-top: 6px;
	--mobile-menu-icon-bar-padding-bottom: 6px;
	--mobile-menu-margin-right: 7%;
	--transition-time:0.3s;
	--hr-height: 5px;
	--nameingbuero-margin-bottom: 10px;
	--marker-padding-left: 15px;
	--ul-li-maxwidth: 350px;
	--sec-ul-li-maxwidth: 500px;
	--z-index-footer: 0;
	--z-index-header: 1;
	--z-index-menu: calc(var(--z-index-header) + 1 );
	--z-index-menu-li: calc(var(--z-index-menu) + 1 );
	--z-index-menu-li-hover: calc(var(--z-index-menu-li) + 1 );
	--z-index-mobile-menu-icon: calc(var(--z-index-menu-li-hover) + 1 );
}


@viewport {
	width: calc(device-width -50px);
	zoom: 1.0;
	overflowX: hidden;
}

* {/* General Styles */
	margin: 0;
	padding:0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	color: black;
	background-color: white;
	hyphens: auto;

}

html {
	scroll-padding-top: var(--headerheightdesktop);
	scroll-padding-bottom: var(--bottomheightdesktop);
	overflow-y: scroll;
}

header {
	position:absolute;
	top: 0;
	margin:0;
	padding:0;
	height: var(--headerheightdesktop);
	width:100%;
	max-width: var(--maxwidth);
	left:50%; transform: translateX(-50%);
	z-index: var(--z-index-header);
}
.absolute{position:absolute;}
.fixed{position:fixed;}
.headerimage { /* grosses Logo fuer standard Desktop Layout*/
	margin: 0 auto;
	height:117px;
	text-align:center;
	background-image: url("../pic/Bildverarbeitung-Datenanalyse-Optimierung.webp");
	background-repeat:no-repeat;
	background-size: contain;
	aspect-ratio: 5/1;
}

.NameIngBuero{
	/* content wird erst im mobile-view sichtbar geschaltet*/
	display:none;
	margin-left:calc(var(--margin-left) + 5%);
 	margin-bottom: var(--nameingbuero-margin-bottom);

}

body {
	margin-top: var(--headerheightdesktop);
	margin-bottom: 200px;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--maxwidth);

}

hr {
	border: none;
	height: var(--hr-height);
	background-color:var(--main-grey);
}
h1,h2 {
	padding-top:20px;
	padding-bottom: 20px;
	text-align:center;
	}
h3,h4 {
	text-align:center;
	}
p{
	margin-left: calc( var(--margin-left) + 10px);
	margin-right: calc( var(--margin-right) + 10px);
	line-height: 26px;
	}
	
p.small{
    line-height: 1.5;
    margin-left: calc( var(--margin-left) -10px);
}

a {	text-decoration: none;}  /* Links ohne Dekoration(kein Unterstrich,bitte) */



/* standard desktop layout*/

.menu {	display: flex;}
.menu > li {
	display:inline-block;
	margin:auto;
	z-index:var(--z-index-menu-li);
}
.menu > li:hover {}
.menu > li > a {
	display:inline-block;
	padding:15px;
	width:100%;
}
.menu > li > a:hover {
	color: white;
	background-color: var(--main-green);
}
.menu > li > ul {
  display: none;
  position: absolute;
  text-align:left;
  width:auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
 }
.menu > li:hover > ul {
	display: block;
}
.menu > li > ul > li {display: flex;}
.menu > li > ul > li > a {
	padding:15px;
	width:100%;
}
.menu > li > ul > li > a:hover {
	background-color:var(--main-green);
	color: white;
}

/* mobile layout general */
.mobile-menu-icon {/* im standard desktop layout unsichtbar*/
	display: none;
	position: fixed;
	flex-direction: column;
	margin-right: var(--margin-right);
/*
	justify-content: center;
*/
/*
	align-items: center;
*/
	right:0;
	width: var(--mobile-menu-icon-width);
	height: var(--mobile-menu-icon-height);
	cursor: pointer;
	top: var(--mobile-menu-icon-top);
	z-index: var(--z-index-mobile-menu-icon);
	background:transparent;
}

.bar {
	top: 0px;
	left: 0;
	width: var(--mobile-menu-icon-width);
	height: var(--mobile-menu-icon-bar-height); /*12px*/
	background-color: var(--main-green);
	position: absolute;
	transform-origin: center left;
	transition: transform var(--transition-time) ease-in-out;
}
.bar:nth-child(2) {
	top:calc((var(--mobile-menu-icon-height) - (3 * var(--mobile-menu-icon-bar-height) ) ) / 2 + var(--mobile-menu-icon-bar-height));
	transform-origin: center center;
}
.bar:nth-child(3) {
	top:calc((var(--mobile-menu-icon-height) - (3 * var(--mobile-menu-icon-bar-height) ) )  + 2 * var(--mobile-menu-icon-bar-height));
}

.rotated1 {transform: translateY(calc( var(--mobile-menu-icon-bar-height) /(-2))) rotate(45deg) scaleX(1.41);}
.rotated3 {transform: translateY(calc( var(--mobile-menu-icon-bar-height) /  2 )) rotate(-45deg) scaleX(1.41);}
.scale0 {
	transform-origin: center center;
	transform: scale(0);
}




/* fuer die Auflistungen im Hauptteil */
main {}
main > div {
	display:flex;
	justify-content: center;
	/* ansonsten rutscht alles nach links */
}
main > div > ul{
	background: transparent;
	margin-left: var(--marker-padding-left);
}
main > div > ul > li {
	max-width: var(--ul-li-maxwidth);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: var(--marker-padding-left);
	background: transparent;
	white-space: normal;
	hyphens: none;
}

/* list markers main */
main > div > ul > li::marker {
	content: "■";
	color: var(--main-green);
}


/* fuer die Auflistungen im Sectionteil */
section > div {
	display:flex;
	justify-content: center;
	/* ansonsten rutscht alles nach links */
}
section > div > ul{
	background: transparent;
	margin-left: var(--marker-padding-left);
}
section > div > ul > li {
	max-width: var(--sec-ul-li-maxwidth);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: var(--marker-padding-left);
	background: transparent;
	white-space: normal;
	hyphens: none;
}

/* list markers sectionteil */
section > div > ul > li::marker {
	content: "■";
	color: var(--main-green);
}

.repaircafetable{}

.repaircafetable>tbody>tr {height: 50px;}

.repaircafetable>tbody>tr>td {}

.repaircafedates {padding-right: 20px;}

.repaircafelinks {height: 100%;}

.repaircafelinks a{
	display:flex;
	align-items:center;
   height: 100%;
}

.repaircafelinks:hover {
	/* ganze Box gruen*/
	background-color: var(--main-green);
}

.repaircafelinks:hover a {
	/*Schriftzugbereich*/
	background: transparent;
	color:white;
}

.partnerblock{
	display:inline-block;
	width:75%;
	margin-left:25%;

	}

.partnerlinks {
	align-items: center;
	display:flex;
	}

.partnerlinks a{
	display:inline-flex;
	align-items: center;
	padding-right:20px;
	}

.partnerlinks:hover a {
	background-color: var(--main-green);
	color:white;
}

.externallink {
	height: 18px;
	width: 18px;
	vertical-align:-2px;
  	padding-left:4px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	/*background-image: url("../pic/externallink.svg");*/
}

.footer {
	position: relative;
	margin-left: var(--margin-left);
	margin-right: var(--margin-right);
	bottom: 0;
	padding-top:10px;
	padding-bottom:10px;
	z-index: var(--z-index-footer);
}

.footer1,
.footer2 {
	display:flex;
	justify-content:space-around;
	text-align: center;
	flex-wrap: wrap;
}

.impressum {
	display: flex;
	height:50px;
	hyphens: none;
	float:left;
	align-items: center;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
 	padding-bottom:10px;
}

.homebutton {
	height:30px;
	width:30px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("../pic/home.svg");
}

.footer1 .homebutton:hover{
	/* ganze Box gruen*/
	background-color: var(--main-green);
	background-image: url("../pic/homewhite.svg");
}
.footer1 .impressum:hover {
	/* ganze Box gruen*/
	background-color: var(--main-green);
}
.footer1 a .impressum:hover {
	/*Schriftzugbereich*/
	background: var(--main-green);
	color:white;
}

.Schlagworte{
	text-align: center;
	justify-content: space-between;
  	margin-left: var(--margin-left);
	margin-right: var(--margin-right);
	font-size:small;
}

/* Kontaktformular-Impressum*/
.outerbox{
	display:flex;
	flex-wrap:wrap;
}
.divbox {
	box-sizing:border-box;
	padding-left: 10px;
	padding-right: 10px;
	width:50%; /* desktop layout*/
}

.divbox h2 {
	font-weight: bold;
	background-color: transparent;
}

/*Entry-title*/
.label {
	padding-left: 0%;
}
/*Entry-field*/
.input {
	margin-bottom: 10px;
	border-radius: 4px;
	border: 1px var(--main-green) solid;
	width:100%;
	display: flex;
	font-size: 150%;
}
.input:focus{
	outline: none;
	background-color:rgba(167,252,0,0.1)
}
.input:hover{ border-radius: 4px;}
.textarea {
	scrollbar-color: #7ECB22 #EBEBEB ;
}
.submitbutton{
	height: 80px;
}


.partner-image {
	display: block;
	padding: 5px;
	width:150px;
	max-height:65px;
	margin:auto;
	vertical-align: middle;
	background:transparent;
}



/* Media Query for Small Screens */
@media (max-width: 800px) {
	@keyframes fade {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
*{
%border: 1px solid red;
	}
html {
	scroll-padding-top: var(--headerheightmobile);
	scroll-padding-bottom: var(--bottomheightdesktop);
	overflow-y: scroll;
}
	header{
	height:var(--headerheightmobile);

	}
  header div {
  		width: 75%;

	  	}
	header div a {
		display: inline-flex;
		margin: 10px;
		}
	.headerimage{ /* kleines Logo oben links für mobile layout*/
			margin-top:10px;
			margin-bottom:5px;
			margin-left:calc(var(--margin-left) + 5%);
			background-size: contain;
			transform: scale(0.90); /* Scale the image */
			background-image: url("../pic/Bildverarbeitung-Datenanalyse-Optimierung-Logo2.webp");
			aspect-ratio: 1/1;

	}
	.mobile-menu-icon {
		display: flex;
		margin-right:var(--mobile-menu-margin-right);
	}

	/* mobile-menu-layout*/
	.menu {
		display:none;
		position:absolute;
		margin-top: calc( ( var(--headerheightmobile) - var(--mobile-menu-icon-top) - var(--mobile-menu-icon-height) - 25px ) * (-1));
		right:0;
		flex-direction: column;
		font-size: large;
		border-bottom: 1px solid var(--main-green);
		border-left: 1px solid var(--main-green);
		background-color: var(--mobile-menu-background);
		z-index:var(--z-index-menu);
		opacity: 0;
		animation: fade var(--transition-time) ease-in forwards;


}

	.menu:hover{
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
		z-index:var(--z-index-menu-hover);
	}

	.menu.show {display: flex;}

	.menu > li {
		margin-right:0;
	 	z-index:var(--z-index-menu-li);
	}
	.menu > li:hover {
		z-index: var(--z-index-menu-li-hover);

	}

	.divbox {
		display:flex;
		flex-direction:column;
		width: 100%; /* on small screens*/
		justify-content:center;
		align-items:center;

	}
	/* war vorher unsichtbar*/
	.NameIngBuero {display: flex;}

	.partnerblock{

	width:75%;
	margin-left:15%;

	}
}