/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* exo-2-100 - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/exo-2-v20-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/exo-2-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/exo-2-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/exo-2-v20-latin-100.woff') format('woff'), /* Modern Browsers */
       url('fonts/exo-2-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/exo-2-v20-latin-100.svg#Exo2') format('svg'); /* Legacy iOS */
}
/* exo-2-300 - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/exo-2-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/exo-2-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/exo-2-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/exo-2-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/exo-2-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/exo-2-v20-latin-300.svg#Exo2') format('svg'); /* Legacy iOS */
}
/* exo-2-600 - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/exo-2-v20-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/exo-2-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/exo-2-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/exo-2-v20-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/exo-2-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/exo-2-v20-latin-600.svg#Exo2') format('svg'); /* Legacy iOS */
}

* {
	word-break: break-word;
	transition: var( --transition );
}

html {
	--boxed-width: 1230px;
	--gap: 15px;
	--heading-font: "Exo 2";
	--text-font: "Roboto";
	--transition: all .3s ease-in-out;
	--font-size: 18px;
	--line-height: 1.5;
}

body {
	margin: 0;
	font-family: var( --text-font );
	font-size: var( --font-size );
	line-height: var( --line-height );
}

header {
	display: flex;
	max-width: var( --boxed-width );
	margin: 0 auto;
	padding: calc( 2 * var( --gap ) ) var( --gap );
	gap: var( --gap );
	grid-gap: var( --gap );
}

h1, h2, h3, h4, h5, h6, span.pre-heading {
	font-family: var( --heading-font );
	margin: 0 0 var( --gap );
	font-weight: 300;
}

:is( h1, h2, h3, h4, h5, h6, .pre-heading ) a {
	text-decoration: none;
	color: inherit;
}

:is( h1, h2, h3, h4, h5, h6, .pre-heading ) a:hover,
a.column-bg:hover {
	opacity: .8;
}

h1 { font-size: 1.75em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.375em; }
h4 { font-size: 1.25em; }
h5, span.pre-heading { font-size: 1.125em; }
h6 { font-weight: 600; }

p {
	margin: 0 0 2em;
	font-weight: 300;
}

p:last-child {
	margin-bottom: 0;
}

.small {
	font-size: 0.875em;
}

nav {
	width: 100%;
}

nav > ul {
	list-style: none;
	margin: 0;
	padding: var( --gap ) 0;
	display: flex;
	gap: var( --gap );
	grid-gap: var( --gap );
	justify-content: end;
}

nav a {
	font-family: var( --heading-font );
	font-weight: 600;
	font-size: 0.875em;
	text-decoration: none;
	color: inherit;
	position: relative;
	padding: var( --gap );
}

nav a:after {
	content: '';
	position: absolute;
	height: 1px;
	bottom: var( --gap );
	background: black;
	width: 50%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: var( --transition );
}

nav a:hover:after {
	content: '';
	bottom: calc( var( --gap ) - 5px );
	opacity: 1;
}

main {
	display: flex;
	flex-direction: column;
	gap: calc( 2 * var( --gap ) );
	grid-gap: calc( 2 * var( --gap ) );
	padding: calc( 2 * var( --gap ) ) 0 calc( 8 * var( --gap ) );
}

.grid-container {
	display: flex;
	justify-content: center;
}

.grid-inner {
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	width: 100%;
	max-width: var( --boxed-width );
	padding: 0 var( --gap );
	gap: calc( 4 * var( --gap ) );
	grid-gap: calc( 4 * var( --gap ) );
	box-sizing: border-box;
}

.grid-container.boxed .grid-inner {
	box-shadow: 0px 8px 12px 0px rgb(0 0 0 / 10%);
	padding: calc( 2 * var( --gap ) );
	background: #f5f5f5;
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.column.col-1  { grid-column: auto / span 1;  }
.column.col-2  { grid-column: auto / span 2;  }
.column.col-3  { grid-column: auto / span 3;  }
.column.col-4  { grid-column: auto / span 4;  }
.column.col-5  { grid-column: auto / span 5;  }
.column.col-6  { grid-column: auto / span 6;  }
.column.col-7  { grid-column: auto / span 7;  }
.column.col-8  { grid-column: auto / span 8;  }
.column.col-9  { grid-column: auto / span 9;  }
.column.col-10 { grid-column: auto / span 10; }
.column.col-11 { grid-column: auto / span 11; }
.column.col-12 { grid-column: auto / span 12; }

.column.center {
	align-items: center;
}

img {
	max-width: 100%;
	height: auto;
}

.column-bg {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
}

img:not( .column-bg ) {
	max-height: 350px;
	object-fit: contain;
}

a.button {
	background: #ebebeb;
	padding: var( --gap );
	border-radius: calc( var( --gap ) / 2 );
	text-decoration: none;
	color: #666666;
	line-height: 1.2;
	width: fit-content;
	display: inline-block;
}

a.button:hover {
	background: #c5c5c5;
}

#products {
	background: url('images/Background-Werkzeuge1.jpg');
	background-size: 100% auto;
	background-repeat-x: no-repeat;
	background-repeat-y: repeat;
	margin-bottom: calc( 3 * var( --gap ) );
	text-align: center;
	padding: calc( 4 * var( --gap ) ) 0;
}

.product {
	position: relative;
	gap: calc( 2 * var( --gap ) );
	grid-gap: calc( 2 * var( --gap ) );
	justify-content: space-between;
}

.product:nth-child( odd ):after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(0,0,0,0.08);
	right: calc( -2 * var( --gap ) );
}

.product a:hover img {
	transform: scale( 1.1 );
}

.product ul.properties {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --gap );
	grid-gap: var( --gap );
}

.product ul.properties > li:before {
	content: '';
	width: 0.25em;
	height: 0.25em;
	border-top: 2px solid;
	border-right: 2px solid;
	border-radius: 2px;
	display: inline-block;
	transform: rotate(45deg) translateY( -50% );
	top: -2px;
	margin-right: calc( 1.5 * var( --gap ) );
	position: relative;
}

.product div.images {
	display: flex;
	justify-content: center;
	gap: var( --gap );
	grid-gap: var( --gap );
	align-items: center;
}

.product div.images > a {
	width: calc( 25% - var( --gap ) * 3/4 );
}

footer {
	background: #4c4c4c;
	display: flex;
	justify-content: center;
	padding: var( --gap );
	color: #bcbcbc;
}

@media screen and ( max-width: 768px ) {
	.grid-inner {
		display: flex;
		flex-direction: column;
	}

	.product:nth-child( odd ):after {
		display: none;
	}

	nav > ul {
		flex-direction: column;
		align-items: end;
	}

	img.logo {
		max-width: 50%;
	}

	img {
		max-height: 350px;
		object-fit: contain;
	}
}