@charset "UTF-8";
/* CSS Document für werkstoff.html */

/*  --------- Corporate Design -------------   */

:root {
		
	--headline-1: 2.986em; /*47.766 pt*/
	--headline-2: 2.488em; /*39.808 pt*/
	--headline-3: 2.074em; /*33.184 pt */
	--headline-4: 1.728em; /*27.648 pt*/
	--headline-5: 1.44em; /*23.04 pt*/
	--text-size: 1.125em; /*18 pt*/
	--70-grey: #626262; /* 70 % Olschewski Grau */

	}

/*  --------- Fonts help:  https://www.youtube.com/watch?v=WNN72Er8iFE -------------   */


@font-face{
	font-family: 'Audiowide-Regular';/*regular*/
	src: url("../fonts/Audiowide-Regular.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap; /* für schnelleres anzeigen des Textes */
}

/*  --------- Headlines / Schriften -------------   */


h1{	font-family: 'Audiowide-Regular';
	font-size: var(--headline-1);
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 150%;
}
	

h2{	font-family: 'Audiowide-Regular';
	font-size: var(--headline-2);
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 140%;
}

h3{	font-family: 'Verdana', sans-serif;
	font-size: var(--headline-3);
	font-weight: 600;
	font-style: normal;
	line-height: 150%;
}

h4{	
	font-family: 'Verdana', sans-serif;
	font-size: var(--headline-4);
	font-weight: 600;
	font-style: normal;
	line-height: 150%;
}

h5{ font-family: 'Verdana', sans-serif;
	font-size: var(--headline-5);
	font-weight: 600;
	font-style: normal;
	line-height: 130%;
}


p{
	font-family: 'Verdana', sans-serif;
	font-size: var(--text-size);
	font-weight: 400;
	font-style: normal;
	line-height: 190%;
	color: var(--text-color);
}

/* --- SPAN Klassen --- */

.verdana{
	font-family: 'Verdana', sans-serif;
	letter-spacing: 1px;
	line-height: 135%;
}

.bold{
	font-weight: 600;
}

*{
	margin:0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

.content-section{
	width: 100%;
	height: content;
	background-color: var(--background-color);
}	

/* ---- erste Section ---- */

.werkstoffe1{
	position: relative;
	width: 100%;
	height: 619px;
	background-image:url("../bilder/werkstoffe-mood.avif");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	overflow: visible;
	padding-top: 412px;
}

.experience{/* Störer "40 Jahre ERfahrung" */
	position: absolute;
	top: 0;
	right: 0;
	display: none; /* Erscheint ab max-width: 670px */
}
.platzhalter1{
	width: calc(50% - 655px);
	height: 250px;
}

.werkstoffe1-content{
	position: relative;
	width: 1310px;
	height: 250px;
	display: flex;
	border: none;
}

.werkstoffe1-box1{
	width: calc(68% + 1px);
	height: 100%;
	padding: 70px 20px 0 0px;
}

.werkstoffe1-box2{
	width: 32%;
	height: 100%;
	background-color: var(--accent-color);
	border: none;
	border-radius: 38px 0 0 38px;
}

.werkstoffe1-box2-container{
	width: 100%;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 20px 0 0 50px;
}

.werkstoffe1-box2-container-text{
	width: 100%;
}

.werkstoffe1-box2-container-text p{
	line-height: 170%;
	color: var(--background-color);
	font-weight: 600;
	margin-bottom: 20px;
}

.werkstoffe1-box2 h5{
	color: var(--background-color);
}

.platzhalter2{
	width: calc(50% - 655px);
	height: 250px;
	background-color: var(--accent-color);
	border-right: 1px solid var(--accent-color);
}

/* ---- zweite Section ---- */

.werkstoffe2{
	width: 1410px;
	padding: 125px 50px 110px 50px;
	margin: auto;
}

.werkstoffe2 h2{
font-size: var(--headline-2);
color: var(--30-grey);
margin-bottom: 20px;
}

.werkstoffe2 h1{
font-size: var(--headline-1);
color: var(--30-grey);
margin-bottom: 20px;
}


.werkstoffe2 h3{
font-size: var(--headline-3);
color: var(--accent-color);
}

.werkstoffe1-box2-container-text img{
	margin-right: 20px;
	margin-bottom: 20px;
}

.werkstoffe1-box2-container-text-box1{
	display: flex;
	align-items: center;
}

.werkstoffe1-box2-container-text-box2{
	display: flex;
	align-items: center;
}

/* ---- dritte Section ---- */

.werkstoffe3{
	width: 900px;
	padding: 0 50px 100px 50px;
	margin: auto;
}

/* ---- vierte Section ---- */

.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	width: 900px;
	padding: 50px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	margin-right: 44px;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 38px 0 0;
}

.werkstoffe4-container-box2{
	margin-right: 18px;
	margin-top: -60px;
}

/* ---- fünfte Section ---- */

.werkstoffe5{
	width: 100%;
}

.werkstoffe5-container{
	width: 920px;
	margin: 120px auto 50px auto;
}

.werkstoffe5-container h4{
	padding: 0 150px 0 150px;
}

.werkstoffe5-container p{
	padding: 0 150px 0 150px;
}

.werkstoffe5-container img{
margin: 30px 50px 30px 50px;
}

/* ---- sechste Section ---- */

.werkstoffe6{
	width: 100%;
}

.werkstoffe6-container{
	width: 720px;
	margin: auto;
	padding: 50px;
}

.werkstoffe6-container-tabelle1-pair-header{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: var(--accent-color);
}
.werkstoffe6-container-tabellenheader-1{
	width: 50%;
	padding: 10px;
	text-align: center;
}

.werkstoffe6-container-tabellenheader-1 p{
	color: var(--background-color);
}
.tabellenheader2{
	border-left: 0.5px solid #ffffff;
}
.werkstoffe6-container-tabelle1{
	width: 100%;
	margin-bottom: 45px;
}

.werkstoffe6-container-tabelle1-pair{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.werkstoffe6-container-tabelle1-item1{
	width: 50%;
	padding: 6px 10px;
	border-left: 0.5px solid var(--40-grey);
	-webkit-border-left: 0.5px solid var(--40-grey);
    -moz-border-left: 0.5px solid var(--40-grey);
    -o-border-top-left: 0.5px solid var(--40-grey);
    -khtml-border-left: 0.5px solid var(--40-grey);
	border-top: 0.5px solid var(--40-grey);
	-webkit-border-top: 0.5px solid var(--40-grey);
    -moz-border-top: 0.5px solid var(--40-grey);
    -o-border-top: 0.5px solid var(--40-grey);
    -khtml-border-top: 0.5px solid var(--40-grey);
}

.werkstoffe6-container-tabelle1-item1 p{
font-size: calc(var(--text-size) - 2px);
}

.werkstoffe6-container-tabelle1-item-letzte{
	width: 50%;
	padding: 10px;
}

.werkstoffe6-container-tabelle1-item-letzte p{
font-size: calc(var(--text-size) - 2px);
}

.tabellen-bg-dunkel{
	background-color: #f4f4f4; /* 5% olschewski grau */
}

.border-item2{
	border-right: 0.5px solid var(--40-grey);
}
	
.letzte1{
	border-bottom: 0.5px solid var(--40-grey);
}

.letzte2{
	border-bottom: 0.5px solid var(--40-grey);
	border-right: 0.5px solid var(--40-grey);
}

/* ---- sieben  Section ---- */

	.werkstoffe7{
		width: 100%;
		background-color: var(--accent-color);
	}
	
	.werkstoffe7-container{
		width: 720px;
		padding: 30px 50px 30px 50px;
		margin: auto;
	}
	.werkstoffe7-container-text{
		width: 100%;
		text-align: center;
	}
	
		.werkstoffe7-container-text p{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
			margin-bottom: 5px;
	}
	.werkstoffe7-container-button{
		width: 60%;
		margin: 20px auto 0 auto;
		padding: 10px;
		text-align: center;
		background-color: var(--background-color);
		border-radius: 0 38px 0 0;
	}
	
		.werkstoffe7-container-button:hover{
		transform: scale(1.05);
	}
	
		.werkstoffe7-container-button p{
		font-size: calc(var(--text-size) - 2px);
		color: var(--accent-color);
}


@media(max-width: 1410px) {/*1410px ----- */
	
	/* ---- zweite Section ---- */

	.werkstoffe2{
		width: 100%;
		padding: 100px 50px 50px 50px;
		margin: 0;
	}

	.werkstoffe2 h2{
	font-size: var(--headline-2);
	color: var(--30-grey);
	margin-bottom: 20px; /*Abstand zwischen den beiden Headlines*/}

	.werkstoffe2 h3{
	font-size: var(--headline-3);
	color: var(--accent-color);
	}
	
	.werkstoffe1-box2-container-text img{
	width: 45px;
	}
}

@media(max-width: 81.875em) {/*1310px ------  Content = 100% breite ----- */
		:root {
		
	--headline-1: 2.688em; /*43 pt*/
	--headline-2: 2.25em; /*36 pt*/
	--headline-3: 1.875em; /*30 pt*/
	--headline-4: 1.563em; /*25pt*/
	--headline-5: 1.438em; /*23 pt*/
	--text-size: 1.125em; /*18 pt*/

	}

	/* ---- erste Section ---- */

.werkstoffe1{
	position: relative;
	width: 100%;
	height: 619px;
	background-image:url("../bilder/werkstoffe-mood.avif");
	background-repeat: no-repeat;
	display: flex;
	overflow: visible;
	padding-top: 412px;
}
	.platzhalter1{
		display: none;
	}
	
	.platzhalter2{
		display: none;
	}
	
.werkstoffe1-content{
	position: relative;
	width: 100%;
	height: 250px;
	display: flex;
	border: none;
}

.werkstoffe1-box1{
display: none;}

.werkstoffe1-box2{
	position: absolute;
	right: 0;
	width: 418.88px;
	height: 100%;
	background-color: var(--accent-color);
	border: none;
	border-radius: 38px 0 0 38px;
}

.werkstoffe1-box2-container{
	width: 100%;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 20px 0 0 30px;
}

.werkstoffe1-box2-container-text{
	width: 100%;
}

.werkstoffe1-box2-container-text p{
	line-height: 170%;
	color: var(--background-color);
	font-weight: 600;
	margin-bottom: 20px;
}

.werkstoffe1-box2 h5{
	color: var(--background-color);
}
}

@media(max-width: 71.563em) {/*1145px */

	/* ---- zweite Section ---- */

	.werkstoffe2{
		width: 100%;
		padding: 100px 50px 50px 50px;
		margin: 0;
	}

	.werkstoffe2 h2{
	font-size: var(--headline-2);
	color: var(--30-grey);
	margin-bottom: 20px; /*Abstand zwischen den beiden Headlines*/}

	.werkstoffe2 h3{
	font-size: var(--headline-3);
	color: var(--accent-color);
	}
	}

@media(max-width: 65.5em) {/*bis 1048px ------  Start Hamburger Menü ----- */

	:root {
		
	--headline-1: 2.5em; /*40 pt*/
	--headline-2: 2.09em; /*33,445 pt*/
	--headline-3: 1.645em; /*26,324 pt */
	--headline-4: 1.438em; /*23pt*/
	--headline-5: 1.253em; /*20.04 pt*/
	--text-size: 1.125em; /*18 px*/

	}

	/* ---- erste Section ---- */
	
	.werkstoffe1{
	width: 100%;
	height: 550px;
	background-repeat: no-repeat;
	padding-top: 325px;
}
	
	/* ---- zweite Section ---- */

	.werkstoffe2{
		width: 100%;
		padding: 60px 50px 60px 50px;
		margin: 0;
	}

	.werkstoffe2 h2{
	font-size: var(--headline-2);
	color: var(--30-grey);
	margin-bottom: 20px; /*Abstand zwischen den beiden Headlines*/}

	.werkstoffe2 h3{
	font-size: var(--headline-3);
	color: var(--accent-color);
	}
	
	/* ---- dritte Section ---- */

.werkstoffe3{
	padding: 0 50px 50px 50px;
	}
}

@media screen and (max-width: 920px) {/*bis 920px */

	/* ---- fünfte Section ---- */

.werkstoffe5{
	width: 100%;
	margin: 100px auto 50px auto;
}

.werkstoffe5-container{
	width: 100%;
	margin: auto;
}

.werkstoffe5-container h4{
	padding: 0 150px 0 150px;
}

.werkstoffe5-container p{
	padding: 0 150px 0 150px;
}

.werkstoffe5-container img{
	width: 180px;
margin: 25px 100px 25px 100px;
}
}

@media screen and (max-width: 900px) {/*bis 900px */
	
/* ---- dritte Section ---- */

.werkstoffe3{
	width: 100%;
	padding: 0 50px 50px 50px;
	margin: auto;
	}
	
		/* ---- vierte Section ---- */

.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	width: 100%;
	padding: 50px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 28.25%;
	margin-right: 5.5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 100%;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 38px 0 0;
}

.werkstoffe4-container-box2{
	margin-right: 2.25%;
	margin-top: -60px;
}
	.werkstoffe4-container-box3{
	width: 500px;
	}
}


@media screen and (max-width: 820px) {/*bis 820px */

	/* ---- sieben  Section ---- */

	.werkstoffe7{
		width: 100%;
		background-color: var(--accent-color);
	}
	
	.werkstoffe7-container{
		width: 100%;
		padding: 30px 50px 30px 50px;
		margin: auto;
	}
	.werkstoffe7-container-text{
		width: 100%;
		text-align: center;
	}
	
		.werkstoffe7-container-text p{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
			margin-bottom: 5px;
	}
	.werkstoffe7-container-button{
		width: 320px;
		margin: 20px auto 0 auto;
		padding: 10px;
		text-align: center;
		background-color: var(--background-color);
		border-radius: 0 38px 0 0;
	}
	
		.werkstoffe7-container-button:hover{
		transform: scale(1.05);
	}
	
		.werkstoffe7-container-button p{
		font-size: calc(var(--text-size) - 2px);
		color: var(--accent-color);
}
}


@media screen and (max-width: 48.625em) {/*bis 778px */
	
	:root {
		
	--headline-1: 2.163em; /*34,6 pt*/
	--headline-2: 1.861em; /*29,78 pt*/
	--headline-3: 1.524em; /*24,39 pt */
	--headline-4: 1.323em; /*21,16 pt*/
	--headline-5: 1.177em; /*18,83 pt*/
	--text-size: 1em; /*18 px*/
	}
	
		/* ---- erste Section ---- */

	.werkstoffe1{
	width: 100%;
	height: 550px;
	background-repeat: no-repeat;
	padding-top: 380px;
}
	
.werkstoffe1-content{
	position: relative;
	width: 100%;
	height: 200px;
	display: flex;
	border: none;
}

.werkstoffe1-box1{
display: none;}

.werkstoffe1-box2{
	position: absolute;
	right: 0;
	width: 380px;
	height: 100%;
	background-color: var(--accent-color);
	border: none;
	border-radius: 38px 0 0 38px;
}

.werkstoffe1-box2-container{
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 15px 0 0 20px;
}

.werkstoffe1-box2-container-text{
	width: 100%;
}

.werkstoffe1-box2-container-text p{
	line-height: 170%;
	color: var(--background-color);
	font-weight: 600;
	margin-bottom: 20px;
}

.werkstoffe1-box2 h5{
	color: var(--background-color);
}
	.werkstoffe1-box2-container-text img{
width: 40px;
	margin-right: 15px; 
	}
	
/* ---- vierte Section ---- */

.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	width: 100%;
	padding: 50px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 28.25%;
	margin-right: 5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 100%;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 38px 0 0;
}

.werkstoffe4-container-box2{
	width: 50px;
	height: auto;
	margin-right: 2%;
	margin-top: -60px;
}
	
	.werkstoffe4-container-box2 img{
		width: 100%;
	}

	.werkstoffe4-container-box3{
	width: 500px;
}
	
	/* ---- fünfte Section ---- */

.werkstoffe5{
	width: 100%;
	margin: 70px 0 30px 0;
}

.werkstoffe5-container{
	width: 100%;
	margin: auto;
}

.werkstoffe5-container h4{
	padding: 0 50px 0 50px;
}

.werkstoffe5-container p{
	padding: 0 50px 0 50px;
}

.werkstoffe5-container img{
	width: 180px;
margin: 15px 0 15px 25px;
}
	
	/* ---- sieben  Section ---- */

	.werkstoffe7{
		width: 100%;
		background-color: var(--accent-color);
	}
	
	.werkstoffe7-container{
		width: 100%;
		padding: 30px 50px 30px 50px;
		margin: auto;
	}
	.werkstoffe7-container-text{
		width: 100%;
		text-align: center;
	}
	
		.werkstoffe7-container-text p{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
			margin-bottom: 5px;
	}
	.werkstoffe7-container-button{
		width: 280px;
		margin: 20px auto 0 auto;
		padding: 10px;
		text-align: center;
		background-color: var(--background-color);
		border-radius: 0 38px 0 0;
	}
	
		.werkstoffe7-container-button:hover{
		transform: scale(1.05);
	}
	
		.werkstoffe7-container-button p{
		font-size: calc(var(--text-size) - 2px);
		color: var(--accent-color);
}
	}

@media screen and (max-width: 720px) {/*bis 720px */

/* ---- sechste Section ---- */

.werkstoffe6{
	width: 100%;
}

.werkstoffe6-container{
	width: 100%;
	margin: auto;
	padding: 50px;

	}

}

@media screen and (max-width: 42.938em) {/*bis 687px */
	
		:root {
		
	--headline-1: 1.831em; /*29,3 pt*/
	--headline-2: 1.634em; /*26,14 pt*/
	--headline-3: 1.403em; /*22,44 pt */
	--headline-4: 1.27em; /*20,32 pt*/
	--headline-5: 1.125em; /*18 pt*/
	}
}

@media screen and (max-width: 41.875em) {/*bis 670px */

	:root {
		
	--text-size: 1em; /*16 px*/
	}
	/* ---- SPAN ---- */
	.bigger{
	font-size: 25px;
}
	
		/* ---- erste Section ---- */
	
	.werkstoffe1{
	width: 100%;
	height: 420px;
	background-repeat: no-repeat;
	padding-top: 250px;
}
	.werkstoffe1-box2{
	position: absolute;
	right: 0;
	width: 350px;
	height: 100%;
	background-color: var(--accent-color);
	border: none;
	border-radius: 38px 0 0 38px;
}

.werkstoffe1-box2-container{
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 15px 0 0 20px;
}

.werkstoffe1-box2-container-text{
	width: 100%;
}

.werkstoffe1-box2-container-text p{
	line-height: 170%;
	color: var(--background-color);
	font-weight: 600;
	margin-bottom: 20px;
}

.werkstoffe1-box2 h5{
	color: var(--background-color);
}
		.werkstoffe1-box2-container-text img{
	width: 36px;
	margin-right: 15px; }

	.experience{/* Störer "40 Jahre ERfahrung" */
	position: absolute;
	top: 20px;
	right: 30px;
	display: block; /* Erscheint ab max-width: 670px */
}
	/* ---- zweite Section ---- */

	.werkstoffe2{
	width: 100%;
	padding: 50px 30px 50px 30px;
	margin: 0;
	}

	.werkstoffe2 h2{
	font-size: var(--headline-2);
	color: var(--30-grey);
	margin-bottom: 20px; /*Abstand zwischen den beiden Headlines*/}

	.werkstoffe2 h3{
	font-size: var(--headline-3);
	color: var(--accent-color);}
	
/* ---- dritte Section ---- */

.werkstoffe3{
	width: 100%;
	padding: 0 30px 30px 30px;
	margin: auto;
	}
	
	/* ---- vierte Section ---- */

	.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	width: 100%;
	padding: 30px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 28.25%;
	margin-right: 3%;
}
	
	.werkstoffe4-container-box1 img{
	width: 100%;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 25px 0 0;
}

.werkstoffe4-container-box2{
	width: 50px;
	height: auto;
	margin-right: 2%;
	margin-top: -60px;
}
	
	.werkstoffe4-container-box2 img{
		width: 100%;
	}

	.werkstoffe4-container-box3{
	width: 450px;
	}
	
	/* ---- fünfte Section ---- */

.werkstoffe5{
	width: 100%;
	margin: 70px auto 30px auto;
}

.werkstoffe5-container{
	width: 100%;
	margin: auto;
}

.werkstoffe5-container h4{
	padding: 0 30px 0 30px;
}

.werkstoffe5-container p{
	padding: 0 30px 0 30px;
}

.werkstoffe5-container img{
width: 120px;
margin: 15px 30px 15px 30px;
}
	
	/* ---- sechste Section ---- */

.werkstoffe6{
	width: 100%;
}

.werkstoffe6-container{
	width: 100%;
	margin: auto;
	padding: 30px;

	}

.werkstoffe6-container-tabelle1-pair-header{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: var(--accent-color);
}
.werkstoffe6-container-tabellenheader-1{
	width: 50%;
	padding: 7px;
	text-align: center;
}

.werkstoffe6-container-tabellenheader-1 p{
	color: var(--background-color);
}
.tabellenheader2{
	border-left: 0.5px solid #ffffff;
}
.werkstoffe6-container-tabelle1{
	width: 100%;
	margin-bottom: 35px;
}

.werkstoffe6-container-tabelle1-pair{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.werkstoffe6-container-tabelle1-item1{
	width: 50%;
	padding: 5px 7px 10px 5px;
	border-left: 0.5px solid var(--40-grey);
	border-top: 0.5px solid var(--40-grey);
}

.werkstoffe6-container-tabelle1-item1 p{
font-size: calc(var(--text-size) - 2px);
}

.werkstoffe6-container-tabelle1-item-letzte{
	width: 50%;
	padding: 7px;
}

.werkstoffe6-container-tabelle1-item-letzte p{
font-size: calc(var(--text-size) - 2px);
}

.tabellen-bg-dunkel{
	background-color: #f4f4f4; /* 5% olschewski grau */
}

.border-item2{
	border-right: 0.5px solid var(--40-grey);
}
	
.letzte1{
	border-bottom: 0.5px solid var(--40-grey);
}

.letzte2{
	border-bottom: 0.5px solid var(--40-grey);
	border-right: 0.5px solid var(--40-grey);
}
	
		/* ---- sieben  Section ---- */

	.werkstoffe7{
		width: 100%;
		background-color: var(--accent-color);
	}
	
	.werkstoffe7-container{
		width: 100%;
		padding: 30px 30px 30px 30px;
		margin: auto;
	}
	.werkstoffe7-container-text{
		width: 100%;
		text-align: center;
	}
	
		.werkstoffe7-container-text p{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
		color: var(--background-color);
			margin-bottom: 5px;
	}

	.werkstoffe7-container-button{
		width: 280px;
		margin: 20px auto 0 auto;
		padding: 10px;
		text-align: center;
		background-color: var(--background-color);
		border-radius: 0 25px 0 0;
	}
	
		.werkstoffe7-container-button:hover{
		transform: scale(1.05);
	}
	
		.werkstoffe7-container-button p{
		font-size: calc(var(--text-size) - 2px);
		color: var(--accent-color);
}
}

@media screen and (max-width: 609px) {/*bis 609px */
	
/* ---- vierte Section ---- */

.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	width: 100%;
	padding: 30px 30px 30px 0;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 122px;
	height: auto;
	margin-right: 5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 122px;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 38px 0 0;
}

.werkstoffe4-container-box2{
	width: 38px;
	height: auto;
	margin-right: 2%;
	margin-top: 0;
}
	
	.werkstoffe4-container-box2 img{
	width: 38px;
	}

	.werkstoffe4-container-box3{
	width: 500px;
}
}

@media screen and (max-width: 511px) {/*bis 511px */
	
/* ---- vierte Section ---- */
	
	.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	position: relative;
	width: 100%;
	padding: 30px 30px 30px 0;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 122px;
	height: auto;
	margin-right: 5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 122px;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 38px 0 0;
}

.werkstoffe4-container-box2{
	position: absolute;
	top: 20px;
	left: 145px;
	width: 38px;
	height: auto;
	margin-right: 0;
	margin-top: 0;
}
	
	.werkstoffe4-container-box2 img{
	width: 38px;
	}

	.werkstoffe4-container-box3{
	padding-top: 50px;
	width: 500px;
}

	.werkstoffe4-br{
		display: none;
	}
	
		/* ---- fünfte Section ---- */

.werkstoffe5{
	width: 100%;
	margin: 50px auto 30px auto;
}

.werkstoffe5-container{
	width: 100%;
	margin: auto;
}

.werkstoffe5-container h4{
	padding: 0 30px 0 30px;
}

.werkstoffe5-container p{
	padding: 0 30px 0 30px;
}

.werkstoffe5-container img{
width: 120px;
margin: 15px 30px 15px 30px;
}

	}

@media screen and (max-width: 460px) {/*bis 460px */
	
/* ---- vierte Section ---- */
	
	.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	position: relative;
	width: 100%;
	padding: 30px 20px 30px 0;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 122px;
	height: auto;
	margin-right: 5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 122px;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 38px 0 0;
}

.werkstoffe4-container-box2{
	position: absolute;
	top: 20px;
	left: 145px;
	width: 38px;
	height: auto;
	margin-right: 0;
	margin-top: 0;
}
	
	.werkstoffe4-container-box2 img{
	width: 38px;
	}

	.werkstoffe4-container-box3{
	padding-top: 50px;
	width: 500px;
}

	
	.werkstoffe4-br{
		display: none;
	}
	}

@media screen and (max-width: 451px) {/*bis 451px */	

	/* ---- vierte Section ---- */
	
	.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	position: relative;
	width: 100%;
	padding: 30px 20px 30px 0;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 122px;
	height: auto;
	margin-right: 5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 122px;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 25px 0 0;
}

.werkstoffe4-container-box2{
	position: absolute;
	top: 20px;
	left: 145px;
	width: 38px;
	height: auto;
	margin-right: 0;
	margin-top: 0;
}
	
	.werkstoffe4-container-box2 img{
	width: 38px;
	}

	.werkstoffe4-container-box3{
	padding-top: 50px;
	width: 500px;
}
	
	.werkstoffe4-container-box3 h4{
	font-size: 16px;
}
	
	.werkstoffe4-br{
		display: none;
	}
}

@media screen and (max-width: 26.25em) {/*bis 420px */	

	:root {
		
	--text-size: 0.875em; /*14 px*/

	}
	
	/* ---- erste Section ---- */
	.werkstoffe1{
	width: 100%;
	height: 355px;
	background-repeat: no-repeat;
	padding-top: 220px;
	}
	
	.werkstoffe1-box2{
	position: absolute;
	right: 0;
	width: 290px;
	height: 170px;
	background-color: var(--accent-color);
	border: none;
	border-radius: 25px 0 0 25px;
}

.werkstoffe1-box2-container{
	width: 100%;
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 15px 0 0 18px;
}
	/* ---- zweite Section ---- */

.werkstoffe2{
	width: 100%;
	padding: 70px 20px 20px 20px;
	margin: 0;
}
	
.werkstoffe2 h2{
font-size: var(--headline-2);
color: var(--30-grey);
margin-bottom: 10px; /*Abstand zwischen den beiden Headlines*/}

.werkstoffe2 h3{
font-size: var(--headline-3);
color: var(--accent-color);
	}
	
.werkstoffe1-box2-container-text img{
width: 30px;
margin-right: 10px; }
	
/* ---- dritte Section ---- */

.werkstoffe3{
	width: 100%;
	padding: 0 20px 30px 20px;
	margin: auto;
	}
	
	/* ---- vierte Section ---- */
	
	.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	position: relative;
	width: 100%;
	padding: 30px 20px 30px 0;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 100px;
	height: auto;
	margin-right: 5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 100px;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 15px 0 0;
}

.werkstoffe4-container-box2{
	position: absolute;
	top: 20px;
	left: 123px;
	width: 38px;
	height: auto;
	margin-right: 0;
	margin-top: 0;
}
	
	.werkstoffe4-container-box2 img{
	width: 38px;
	}

	.werkstoffe4-container-box3{
	padding-top: 50px;
	width: 500px;
}
	
	.werkstoffe4-container-box3 h4{
	font-size: 16px;
}
	
	.werkstoffe4-br{
		display: none;
	}
	
			/* ---- fünfte Section ---- */

.werkstoffe5{
	width: 100%;
	margin: 30px auto 20px auto;
}

.werkstoffe5-container{
	width: 100%;
	margin: auto;
}

.werkstoffe5-container h4{
	padding: 0 20px 0 20px;
}

.werkstoffe5-container p{
	padding: 0 20px 0 20px;
}

.werkstoffe5-container img{
width: 100px;
margin: 10px 10px 10px 10px;
}
	
	/* ---- sechste Section ---- */

.werkstoffe6{
	width: 100%;
}

.werkstoffe6-container{
	width: 100%;
	margin: auto;
	padding: 20px;

	}

.werkstoffe6-container-tabelle1-pair-header{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: var(--accent-color);
}
	
.werkstoffe6-container-tabellenheader-1{
	width: 50%;
	padding: 2px 5px 2px 5px;
	text-align: center;
}

.werkstoffe6-container-tabellenheader-1 p{
	color: var(--background-color);
}
.tabellenheader2{
	border-left: 0.5px solid #ffffff;
}
.werkstoffe6-container-tabelle1{
	width: 100%;
	margin-bottom: 20px;
}

.werkstoffe6-container-tabelle1-pair{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.werkstoffe6-container-tabelle1-item1{
	width: 50%;
	padding: 2px 5px 2px 5px;
	border-left: 0.5px solid var(--40-grey);
	border-top: 0.5px solid var(--40-grey);
}

.werkstoffe6-container-tabelle1-item1 p{
font-size: calc(var(--text-size) - 2px);
}

.werkstoffe6-container-tabelle1-item-letzte{
	width: 50%;
	padding: 2px 5px 2px 5px;
}

.werkstoffe6-container-tabelle1-item-letzte p{
font-size: calc(var(--text-size) - 2px);
}

.tabellen-bg-dunkel{
	background-color: #f4f4f4; /* 5% olschewski grau */
}

.border-item2{
	border-right: 0.5px solid var(--40-grey);
}
	
.letzte1{
	border-bottom: 0.5px solid var(--40-grey);
}

.letzte2{
	border-bottom: 0.5px solid var(--40-grey);
	border-right: 0.5px solid var(--40-grey);
}
		/* ---- sieben  Section ---- */

	.werkstoffe7{
		width: 100%;
		background-color: var(--accent-color);
	}
	
	.werkstoffe7-container{
		width: 100%;
		padding: 20px;
		margin: auto;
	}
	.werkstoffe7-container-text{
		width: 100%;
		text-align: center;
	}
	
		.werkstoffe7-container-text p{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
		color: var(--background-color);
			margin-bottom: 5px;
	}

	.werkstoffe7-container-button{
		width: 250px;
		margin: 20px auto 0 auto;
		padding: 10px;
		text-align: center;
		background-color: var(--background-color);
		border-radius: 0 15px 0 0;
	}
	
		.werkstoffe7-container-button:hover{
		transform: scale(1.05);
	}
	
		.werkstoffe7-container-button p{
		font-size: calc(var(--text-size) - 2px);
		color: var(--accent-color);
}
}


@media screen and (max-width: 21.875em) {/*bis 350px */	
	
	:root {
		
	--headline-1: 1.125em; /*18 pt*/
	--headline-2: 1em; /*16 pt*/
	--headline-3: 0.938em; /*15 pt */
	--headline-4: 0.875; /*14 pt*/
	--headline-5: 0.813em; /*13 pt*/
	--text-size: 0.75em; /*12 px*/

	}
	/* ---- SPAN ---- */
	.bigger{
	font-size: 20px;
}

		/* ---- erste Section ---- */

	.werkstoffe1{
	width: 100%;
	height: 355px;
	background-repeat: no-repeat;
	padding-top: 210px;
	}
	
	.werkstoffe1-box2{
	position: absolute;
	right: 0;
	width: 260px;
	height: 155px;
	background-color: var(--accent-color);
	border: none;
	border-radius: 25px 0 0 25px;
}

.werkstoffe1-box2-container{
	width: 100%;
	height: 155px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 15px 0 0 15px;
}

	.experience{/* Störer "40 Jahre Erfahrung" */
	position: absolute;
	right: 10px;
	top: 10px;
	display: block; /* Erscheint ab max-width: 670px */
}
	.experience img{
		width: 70px;
		height: auto;
}
	/* ---- vierte Section ---- */
	
	.werkstoffe4{
	width: 100%;
	background-color: var(--10-grey);
}

.werkstoffe4-container{
	position: relative;
	width: 100%;
	padding: 30px 20px 30px 0;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-evenly;
}

.werkstoffe4-container-box1{
	width: 80px;
	height: auto;
	margin-right: 5%;
}
	
	.werkstoffe4-container-box1 img{
	width: 80px;
	height: auto;
}

.werkstoffe4-container-box1 img{
	border-radius: 0 38px 0 0;
}

.werkstoffe4-container-box2{
	position: absolute;
	top: 20px;
	left: 96px;
	width: 38px;
	height: auto;
	margin-right: 0;
	margin-top: 0;
}
	
	.werkstoffe4-container-box2 img{
	width: 34px;
	}

	.werkstoffe4-container-box3{
	padding-top: 50px;
	width: 500px;
}
	
	.werkstoffe4-container-box3 h4{
	font-size: 12px;
}
	.werkstoffe4-container-box3 p{
	font-size: 10px;
}
	
	.werkstoffe4-br{
		display: none;
	}
		/* ---- sieben  Section ---- */

	.werkstoffe7{
		width: 100%;
		background-color: var(--accent-color);
	}
	
	.werkstoffe7-container{
		width: 100%;
		padding: 20px;
		margin: auto;
	}
	.werkstoffe7-container-text{
		width: 100%;
		text-align: center;
	}
	
		.werkstoffe7-container-text p{
		color: var(--background-color);
	}

		.werkstoffe7-container-text h4{
		color: var(--background-color);
			margin-bottom: 5px;
	}

	.werkstoffe7-container-button{
		width: 200px;
		margin: 10px auto 0 auto;
		padding: 10px;
		text-align: center;
		background-color: var(--background-color);
		border-radius: 0 15px 0 0;
	}
	
		.werkstoffe7-container-button:hover{
		transform: scale(1.05);
	}
	
		.werkstoffe7-container-button p{
		font-size: calc(var(--text-size) - 2px);
		color: var(--accent-color);
}
}
@media screen and (max-width: 293px) {/*bis 293px */	
		
	/* ---- sechste Section ---- */
	
.werkstoffe6-container-tabellenheader-1{
	width: 50%;
	padding: 0 5px 0 5px;
	text-align: center;
}

.werkstoffe6-container-tabelle1-pair{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
	
.werkstoffe6-container-tabelle1-item1{
	width: 50%;
	padding: 2px;
	border-left: 0.5px solid var(--40-grey);
	border-top: 0.5px solid var(--40-grey);
}

.werkstoffe6-container-tabelle1-item1 p{
font-size: calc(var(--text-size) - 2px);
letter-spacing: -0.03em; /* wichtig!! */
}

.werkstoffe6-container-tabelle1-item-letzte{
	width: 50%;
	padding: 2px;
}
	}