@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;
	--m-lg: var(--gap);
}

::selection { color: white; background: var(--hl) }

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-0 { margin-top: 0 }
.mt-mid { margin-top: var(--m-mid) }
.mb-mid { margin-bottom: var(--m-mid) }
.mt-lg { margin-top: var(--m-lg) }
.mb-lg { margin-bottom: var(--m-lg) }
.pt-lg { padding-top: var(--m-lg) }
.w-mid { max-width: 60ch; margin-inline: auto }
.w-100 { width: 100% }

input[type=text], input[type=number], input[type=email],
input[type=password], textarea, select { padding: .3em .7em;
	border: 1px solid var(--hl); /* border-radius: .3em; */
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 1em; width: 100%; background: var(--hl);
	color: white }

input[type=text]::placeholder, input[type=number]::placeholder,
input[type=email]::placeholder, input[type=password]::placeholder,
textarea::placeholder { color: #eee }

input[type=text]::selection, input[type=number]::selection,
input[type=email]::selection, input[type=password]::selection,
textarea::selection, select::selection { color: var(--hl);
	background: white }
input[type=text].error, input[type=email].error, textarea.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], button { font-size: 1em;
	font-family: inherit; border: 0; line-height: inherit }
input[type=checkbox] { accent-color: var(--hl) }

p.error { color: var(--err) }

.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::selection { color: var(--hl); background: white }
.btn:hover { opacity: .9 }
.btn.disabled { opacity: .5; cursor: not-allowed }

.btn .icon { display: inline-block; fill: white; width: 1.8em; height: auto;
	margin-block: -1em; vertical-align: middle; margin-right: .5em }
.btn .icon svg { max-width: 100%; height: auto; fill: white; color: white;
	stroke: white }

.btn-big { font-size: 1.4em; padding: 1em 2em;
	margin: 10px auto;
	transition: background 100ms linear,
		color 100ms linear }

.btn-light { background: var(--bggrey); color: var(--fglight) }
.bggrey .btn-light { background: white }
.btn-light:hover, .bggrey .btn-light:hover,
.btn-light:active { background: var(--hl); color: white;
	opacity: 1 }
.btn-light.disabled { opacity: .7 }
.btn-light.disabled:hover,
.btn-light.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; */ }

#overlay { display: none; position: fixed; top: 0; left: 0;
	width: 100%; height: 100%; padding: .25em 2em .25em .5em }
#overlay.show { display: flex; justify-content: center;
	align-content: center; align-items: center;
	animation: fadein 300ms 200ms ease-out both }
#overlay .obg { position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; background: #000a }
#overlay .oinner { max-width: 100%; padding: .5em .25em; position: relative;
	background: white; color: var(--fg); /* border-radius: .5em; */
	box-shadow: 1px 1px 8px #0004; min-width: 30ch }
#overlay .ocontent { max-width: 90ch; padding-inline: 1em;
	overflow: auto; max-height: 80vh }
#overlay .oclose { display: block; position: absolute; right: -2em;
	top: -.5em; width: 2em; height: 2em; text-align: center;
	cursor: pointer }
#overlay .oclose::before { content: '×'; display: inline-block;
	font-size: 2em; line-height: 1; color: white }
#overlay .ocontent .logo { margin-left: -4px }

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 ::selection { background: white; color: var(--hl) }
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:hover ::selection,
div.select .option.sel ::selection { color: var(--hl); background: white }
/* 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 input[type=text]::selection { color: var(--hl); background: white }
.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 }
.belowprods,
.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 }

.angebot-prod { display: flex; align-content: center; align-items: center }
.angebot-prod .anzahl { flex: 0 0 8ch }
.angebot-prod .anzahl input { max-width: 6ch }

@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 }

	#overlay { padding: 1em 3em 1em 2em }
	#overlay .oinner { padding: 2em }
	#overlay .oclose { right: -3em; width: 3em; height: 3em }
	#overlay .oclose::before { font-size: 3em }

	.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 }
}

div.checkbox { width: 1em; height: 1em; display: inline-block;
	margin-right: 8px; overflow: hidden; position: relative }
div.checkbox input[type=checkbox] { position: absolute; top: -5em;
	left: -200vw }
div.checkbox label { width: 100%; height: 100%; position: absolute;
	top: 0; left: 0; border: 1px solid rgb(74, 74, 73);
	border-radius: 2px }
div.checkbox input[type=checkbox]:checked + label::after {
	display: block; content: ''; height: .6em;
	width: .3em; border-right: 3px solid var(--hl);
	border-bottom: 3px solid var(--hl);
	transform: rotate(45deg); position: absolute; top:66%; left:50%;
	margin-left:-4px; margin-top:-10px; }

/*
 * fcaptcha.css
 */

.fcaptcha-button { display: inline-block; cursor: pointer; padding-right: 1em }
.fcaptcha-bigbutton
.fcaptcha-button { margin: 1em 0; font-size: 1.3em }
.fcaptcha-error { display: none }
.fcaptcha-mark { display: inline-block; position: relative;
	width: 1em; height: 1em; margin-right: 8px }
.fcaptcha-bigbutton .fcaptcha-mark { width: 1.1em; height: 1.1em;
	margin: 0 .7em 0 0 }
.fcaptcha-square, .fcaptcha-circle, .fcaptcha-check {
	position: absolute; top: 0; box-sizing: border-box;
	left: 0; width: 100%; height: 100% }
.fcaptcha-circle, .fcaptcha-check { opacity: 0; transition: opacity 200ms }
.fcaptcha-square { border: 1px solid rgb(74, 74, 73);
	border-radius: 2px; }
.fcaptcha-circle { border: .2em solid var(--hl);
	border-radius: 2em }
.fcaptcha-check { border: 0; width: 100%; height: 100%;
	transform: none; position: relative; }
.fcaptcha-check::after { display:block; content:""; height:.6em;
	width:.3em; border-right:3px solid var(--hl);
	border-bottom:3px solid var(--hl);
	transform:rotate(45deg); position:absolute; top:66%; left:50%;
	margin-left:-4px; margin-top:-10px; }
.fcaptcha-label { display: inline-block; margin: 0 }
.fcaptcha-mark, .fcaptcha-label { vertical-align: middle;
	cursor: pointer }
.fcaptcha-checking .fcaptcha-square {
	animation: fcaptcha-fadeout 1 400ms 200ms both }
.fcaptcha-checking .fcaptcha-circle { opacity: 1 }
.fcaptcha-loading .fcaptcha-circle {
	animation: fcaptcha-pulse infinite 400ms 400ms both alternate;
	opacity: 1 }
/*.fcaptcha-checked .fcaptcha-square { opacity: 0 }*/
.fcaptcha-checked .fcaptcha-check { opacity: 1 }
.fcaptcha-bigbutton.fcaptcha-checked .fcaptcha-check {
	animation: fcaptcha-grow 1 1s both }
@keyframes fcaptcha-fadeout {
	from { opacity: 1.0 }
	to { opacity: 0.0 }
}
@keyframes fcaptcha-fadein {
	from { opacity: 0 }
	to { opacity: 1 }
}
@keyframes fcaptcha-pulse {
	from { border-width: .3em }
	to { border-width: .1em }
}
@keyframes fcaptcha-grow {
	from { transform: scale3d(.3, .3, 1) }
	to { transform: scale3d(1, 1, 1) }
}

.fcaptcha-overlay { position: absolute; width: 320px; max-width: 90vw;
	z-index:10;
	/* max-height: 100vh; overflow: auto; padding-left: 10px */ }
.fcaptcha-box { border: 1px solid black;
	border-radius: 5px; padding: 10px; background: white;
	color: black; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	max-height: 100vh; overflow: auto }
.fcaptcha-blocks { width: 100%; padding-bottom: 133.333%; position: relative;
	background: #ffffff no-repeat 50% 50%; background-size: contain }
.fcaptcha-block { width: 33.333%; height: 25%; position: absolute;
	box-sizing: border-box; border: 2px solid white; background: transparent }
.fcaptcha-block::before { position: absolute; width: 100%; height: 100%;
	content: ''; display: block; box-sizing: border-box;
	border: 1px solid black; cursor: pointer }
.fcaptcha-block:nth-child(3n+1) { left: 0 }
.fcaptcha-block:nth-child(3n+2) { left: 33.333% }
.fcaptcha-block:nth-child(3n+3) { left: 66.666% }
.fcaptcha-block:nth-child(-n+3) { top: 0 }
.fcaptcha-block:nth-child(n+4):nth-child(-n+6) { top: 25% }
.fcaptcha-block:nth-child(n+7):nth-child(-n+9) { top: 50% }
.fcaptcha-block:nth-child(n+10) { top: 75% }
.fcaptcha-block.fcaptcha-sel {
	animation: fcaptcha-blocksel 1 400ms both linear }
@keyframes fcaptcha-blocksel {
	from { border-width: 2px; background-color: rgba(255,255,128,0) }
	80% { border-width: 7px }
	to { border-width: 2px; background-color: rgba(255,255,128,.4) }
}
.fcaptcha-question { padding: .5em; background: var(--hl); color: white;
	border: 2px solid white; margin-bottom: 8px }
.fcaptcha-question:before { display:block; }
.fcaptcha-question.de:before { content:"Bitte wählen Sie alle Felder, die einen Teil eines Rohrmotors enthalten."; }
.fcaptcha-question.en:before { content:"Please select all fields that contain part of a shape."; }
.fcaptcha-buttons { padding: 0 2px; text-align: right; margin-top: 8px }
.fcaptcha-buttons a { display: inline-block; padding: .3em;
	text-decoration: none; color: white; text-transform: uppercase;
	background-color: var(--hl); cursor: pointer }
.fcaptcha-buttons a:hover { text-decoration: none }

.fcaptcha-omark { position: absolute; left: -8px; top: 30%;
	transform: rotateZ(-45deg); width: 16px; height: 16px;
	box-sizing: border-box;
	border-top: 1px solid black;
	border-left: 1px solid black }
.fcaptcha-omark::before { content: ''; display: block;
	position: absolute; box-sizing: border-box;
	width: 100%; height: 100%;
	border-top: 15px solid white; border-left: 15px solid white }

.fcaptcha-field.error .fcaptcha-square {
	border-color: var(--bgerr); }
.fcaptcha-field.error .fcaptcha-label { color: var(--err); }