html, button, input {
	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

html {
	font-size: 16px;
}

body {
	margin: 0;
	padding: 0;
	background: #eee;
	color: #000;
}

body > div {
	max-width: 125rem; /* change all 125rem references everywhere */
	background: #fff;
	margin: 0 auto;
	box-shadow: 0 0 2rem 0 #0005;
}

header {
	margin: 0;
	padding: 0;
	position: relative;
}

section {
	margin: 0;
	padding: 0;
}

* {
	outline: none;
}

a {
	text-decoration: none;
}

p, main section.text ul {
	margin: 0 0 1em 0;
	padding: 0;
	line-height: 1.3;
	font-size: 0.9rem;
}

address {
	font-style: normal;
}

main ul {
	font-size: 0.8rem;
	margin: 0;
	padding: 0;
}

main ul li {
	margin: 0 0 0.3em 1.5em;
	padding: 0;
}

header #logo {
	display: block;
	background-image: url('../assets/logos/tillmann-wellpappe-256.png');
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
	height: 3rem;
	box-sizing: border-box;
	margin: 1.5rem 5rem;
}

header #top {
	background: #f9f9f9;
	color: #003c8e;
	font-size: 0.75rem;
	padding: 0.7em 5rem;
	border-top: solid thin #fff;
	border-bottom: solid thin #ddd;
	display: flex;
	justify-content: space-between;
}

nav {
	cursor: default;
}

header #top nav {
	margin: 0;
	padding: 0;
	display: flex;
}

header #top nav a {
	padding: 0 1.2em;
	background-image: linear-gradient(to bottom, #0000 15%, #aaa 15%, #aaa 85%, #0000 85%);
	background-repeat: no-repeat;
	background-size: 1px 100%;
	background-position: center right;
}
header #top nav a:last-of-type {
	padding-right: 0;
	background-image: none;
}
header #top nav a #facebook {
	background-image: url('../assets/logos/facebook-128.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 95%;
	width: 4.2em;
	height: 0.8em;
	vertical-align: -0.1em;
	color: transparent;
	display: inline-block;
}

header nav#breadcrumbs {
	line-height: 1.7rem;
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	font-size: 0.75rem;
	padding: 0 5rem;
	margin: 0;
}

header nav#breadcrumbs a {
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
}

header nav#breadcrumbs a:not(:first-of-type)::before {
	content: '/';
	color: #ccc;
	display: inline-block;
	margin: 0 0.2em;
}

header nav#breadcrumbs a:first-of-type {
	background-image: url('../assets/icons/home.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	color: transparent;
	width: 1.3em;
}

abbr {
	display: inline-block;
	height: 0.7em;
	width: 0.8em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
abbr.phone { background-image: url('../assets/icons/phone.png'); }
abbr.location { background-image: url('../assets/icons/location.png'); }
abbr.schnellkontakt { background-image: url('../assets/icons/schnellkontakt.png'); }

main {
	padding: 3rem 5rem;
}

footer, a, button, h2, h3 {
	color: #003c8e;
}
.diagonal-fold h3 {
	color: inherit;
}

footer {
	background: #f9f9f9;
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	padding: 2rem 5rem 3rem 5rem;
	font-size: 0.85rem;
	position: relative;
}

footer #route-planen {
	line-height: 1.5;
}

footer #route-planen abbr.location {
	margin-left: -1.5em;
	margin-right: 0.3em;
}

footer #route-planen span.sep {
	visibility: hidden;
	height: 0;
	display: block;
}

/* scale font size dynamically for too small windows */
@media (max-width: 90rem) {
	footer {
		font-size: 0.92vw;
	}
}

footer nav {
	text-transform: uppercase;
}

footer nav#footer-main-nav {
	margin: -0.3em 2rem 0 0;
	padding: 0;
}

footer nav#footer-main-nav a {
	padding: 0.3em 0;
	display: block;
}

footer nav#footer-main-nav > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
}

footer nav#footer-main-nav > ul > li {
	margin-right: 2rem;
	max-width: 10em;

}

footer nav#footer-main-nav > ul > li > ul {
	margin: 0.7em 0 0 0;
	padding: 0;
	list-style: none;
}

footer nav#footer-main-nav > ul > li > ul > li {
	font-size: 90%;
}

footer nav#footer-main-nav > ul > li > ul > li > a {
	color: #c0c0c0;
}

footer #footer-mini-nav {
	display: flex;
	flex-direction: column;
	position: relative;
	margin-left: 2rem;
	text-align: right;
}

footer #footer-mini-nav a {
	padding: 0.3em 0;
}

footer #mein-sundern {
	display: block;
	width: 110%;
	aspect-ratio: 2;
	margin-bottom: -2rem;
	background-image: url('../assets/logos/mein-sundern.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	color: transparent;
}

footer #footer-copyright {
	position: absolute;
	bottom: 1.25rem;
	left: 0;
	width: 100%;
	text-align: center;
	color: #c0c0c0;
	font-size: 90%;
}

#slider > nav {
	text-transform: uppercase;
	margin: 0;
	padding: 0 5rem;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	font-size: 0.8rem;
	box-sizing: border-box;
}

#slider > nav > ul {
	margin: 0 0 0 -5rem;
	padding: 0 0 0 3.5rem;
	list-style: none;
	display: flex;
	font-size: 0.8rem;
	background: linear-gradient(105deg, #003c8ee0 calc(100% - 1rem), transparent calc(100% - 1rem));
	width: 80%;
}

#slider > nav > ul > li {
	margin: 0 0.5rem;
	padding: 0;
	position: relative;
}

#slider > nav > ul > li > a {
	color: #fff;
	display: block;
	padding: 1rem 1rem;
}

#slider > nav > ul > li > ul {
	background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem), url('../assets/nav-triangle.png');
	background-repeat: no-repeat;
	background-position: top left, top center;
	background-size: auto auto, auto 0.3rem;
	position: absolute;
	top: 2.5rem;
	width: 10rem;
	left: calc(50% - 10rem / 2);
	list-style: none;
	margin: 0;
	padding: 0.8rem 0;
	font-size: 0.7rem;
	box-shadow: 0.3rem 0.3rem 0.4rem 0 #0006;
	visibility: hidden;
	opacity: 0;
	transform: translate3d(0, -0.5rem, 0);
	transition: all 0.2s;
}
#slider > nav > ul > li:hover > ul,
#slider > nav > ul > li.open > ul,
#slider > nav > ul > li > ul:hover
{
	opacity: 1;
	transform: none;
	visibility: visible;
}

#slider > nav > ul > li > ul a {
	color: #000;
	display: block;
	padding: 0.4rem 1.7rem;
	background-image: url('../assets/nav-arrow.png');
	background-repeat: no-repeat;
	background-position: 0.9rem 0.8em;
	background-size: auto 0.6em;
}
#slider > nav > ul > li > ul a::before {
	margin-right: 0.5em;
}
#slider > nav > ul > li > ul a:hover {
	background-color: #eee;
}

#slider > nav > ul > li > ul > li {
	margin: 0;
	padding: 0;
}

#slider > nav > div {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(20% + 5.25rem);
	background: linear-gradient(285deg, #003c8ee0 calc(100% - 1rem), transparent calc(100% - 1rem));
	text-align: center;
}

#slider > nav > div a {
	display: inline-block;
	background-image: url('../assets/logos/papierfabrik-256.png'), url('../assets/nav-arrow-white.png');
	background-repeat: no-repeat;
	background-size: auto 1rem, 0.4rem 0.6rem;
	background-position: right 1rem center, center right;
	margin: 0;
	padding: 1rem 0;
	width: 10em;
	white-space: nowrap;
	color: transparent;
	
}

#slider {
	height: calc(1 / 3 * min(100vw, 125rem));
	position: relative;
	margin-bottom: 1.7rem;
	overflow: hidden;
	padding-bottom: 1.8rem;
}
#slider.flat {
	height: 3rem;
	overflow: visible;
}

#slider #slider-dots {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 1.7rem;
	font-size: 1.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	color: #ccc;
	transition: opacity 0.7s, visibility 0.7s;
}
#slider #slider-dots:not(.show) {
	visibility: hidden;
	opacity: 0;
}

#slider #slider-dots li {
	margin: 0 0.2rem;
	padding: 0;
	display: inline;
}
#slider #slider-dots li::after {
	content: '•';
}
#slider #slider-dots li.active {
	color: #003c8e;
}

#slider ul#slider-images {
	height: 100%;
	width: min(100vw, 125rem);
}

#slider div#slider-video {
	height: calc(100% - 1.8rem);
	width: 100%;
	overflow: hidden;
}

#slider ul#slider-images {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0;
	white-space: nowrap;
	transform: translate3d(0, 0, 0);
}
#slider.video:not(.video-ended) ul#slider-images {
	opacity: 0;
	visibility: hidden;
}

#slider ul#slider-images li {
	display: inline-block;
	height: 100%;
	width: min(100vw, 125rem);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

#slider div#slider-video {
	position: absolute;
	top: 0;
	left: 0;
}

#slider div#slider-video video {
	width: 100%;
	height: auto;
}

span.sep {
	margin: 0 0.7em;
}
span.sep::after {
	content: '|';
}

button {
	text-transform: uppercase;
	background: transparent;
	margin: 0;
	padding: 0.5em 1.7em;
	text-align: left;
	font-size: 95%;
	border: solid thin;
	border-radius: 0.2rem;
	transition: background-color 0.1s, color 0.1s;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
button::after {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	content: ' ';
	display: inline-block;
}
button:hover, li:hover button {
	background: #003c8e;
	color: #fff;
}
.diagonal-fold button {
	margin-top: 1.5rem;
}

button::after, li button::after {
	height: 0.6em;
	vertical-align: 0;
	width: 0.8em;
	background-image: url('../assets/button-arrow.png');
}
button:hover::after, li:hover button::after {
	background-image: url('../assets/button-arrow-hover.png');
}

button.download::after, li button.download::after {
	height: 1.2em;
	width: 1.8em;
	vertical-align: middle;
	background-image: url('../assets/icons/download.png');
}
button.download:hover::after, li:hover button.download::after {
	background-image: url('../assets/icons/download-white.png');
}

body > aside {
	position: fixed;
	right: 0;
	top: 50vh;
	display: flex;
	font-size: 1rem;
	transform: rotate(-90deg) translateX(50%);
	transform-origin: bottom right;
}

body > aside > a {
	line-height: 1rem;
	height: 1rem;
	display: inline-block;
	background: #003c8eee;
	padding: 1rem;
	color: #fff;
	margin: 0 1px;
	box-shadow: -0.15rem -0.15rem 0.15rem 0 #0004;
	cursor: pointer;
}

body > aside > a abbr {
	transform: rotate(90deg);
	width: 1rem;
	height: 1rem;
}

a#to-top {
	position: fixed;
	bottom: 2rem;
	right: 0;
	height: 1rem;
	width: 1rem;
	display: block;
	background-color: #003c8eee;
	background-image: url('../assets/to-top.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1em auto;
	padding: 1rem;
	box-shadow: -0.15rem -0.15rem 0.15rem 0 #0004;
	transition: opacity 0.2s, visibility 0.2s;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
}
a#to-top.show {
	visibility: visible;
	opacity: 1;
}

h2 {
	text-transform: uppercase;
	font-weight: normal;
	margin: 0 0 1.5em 0;
	padding: 0;
	font-size: 1.4rem;
	background-image: linear-gradient(to bottom, transparent 45%, #003c8e 45%, #003c8e 55%, transparent 55%);
	background-size: 50% auto;
	background-repeat: no-repeat;
}

h2 > span {
	display: inline-block;
	background: #fff;
	padding: 0 2.2rem 0 0;
}

h3 {
	text-transform: uppercase;
	font-weight: normal;
	margin: 0 0 1.5em 0;
	padding: 0;
	font-size: 1.3rem;
}

h4 {
	text-transform: uppercase;
	font-weight: normal;
	margin: 0 0 0.7em 0;
	padding: 0;
	font-size: 1.2rem;
}
section#geschichte h4 {
	margin: 0 0 1.5em 0;
}

h5 {
	font-weight: bold;
	margin: 1.6em 0;
	padding: 0;
}

ul.gallery {
	margin: 0 0 4rem 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
}

ul.gallery li {
	margin: 0;
	padding: calc(50% / 5) 0 0 0;
	width: 19%;
	position: relative;
	outline: solid #ddd thin;
}

ul.gallery li > div {
	position: absolute;
	top: 0.3rem;
	left: 0.3rem;
	right: 0.3rem;
	bottom: 0.3rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center 75%;
}

ul.gallery li button {
	width: calc(100% + 1px);
	display: block;
	position: absolute;
	top: calc(100% + 0.5rem);
	font-size: min(1.1vw, 110%);
	overflow: visible;
}

#home-karriere {
	margin: 7.5rem 0;
	background-image: url('../karriere.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	padding-top: 16.5%;
	position: relative;
}
#home-karriere a {
	color: transparent;
}

#home-karriere h3 {
	margin: 0;
	padding: 0;
	color: #fff;
	font-style: italic;
	position: absolute;
	top: 25%;
	left: 3rem;
	font-size: calc(min(2vw, calc(0.02 * 125rem)) + 1rem);
	font-weight: normal;
	width: 8em;
	line-height: 1.2;
	box-sizing: border-box;
}

#home-karriere button {
	position: absolute;
	bottom: -1rem;
	left: 3rem;
	font-size: 0.88rem;
	width: 18%;
	min-width: 15em;
}
#home-karriere button:not(:hover) {
	background-color: #fff;
}

a.arrow {
	background-image: url('../assets/button-arrow.png');
	background-repeat: no-repeat;
	background-size: auto 0.6em;
	background-position: center right;
	display: inline-block;
	padding: 0 0.7em 0 0;
}

ul.news {
	margin: 0 0 2rem 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, 23%);
	grid-gap: 3vw 0;
	justify-content: space-between;
}

ul.news li {
	margin: 0;
	font-size: 0.85rem;
	position: relative;
}

ul.news li > div {
	border: solid #ddd thin;
}

ul.news li > div > div {
	padding: 0.8rem 2rem;
	height: 10vw;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000f calc(100% - 3em - 2rem), #0000 calc(100% - 2rem));
	-moz-mask-image: linear-gradient(to bottom, #000f calc(100% - 3em - 2rem), #0000 calc(100% - 2rem));
	mask-image: linear-gradient(to bottom, #000f calc(100% - 3em - 2rem), #0000 calc(100% - 2rem));
}

ul.news li figure {
	padding: 55% 0 0 0;
	margin: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

ul.news li small {
	color: #999;
}

ul.news h3 {
	font-weight: normal;
	margin: 0.6rem 0 0.9rem 0;
	padding: 0;
	font-size: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

ul.news button {
	width: 100%;
	margin-top: 0.5rem;
}

a.plus {
	display: inline-block;
	border: solid #003c8e thin;
	border-radius: 100%;
	width: 2rem;
	line-height: 2rem;
	font-size: 1.5rem;
	transition: background-color 0.1s, color 0.1s;
}
a.plus::after {
	content: '+';
}
a.plus:hover {
	background-color: #003c8e;
	color: #fff;
}

form {
	max-width: 50%;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	text-align: right;
}

form * {
	text-align: initial;
}

form div.fieldset {
	display: table;
	border-spacing: 0 0.7rem;
	margin: 0;
	padding: 0;
	border: none;
	width: 100%;
}

form label {
	display: table-row;
	margin: 0;
	padding: 0;
}

form label > * {
	display: table-cell;
	width: 100%;
	box-sizing: border-box;
}

form label > span {
	padding-right: 1rem;
	width: 1px;
	white-space: nowrap;
}

form label.radio input,
form label.checkbox input
{
	vertical-align: -0.1em;
	margin: 0 0.4em 0 0;
}

form label > input:not([type='checkbox']):not([type='file']),
#admin-editor,
form label > div
{
	padding: 0.4em 0.5em;
	line-height: 1;
	border: solid thin #aaa;
	border-radius: 0.2rem;
}

form label > button {
	display: table-cell;
	box-sizing: border-box;
	width: 100%;
}

form label > span > small {
	display: block;
	color: #888;
	margin-top: 0.5em;
	font-size: 70%;
}

form > button {
	margin: 2rem 0 0 1rem;
}

.diagonal-fold {
	display: flex;
	min-height: 25vw;
	margin-bottom: 3rem;
}
.diagonal-fold.flipped {
	flex-direction: row-reverse;
}
.diagonal-fold.flat {
	min-height: 20vw;
}

.diagonal-fold > * {
	width: 50%;
	box-sizing: border-box;
	-webkit-mask-size: 100% 100%;
	-moz-mask-size: 100% 100%;
	mask-size: 100% 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.diagonal-fold > :first-child {
	padding: 2rem calc(4rem + 4vw) 2rem 4rem;
	background-color: #f9f9f9;
	-webkit-mask-image: url('../assets/diagonal-mask-left.png');
	-moz-mask-image: url('../assets/diagonal-mask-left.png');
	mask-image: url('../assets/diagonal-mask-left.png');
}
.diagonal-fold.flipped > :first-child {
	padding: 2rem 4rem 2rem calc(4rem + 4vw);
	-webkit-mask-image: url('../assets/diagonal-mask-right-flipped.png');
	-moz-mask-image: url('../assets/diagonal-mask-right-flipped.png');
	mask-image: url('../assets/diagonal-mask-right-flipped.png');
}

.diagonal-fold > :last-child {
	padding: 2rem 4rem 2rem calc(4rem + 4vw);
	background-color: #003c8e;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-mask-image: url('../assets/diagonal-mask-right.png');
	-moz-mask-image: url('../assets/diagonal-mask-right.png');
	mask-image: url('../assets/diagonal-mask-right.png');
}
.diagonal-fold.flipped > :last-child {
	padding: 2rem calc(4rem + 4vw) 2rem 4rem;
	-webkit-mask-image: url('../assets/diagonal-mask-left-flipped.png');
	-moz-mask-image: url('../assets/diagonal-mask-left-flipped.png');
	mask-image: url('../assets/diagonal-mask-left-flipped.png');
}
.diagonal-fold > ul:last-child.image-fader {
	background: #f9f9f9;
}

.diagonal-fold > :last-child.free {
	background-size: auto calc(100% - 4rem);
	background-color: transparent;
	-webkit-mask-image: none;
	-moz-mask-image: none;
	mask-image: none;
}

section#geschichte {
	text-align: center;
	width: 100%;
	overflow: hidden;
}

section#geschichte > div {
	font-size: 0;
	white-space: nowrap;
	transform: translate3d(0, 0, 0);
	width: 100%;
	height: 100%;
}

section#geschichte * {
	text-align: left;
	white-space: normal;
}

section#geschichte .diagonal-fold h3 {
	margin-bottom: 0.8em;
}

section#geschichte .diagonal-fold > :last-child {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

section#geschichte .diagonal-fold p.current {
	color: #003c8e;
}

section#geschichte > ul {
	display: inline-block;
	white-space: nowrap;
	margin: 4rem 0;
	padding: 0;
	list-style: none;
	color: #ccc;
	font-size: 0.7rem;
	background-image: linear-gradient(to right, #003c8e, #003c8e);
	background-size: calc(100% - 5rem) 1px;
	background-repeat: no-repeat;
	background-position: bottom 0.7rem center;
}

section#geschichte > ul li {
	margin: 0 1.5rem;
	padding: 0;
	display: inline-block;
	vertical-align: bottom;
	cursor: pointer;
}
section#geschichte > ul li::after {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	content: ' ';
	background: #fff;
	box-shadow: 0 0 0 1px #003c8e;
	margin: 0.5rem auto;
	border-radius: 100%;
}
section#geschichte > ul li.active {
	font-size: 150%;
	color: #003c8e;
}
section#geschichte > ul li.active::after {
	box-shadow: 0 0 0 3px #003c8e;
}

section#geschichte .diagonal-fold {
	display: inline-flex;
	width: 100%;
	height: calc(32rem - 4vw);
	min-height: auto;
	vertical-align: top;
	margin-bottom: 0;
}

section.box {
	background: #f9f9f9;
	padding: 3rem 4.5rem;
}

section.box p a {
	color: #fff;
	text-decoration: underline;
}

section.box > div > address {
	margin: 2rem 0 4rem 0;
	padding: 0;
}

section.box address a, ul.gallery a, ul.grid.kontakte > li a {
	text-decoration: underline;
	color: inherit;
}

section.box aside {
	background: #003c8e;
	color: #fff;
	float: right;
	width: 25em;
	padding: 2rem 2.5rem;
	margin: 0 0 0 2rem;
}

section.box aside h4 {
	margin-bottom: 2em;
}

section.box > div::after {
	height: 3rem;
	clear: both;
	content: ' ';
	display: block;
}

section.box > div > figure {
	float: right;
	margin: 0 0 2rem 2rem;
}

section.box > div > figure.fefco {
	width: 12rem;
	height: 12rem;
	padding: 2rem;
	border: solid #ddd thin;
}

ul.grid {
	margin: 5rem 0 0 0;
	font-size: 0.8rem;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, 23%);
	grid-gap: 1.5rem 0;
	justify-content: space-between;
}
ul.grid.fefco {
	grid-gap: 4.5rem 3rem;
	grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
}
ul.grid.fefco-category {
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	margin-top: 0;
}

ul.grid > li {
	margin: 0;
	padding: 0;
	background: #fff;
	border: solid #eee thin;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	transition: background-color 0.1s, color 0.1s;
}

ul.grid > li:hover,
ul.grid > li.highlight {
	background-color: #003c8e;
}
ul.grid > li:hover,
ul.grid > li:hover h4,
ul.grid > li:hover h5,
ul.grid > li.highlight,
ul.grid > li.highlight h4,
ul.grid > li.highlight h5
{
	color: #fff;
}
ul.grid.fefco-category > li:hover figure {
	filter: invert(1);
	mix-blend-mode: screen;
}

ul.grid > li > a {
	padding: 1.6rem 2rem 1.75rem 2rem;
	display: block;
	cursor: pointer;
	height: 100%;
}

ul.grid > li h4 {
	text-transform: none;
	color: #003c8e;
	font-size: 1rem;
	margin-bottom: 0;
	padding-right: 3.5rem;
}
ul.grid.fefco > li h4 {
	margin-bottom: 1.5rem;
	padding-right: 5rem;
}

ul.grid > li h5 {
	margin-top: 0;
	font-size: 0.8rem;
}
ul.grid.fefco > li h5 {
	position: absolute;
	top: 1.5rem;
	right: 6rem;
	font-size: 0.85rem;
	font-weight: normal;
	color: #888;
}
ul.grid.fefco-category > li h5 {
	text-align: center;
}

ul.grid > li p {
	font-size: 0.7rem;
	line-height: 1.35;
	margin-bottom: 0;
}
ul.grid.fefco > li p {
	font-size: 0.85rem;
}

span.email {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: underline;
}

ul.grid.kontakte > li > a {
	text-decoration: none;
}

ul.grid > li figure {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

ul.grid.fefco > li figure
{
	position: absolute;
	bottom: calc(100% - 2rem);
	right: 1rem;
	width: 3.75rem;
	height: 3.75rem;
	background-color: #fff;
	border: solid #ddd thin;
}
ul.grid.fefco > li figure {
	bottom: calc(100% - 2.5rem);
}
ul.grid.fefco > li a {
	color: inherit;
}

ul.grid.fefco-category > li figure {
	width: 100%;
	height: 10em;
	mix-blend-mode: multiply; /* artificial alpha channel for now */
}

figure.fefco, ul.grid > li figure.fefco {
	background-color: hsl(40, 0%, 95%);
	background-origin: content-box;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 0.5rem;
	box-sizing: border-box;
	width: 4.5rem;
	height: 4.5rem;
	filter: saturate(0);
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background: #3336;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}
.popup.show {
	opacity: 1;
	visibility: visible;
}

.popup > div {
	background: #fff;
	box-shadow: 0 0 2rem 0 #0005;
	box-sizing: border-box;
	position: relative;
}

.popup > div > a.close {
	position: absolute;
	top: -1rem;
	left: calc(50% - 0.5rem); /* should be -1rem, but is 0.5rem! No idea */
	padding: 0;
	text-align: center;
	width: 2rem;
	line-height: 2rem;
	height: 2rem;
	background: #fff;
	display: block;
	z-index: 10;
	cursor: pointer;
	color: inherit;
}
.popup > div > a.close::after {
	content: '✕';
}
.popup > div > a.close:hover {
	background: #eee;
}

#popup.video > div {
	background: #000;
}

.popup video {
	width: 70vw;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	display: block;
}

form#fefco-suche {
	float: right;
	max-width: none;
	margin-top: 0;
	margin-left: 5rem;
	width: 47%;
}

a#datenserver {
	float: right;
	font-size: 80%;
}

#popup.fefco-detail > div {
	padding: 1rem 2rem;
}

ul.image-fader {
	position: relative;
	list-style: none;
}

ul.image-fader li {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	visibility: hidden;
}
ul.image-fader li.current {
	opacity: 1;
	visibility: initial;
}

ul.image-fader li > button.play {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #3338;
	background-image: url('../assets/icons/play.png');
	background-repeat: no-repeat;
	background-size: 6rem auto;
	background-position: 53% center;
	border: none;
	cursor: pointer;
}

ul.zertifikate {
	margin: 0 0 0.5rem 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, 23%);
	grid-gap: 3vw 0;
	justify-content: space-between;
}
ul.zertifikate.mameli {
	grid-template-columns: repeat(auto-fill, 48.75%);
	margin-bottom: 4rem;
}

ul.zertifikate li {
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
}

ul.zertifikate li > a,
ul.zertifikate.mameli li > div
{
	display: flex;
	align-items: center;
	border: solid #ddd thin;
	padding: 1rem 1.5rem;
	transition: background-color 0.1s, color 0.1s;
}

ul.zertifikate li > a > div {
	overflow: hidden;
}
ul.zertifikate.mameli li a {
	color: inherit;
}

ul.zertifikate h3 {
	font-weight: normal;
	margin: 0 0 0.9rem 0;
	padding: 0;
	font-size: 0.9rem;
	text-transform: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
ul.zertifikate small {
	color: #003c8e;
}

ul.zertifikate button {
	width: 100%;
	margin-top: 0.5rem;
}

ul.zertifikate li figure {
	height: 11rem;
	width: calc(11rem / (297 / 210));
	flex-shrink: 0;
	background-color: #fff;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	outline: solid #999 thin;
	margin: 0 1rem 0 0;
	padding: 0;
}

#kontakt-team {
	margin: 2rem auto -1.5rem auto;
	width: 80%;
	position: relative;
}

#kontakt-team > img {
	display: block;
	width: 100%;
	height: auto;
}

#kontakt-team > a {
	position: absolute;
	display: block;
	font-size: 0.7rem;
}

#kontakt-team > a > span {
	text-align: center;
	position: absolute;
	bottom: calc(100% - 0.1rem);
	left: 50%;
	transform: translate3d(-50%, 0, 0);
	background: #003c8e;
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 0.5rem;
	opacity: 0;
	transition: opacity 0.15s, transform 0.15s;
}
#kontakt-team > a.highlight > span {
	transform: translate3d(-50%, -0.3rem, 0);
	opacity: 1;
}

#kontakt-team > a > span > span {
	position: absolute;
	top: 100%;
	left: calc(50% - 1px);
	width: 2px;
	background: linear-gradient(to bottom, #003c8e, transparent);
	height: 0.7rem;
}

.smartphone-only {
	display: none;
}

div.columns {
	display: flex;
	justify-content: space-between;
}

div.columns > div {
	width: 47%;
}