/* Aufbau der Homepage, Layout der divs usw. */

@font-face { /* Fließtext */
	font-family: 'WorkSans-Regular';
	src: url('../fonts/work_sans/WorkSans-Regular.ttf') format('truetype');
}
@font-face { /* Fließtext- .wichtig */
	font-family: 'WorkSans-Medium';
	src: url('../fonts/work_sans/WorkSans-Medium.ttf') format('truetype');
}
@font-face { /* Fließtext-em */
	font-family: 'WorkSans-SemiBold';
	src: url('../fonts/work_sans/WorkSans-SemiBold.ttf') format('truetype');
}
@font-face { /* strong */
	font-family: 'WorkSans-Bold';
	src: url('../fonts/work_sans/WorkSans-Bold.ttf') format('truetype');
}

@font-face { /* Überschriften */
	font-family: 'Strait';
	src: url('../fonts/Strait-Regular.ttf') format('truetype');
}
/*@font-face { /* Logoschrift (Datei hat 3,7 MByte! Unmöglich, sinnlos)
	font-family: 'STHupo';
	src: url('../fonts/STHupo.ttf') format('truetype');
}*/

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url(../fonts/icons/MaterialIcons-Regular.woff2) format('woff2'),
		url(../fonts/icons/MaterialIcons-Regular.woff) format('woff'),
		url(../fonts/icons/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  /* font-size: 24px;  Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

:root{
	/* alle Farbvariablen beginnen mit f, Schriften mit s */
	--sMenue: "Strait";
	--sText: "WorkSans-Regular";
	--fMenuCo: hsl(160,70%,25%);
	--fMenuBg: hsl(51,90%,80%); /* gelb */
	--fGrauBg: #eaeaea;
	--fSonder: hsl(9,100%,50%);
	--inhaltPadg: 10px;

}

body{
	margin: 0;
	color: #555; background-color: #444;
	font-family: var(--sText), serif;
	font-size: 12pt;
}

div#inhalt{ /* Behälter der Seite (hauptdiv) */
	margin-top: 0; padding:0 0 1px 0; background-color: #fff;
}

/* Mobil */
	span#mailAdr::after {content:"robiholz.de";}
@media screen and (max-width:350px){
	span#mailAdr::after {content:"...";} /* Adresse kürzen */
}
@media screen and (max-width:380px){
	span#mailAdr::after {content:"@robi...";} /* Adresse kürzen */
}

@media screen and (max-width:739px){
	div#descMenue {
		margin:2.4em 0 -43px 0;padding:0;
		background-color: var(--fGrauBg);
	}
	div#descMenue > p {
		margin:0 var(--inhaltPadg) 0 var(--inhaltPadg);
		padding-top:10px;
		/*border:1px solid;*/
	}

	div#inhalt{ /*width: 100%;*/ }

	nav#mobilmenu{
		z-index: 9;
		position:fixed; top: 0; left:0;
		width: 96%; height: 2.3em;
		padding: 5px 2% 0 2%;
		background-color: var(--fMenuBg);
	}
	nav#mobilmenu table {border-collapse: collapse;}

	td > i.material-icons {font-size: 28px} 
	div#logo { /* Logo */
		margin-top:2.3em; padding:1px var(--inhaltPadg) 1px var(--inhaltPadg);
	}
	img#loogo {width: 45%; margin-top:1em;}

	nav#pc {
		/* siehe menue.css */
	}

	div.produkt{
		float: left;
		background-color: var(--fGrauBg);
		border:3px solid #fff;
		width: calc(50% - 6px);
	}
	footer p a {margin-left: 0.3em}
	/*div.produkt > img {margin-left:-1px;}*/
}

/* Dektop klein */
@media screen and (min-width:740px) and (max-width:1239px){
	div#inhalt{
		position: relative; max-width: 740px; margin-left:-370px; left:50%;
	}
	img#loogo {width: 45%; margin-top:0;}

	div.produkt{
		float: left;
		background-color: var(--fGrauBg);
		border:3px solid #fff;
		width: calc(33.3% - 6px);
	}
	ul#menu li ul li {border-right: 1px solid; border-left: 1px solid; border-bottom: 1px solid;}
}

/* Dektop groß */
@media screen and (min-width:1240px){
	div#inhalt{
		position: relative; max-width: 1060px; margin-left:-530px; left:50%;
	}
	div.produkt{
		float: left;
		background-color: var(--fGrauBg);
		border:3px solid #fff;
		width: calc(25% - 6px);
	}
	article div.text2sp {
		column-count: 2;
		padding: 0 var(--inhaltPadg) 0 var(--inhaltPadg);
		text-align: justify;
	}
	ul#menu li ul li {border-right: 1px solid; border-left: 1px solid; border-bottom: 1px solid;}
}

/* Dektop klein und groß */
@media screen and (min-width:740px){ 

	div#descMenue{ /* ganz oben für Speziallinks */
		margin-top:0; padding:1px 0 1px 0;
		background-color: var(--fGrauBg);		
	}
	div#descMenue > p {margin:6px var(--inhaltPadg) -16px var(--inhaltPadg);}

	nav#mobilmenu{display:none;}
	div#logo { /* Logo */
		margin-top:0; padding:7px var(--inhaltPadg) 1px var(--inhaltPadg);
	}
	img#loogo {width:40%; margin-top:0;}

	nav#pc {
		width: 100%;
		margin-top: -20px;
		background-color: var(--fMenuBg);
		position: -webkit-sticky;
		position: sticky; top:-18px;
		z-index:500;
	}
	div#hfsKontakt{display:none;}

	nav#pc ul#menu {
		float: left;
		overflow: hidden;
		padding:0;
		background: var(--fMenuBg);
		list-style: none;
		width:100%;
		padding-top:12px;
	}
	ul#menu li {
		font-size: 1.2em; margin:0; padding: 0 8px 8px 10px;
	}
	nav#pc > ul#menu > li {float: left;}

	nav#pc > ul#menu > li > ul {
		display: none;
		list-style: none;
		margin-left:-50px;
		width: 8em;
	}
	nav#pc > ul#menu > li:hover > ul {
		display: block;
		position: absolute;
		margin-top:0; padding-top: 15px;
	}

	nav#pc > ul#menu > li > ul > li {
		position: relative;
		margin:-5px 0 0 0; padding:10px 2px 5px 8px;
		color: var(--fMenuCo); background: var(--fMenuBg);
		font-size: 1em;
	}

	nav#pc > ul#menu > li > ul > li > ul {
		display: none;
		list-style: none;
		background: var(--fMenuBg);
	}

	nav#pc > ul#menu > li > ul > li:hover > ul {
		display: block;
		position: absolute;
		left: 153px; top: 10px;
		width: 7em;
	}

	nav#pc ul#menu > li > ul > li > ul > li {
		margin-left:-2.1em; padding:0 10px 0 10px;
		color: var(--fMenuCo); background: var(--fMenuBg);
		font-size: 0.9em;
	}


	footer p a {margin-left: 1em}
	footer .material-icons {position: relative;top:3px;}
}





div#logo { /* Logo */
	background-color: var(--fGrauBg);
}
/* Logo im Text */
	.STHupo {font-family: WorkSans-Bold; letter-spacing: 0.4pt;}
	.robiholz span.t {vertical-align: -0.08em}

div#titelBild {
	margin-top:0; padding:1px 0 0 0; background-color: var(--fGrauBg);
}

ul#menu {font-family: var(--sMenue);}
ul#menu li a, footer a {color:hsl(160,70%,25%);}
ul#menu li a:hover, footer a:hover {color:hsl(30,100%,60%);}

ul#menu li#eMailBestell, ul#menu li a#eMailBestell {color:var(--fSonder)}
ul#menu li#eMailBestell:hover {color:var(--fMenuCo)}
ul#menu li a#eMailBestell:hover {color:hsl(30,100%,50%);}






div#infobox, div#PreisInfo, div#H2Info {
	z-index:600;
	position: absolute;
	display:none;
	min-width:300px;
	max-width:400px;
	padding:5px;
	border:1px solid hsl(55,100%,40%);
	color:hsl(55,10%,40%);
	background-color: hsl(55,100%,95%);
}
div#infobox div, div#PreisInfo div {padding:0 6px 10px 6px;}


h1, h2, h3 {
	padding: 0 var(--inhaltPadg) 0 var(--inhaltPadg);
	font-family: var(--sMenue), sans-serif;
	color:#000;
}
h1{ /* Seiten-Thema */
	font-weight: normal;
	margin-top:1.7em; font-size: 1.8em;
}
h2{ /* Seiten-Thema */
	font-weight: normal;
	margin-top:3em; font-size: 1.4em;
}
h3{
	font-weight: normal;
	margin-top:1.5em; font-size: 1.1em;
}


article > p, article div.text2sp {
	padding: 0 var(--inhaltPadg) 0 var(--inhaltPadg);
}
article div.text2sp p:first-child {margin-top:0;}






footer{
	font-family: var(--sMenue); font-size:1.2em;
	padding:1px var(--inhaltPadg) 1px var(--inhaltPadg);
	background-color: var(--fMenuBg);
	position: -webkit-sticky;
	position: sticky;
	bottom:0;
}


div#fuss {
	padding:1px var(--inhaltPadg) 1px var(--inhaltPadg);
	background-color: var(--fGrauBg);
	margin-top:0;
	/*min-height: 12em*/
}

.wichtig{font-family: "WorkSans-Medium";}
em {font-family: "WorkSans-SemiBold"; color:#333;}
em,strong {font-style: normal;letter-spacing:1.2px}
strong {font-family: "WorkSans-Bold"; color:#000;font-size:1.03em;}

a {text-decoration: none; color:hsl(30,100%,50%); cursor:pointer;}

a:hover{color:hsl(82,100%,35%);} /*  */


div#fuss p a {text-decoration: none; color:hsl(82,100%,35%); cursor:pointer;}
div#fuss p a:hover{color:hsl(30,100%,50%);} /*  */

s {
	-webkit-text-decoration-color:var(--fSonder);
	text-decoration-color:var(--fSonder);
}


@media screen{
	.nurPrint {display: none}
}
@page {
	margin-top: 1.5cm;
	margin-left: 2.7cm;
	margin-right: 2.3cm;
	margin-bottom: 1.5cm;
}
@media print {
	.nurScreen {display: none}
	body{font-size: 10pt; color:#000; background-color: #fff;}
	nav#mobilmenu,
	div#hfsKontakt {display:none;}
	nav#pc {display:none;}
	div#logo {background-color: #fff;}
	img#loogo {width: 5cm}
	h1{margin-top:0.5em;}
	div#titelBild,
	footer, div#fuss {display:none;}

}