@font-face {
	font-family: "Roboto"; font-weight: 400;
	src: local("Roboto"),
	url("fonts/roboto-v29-latin-ext_latin-regular.woff2") format("woff2"),
	url("fonts/roboto-v29-latin-ext_latin-regular.woff") format("woff");
}
@font-face {
	font-family: "Roboto"; font-weight: 300;
	src: local("Roboto Light"),
	url("fonts/roboto-v29-latin-ext_latin-300.woff2") format("woff2"),
	url("fonts/roboto-v29-latin-ext_latin-300.woff") format("woff");
}
@font-face {
	font-family: "Roboto"; font-weight: 500;
	src local("Roboto Medium"),:
	url("fonts/roboto-v29-latin-ext_latin-500.woff2") format("woff2"),
	url("fonts/roboto-v29-latin-ext_latin-500.woff") format("woff");
}
@font-face {
	font-family: "Roboto"; font-weight: 700;
	src: local("Roboto Bold"),
	url("fonts/roboto-v29-latin-ext_latin-700.woff2") format("woff2"),
	url("fonts/roboto-v29-latin-ext_latin-700.woff") format("woff");
}

:root {
	--bg: white;
	--fg: #333;
	--fglight: #666;
	--hl: #0282b9;
	--bggrey: #f8f8f8;
	--bgdark: rgb(54, 57, 64);
	--txtondark: #f8f8f8;
	--linkondark: #b1b1b1;
	--txtgrey: #666;
	--bd: #888;
	--bdlight: #d9d9d9;
	--bdhl: var(--hl);
	--bderr: #f66;
	--err: #c33;
	--bghl: #0282b922;
	--cwidth: 1400px;
	--cwidthmid: 1000px;
	--gap: 40px;
	--m-mid: 2em;
}

html { overflow-y: scroll; scroll-behavior: smooth }
body { font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px; line-height: 1.4; color: var(--fg);
	background: var(--bg); margin: 0; padding: 0;
	min-width: 320px }
* { box-sizing: border-box }
h1, h2, h3 { color: var(--hl); font-size: 32px; font-weight: 700 }
h1:first-child, h2:first-child { margin-top: 0 }
p { text-align: justify }
p:first-child { margin-top: 0 }
p:last-child { margin-bottom: 0 }
a { color: var(--hl) }
.t-r, p.t-r { text-align: right }
.t-c, p.t-c { text-align: center }
.mt-mid { margin-top: var(--m-mid) }
.mb-mid { margin-bottom: var(--m-mid) }
.w-mid { max-width: 60ch; margin-inline: auto }

input[type=text], input[type=number],
input[type=password], select { padding: .3em .7em;
	border: 1px solid var(--bd); /* border-radius: .3em; */
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 1em; width: 100% }
input[type=text].error,
input[type=number].error { border-color: var(--bderr);
	outline: 1px solid var(--bderr) }
input[type=range] { width: 100%; accent-color: var(--hl) }
input[type=button], input[type=submit] { font-size: 1em;
	font-family: inherit; border: 0; line-height: inherit }

.btn { display: inline-block; background: var(--hl);
	color: var(--txtondark); text-decoration: none;
	transition: opacity 200ms; opacity: 1;
	padding: .5em 1em; border: 0; /* border-radius: .5em; */
	cursor: pointer }
.btn:hover { opacity: .9 }
.btn.disabled { opacity: .5; cursor: not-allowed }

.btn-big { font-size: 1.4em; padding: 1em 2em;
	margin: 10px auto;
	transition: background 100ms linear,
		color 100ms linear }
.btn.btn-big { background: white; color: var(--fglight) }
.btn.btn-big:hover,
.btn.btn-big:active { background: var(--hl); color: white;
	opacity: 1 }
.btn.btn-big.disabled { opacity: .7 }
.btn.btn-big.disabled:hover,
.btn.btn-big.disabled:active { background: white; color: var(--fglight) }

.cols { display: flex; flex-direction: row; gap: 0 var(--gap);
	flex-wrap: wrap }
.cols > .col { flex: 1 1 30ch }

div.field { margin-top: .5em }
div.buttons { margin-top: .5em }

#topbar { height: 51px; background: var(--bgdark); color; var(--txtondark) }

#header { box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15); z-index: 1;
	position: relative }
#header .inner { padding: 21px 10px 7px 10px; display: flex;
	justify-content: space-between; align-items: center;
	gap: 0 var(--gap); flex-wrap: wrap }
#header a { color: inherit; text-decoration: none }
#header a:hover { text-decoration: underline }
#header .right { text-align: right; flex-grow: 1 }

#footer { background: var(--bgdark); color: var(--txtondark) }
#footer a { color: var(--linkondark); text-decoration: none }
#footer .inner { display: flex; flex-wrap: wrap }
#footer .col { flex: 1 1 30ch; margin-block: 1em }
#footer .col.t-r a { display: inline-block; margin-left: 1em }

#main { min-height: 100vh; /* padding-bottom: 100px; */ }

section { position: relative }
section h2, section h3 { text-align: center }
section .t-c p { text-align: center }
.inner { max-width: var(--cwidth); margin: 0 auto; padding: 3em 1em }
.inner.medium { max-width: var(--cwidthmid) }
.inner.pt-0 { padding-top: 0 }
.inner.pb-0 { padding-bottom: 0 }
.narrow { max-width: 40ch; margin: 0 auto }
.medium { max-width: 80ch }
section .text { position: relative; margin-block: 2em }
.bgimg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.bgimg img { width: 100%; height: 100%; display: block; object-fit: cover }
.bgimg,
.bggrey { background: var(--bggrey) }

section.hero { min-height: 350px }
section.hero .text { background: var(--hl); color: var(--txtondark);
	padding: 1em; max-width: 500px }
section.hero .text h1,
section.hero .text h2 { color: inherit; font-weight: 500;
	margin: 0; font-size: 30px }
section.hero .text p { margin-top: .5em }

div.select { max-width: 60ch; margin-inline: auto }
div.select .option { padding: 1em 1.5em; margin-block: .5em;
	cursor: pointer;
	background: white; text-align: center; color: var(--fglight);
	transition: background-color 100ms linear,
		color 100ms linear }
div.select .option:first-child { margin-top: 0 }
div.select .option:last-child { margin-bottom: 0 }
div.select .option .title { font-size: 1.4em; font-weight: 500 }
div.select .option .note { font-size: 1em; font-weight: 400 }
div.select .option:hover,
div.select .option.sel { background: var(--hl);
	color: var(--txtondark); border-color: var(--hl) }
/* div.select .option.unsel > * { opacity: .7 } */
div.select .option .title.no-note { margin-block: .3em }

.rangeinput { padding: 1em 1.5em; background: white }
.rangeinput label { display: block; font-size: 1.1em }
.rangeinput input[type=text] { width: 8ch; text-align: right;
	vertical-align: baseline; background: var(--hl);
	color: white; border: 0 }
.rangeinput input[type=text]:active,
.rangeinput input[type=text]:focus { outline-color: var(--hl) }
.rangeinput .inputs { display: flex; gap: .3em 2em;
	align-items: center; flex-wrap: wrap }
.rangeinput .inputs > div { flex: 0 1 0%; white-space: nowrap }
.rangeinput .inputs > div.rng { flex: 1 1 max-content }
.rangeinput .inp { white-space: nowrap }
.rangeinput .rng { display: flex; flex-direction: row; gap: 0 .7em;
	align-items: center }
.rangeinput .rng input { flex-grow: 1 }
.rangeinput .rng .label { display: inline-block;
	white-space: nowrap }

#widthheight { max-width: 60ch; margin-inline: auto }
#widthheight .option + .option { margin-top: 1em }

.getprodlist .btn-big { width: 100% }

section.results.hidden { display: none }
.prodlist { max-width: 800px; margin: var(--gap) auto 0 auto }
.product { display: grid; gap: 10px;
	grid-template: auto auto / auto 1fr;
	border: 1px solid var(--bdlight); padding: 1em;
	margin-top: var(--m-mid); background: white }
.product.hidden { display: none }
.prodimg { grid-row: 1 / 3; grid-column: 1 }
.prodimg img { width: 50px; height: 50px; object-fit: contain;
	object-position: 50% 20% }
.desc { grid-row: 1; grid-column: 2; }
.name { color: var(--hl); font-weight: bold; font-size: 1.4em }
.artnr { color: var(--txtgrey); font-size: .9em }
.adapterhinweis { color: var(--txtgrey); font-size: .9em; font-weight: bold }
.details { grid-row: 2; grid-column: 2; align-self: end;
	text-align: right }
section.results .buttons.mt-mid { margin-top: var(--m-mid) }

div.getpdf { margin-block: var(--gap); text-align: center }
#prodlistcount { text-align: center; font-size: 32px; font-weight: 700;
	color: var(--hl) }
#prodlistcount.unfiltered .filtered { display: none }

#prodfilter .filtgrp { font-weight: bold; margin-top: 1.5em }
#prodfilter .filtgrp:first-child { margin-top: 0 }
.infoicon svg { fill: var(--hl) }
.infoicon { cursor: pointer }
.infotext { display: none }
.infotext.show { position: absolute; top:0; left: 0; width: 100%;
	background: var(--hl); border: 0px solid var(--bd);
	color: var(--bg); padding: 2em 2em 2em 1em; display: block;
	animation: fadein 400ms ease-out; font-size: .9em }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.infotext .close { cursor: pointer;
	color: var(--bg); fill: var(--bg); background: transparent;
	padding: 2px; position: absolute;
	top: 2px; right: 2px }
.infotext .close + p { margin-top: 0 }
.infotext p { text-align: left }
.infotextholder { position: relative; margin-inline: -10px }
#prodfilter .filtopt { padding-left: 1.3em; margin-block: 10px;
	cursor: pointer }
#prodfilter .filtopt::before { content: ''; display: inline-block;
	width: 14px; height: 14px; margin-left: -25px; margin-right: 9px;
	border: 1px solid var(--bd); margin-top: 3px;
	background: white; vertical-align: top }
#prodfilter .filtopt.sel::before { background: var(--hl);
	border-color: var(--hl) }
.linkicon svg { width: 1.2em; height: 1.2em }

.prodserie { display: grid; grid-template: auto auto auto / 80px auto;
	margin-bottom: 10px }
.prodserie img { grid-row: 1 / 4; grid-column: 1 }
.prodserie .num { font-weight: bold; font-size: 1.4em }
.prodserie .name { color: var(--fg); font-size: 1.1em }
.prodserie .link { font-size: .9em }
.prodserie .link a { text-decoration: none }
.prodserie .link a:hover { text-decoration: underline }

table { border-collapse: collapse }
table.mid { max-width: 80ch; margin-inline: auto }
.params th, td { text-align: left; padding: .2em .5em }

@media (max-width: 767px) {
	.withsidebar { position: relative }
	.sidebar { position: fixed; height: 100vh;
		overflow-y: auto; top: 0; left: calc(-100vw);
		background: white; width: calc(100vw - 1px);
		z-index: 1; padding-left: 20px;
		transition: left 400ms ease-out;
		padding-right: 40px }
	.sidebar.show { left: 0 }
	.maincol { /* padding-left: 3em; */ position: relative }
	/* .maincol #openfiltercol { position: absolute;
		top: 0; left: 0; height: 100% } */
	.maincol #openfilter { display: block;
		position: sticky; top: 10px; left: 0;
		width: 15ch; margin-inline: auto;
		cursor: pointer; /* color: var(--hl); */ }
	#openfilter svg { vertical-align: middle }
	#openfilter svg + span { display: inline-block;
		vertical-align: middle }
	.sidebar #closefilter { cursor: pointer;
		color: var(--hl); background: white;
		padding: .5em; position: absolute;
		top: .2em; right: .2em }
	.sidebar #closefilter + h3 {
		margin-top: calc(0.5 * var(--gap));
		margin-bottom: calc(0.3 * var(--gap)) }
	.prodimg img { width: 80px; height: 80px }
}

@media (min-width: 768px) {
	.inner { padding: 5em 1em }
	.product { gap: 10px 40px }
	.prodimg img { width: 120px; height: 120px }

	.withsidebar { display: grid;
		grid-template: auto / max(250px, 25%) 1fr;
		gap: var(--gap) }
	.sidebar #prodfilter { margin-top: 20px }
	.maincol #openfiltercol,
	.maincol #openfilter,
	.sidebar #closefilter { display: none }
	.sidebar #closefilter + h3 { margin-top: var(--gap) }
}

@media (min-width: 1024px) {
	.twocol { columns: 2; column-gap: var(--gap) }
	section.hero .text { max-width: 500px }
	.prodserien { display: flex; justify-content: space-between }
}