@font-face {
	font-family: 'Franklin Gothic Demi';
	src: url('../webfonts/FranklinGothic-Demi.woff2') format('woff2'), url('../webfonts/FranklinGothic-Demi.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Franklin Gothic Book';
	src: url('../webfonts/FranklinGothic-Book.woff2') format('woff2'), url('../webfonts/FranklinGothic-Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--red: #E53526; /* headings */
	--orange: #D27F45;
	--grey: #464E4F; /* font */
	--grey-middle: #707070; /* borders */
	--grey-light: #F4F4F4; /* footer-bg */
	--orange-light: #FBF2EB; /* background former: FCF8F3 */
	--grey1: #8E9187; /* grey */
	--grey2: #C5C8C3; /* light grey */
	--grey3: #6B6E66; /* dark grey */

}

html {
	font-size: 17px;
	min-height: 100%;
	display: flex;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	flex-direction: column;
	font-family: 'Franklin Gothic Book', sans-serif;
	font-size: 1rem;
	line-height: 1.38;
	color: var(--grey);
	margin: 0;
	padding: 0;
	background-color: white;
	width: 100%;
	position: relative;
	height: 100%;
	overflow: auto;
	top: 0px;
	padding-top: 88px;
}
p {
	letter-spacing: 0.17px;
}
b, strong {
	font-family: 'Franklin Gothic Demi', Arial, sans-serif;
	font-weight: normal;
}
a, a:hover {
	color: var(--red);
	text-decoration: none;
	/* Only the properties that actually change. `all` also animated the old
	   border-bottom, which computes to 0px while its style is none and then
	   jumps -- that flicker under the text was the "thick line" that showed up
	   before the underline settled. */
	transition: color .2s ease-in-out, text-decoration-color .2s ease-in-out;
}
/* A real text underline rather than a border on the box. A border sits at the
   bottom of the whole inline box, below the descenders, and runs the full width
   of the box including trailing space -- heavy, and detached from the words. An
   underline follows the text, skips descenders, and can be offset. */
a:hover {
	color: var(--red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
header.top a:hover,
.news-list-item > a:hover,
.footer-fourthcol a:hover,
.foods-col a:hover,
#timeline a:hover,
/* A product tile is one big link wrapping a picture, a title and four lines of
   specification. Underlining the link underlines all of it, which is why the
   card came out ruled like a form. The card has its own hover treatment. */
.link-wrapper-product:hover {
	text-decoration: none;
}
.footer-thirdcol a,
.main-footer .copyright a {
	/*border-bottom: 1px solid transparent;*/
}
.main-footer .linkus a {
	color: var(--grey) !important;
	transition: all .2s ease-in-out;
}
.main-footer .linkus a:hover {
	color: var(--grey) !important;
	/* thickness restated: the shorthand above resets it to auto, and the
	   global rule's 1px would otherwise be lost here. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--grey);
}
.footer-thirdcol a:hover,
.main-footer .copyright a:hover {
	color: var(--grey);
	text-decoration-color: var(--grey);
}
img {
	max-width: 100%;
	height: auto;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--red);
	font-family: 'Franklin Gothic Demi', Arial, sans-serif;
	font-weight: normal;
	line-height: 1.15;
}
h1 {
	font-size: 2.35rem;
	margin-bottom: 1.1rem;
}
h2 {
	font-size: 1.82rem;
	margin-bottom: 14px;
}
h3 {
	font-size: 1.46rem;
	margin-bottom: 24px;
	color: var(--red);
}
h4 {
	font-size: 1.24rem;
	margin-bottom: 1.2rem;
	color: var(--grey);
}
h5 {
	font-size: 1.11rem;
	margin-bottom: 1.2rem;
	margin-top: 2rem;
	color: var(--grey);
}
.visible-mobile {
	display: none;
}
.relative {
	position: relative;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/*.ce-textpic {
	padding-left: 25px;
	padding-right: 25px;
}*/
.ce-gallery .ce-row {
    margin-bottom: 0;
    display: flex;
}
.ce-textpic .ce-outer {
    position: relative;
    float: none;
    right: unset;
}
.ce-gallery .ce-column {
	margin-right: 0;
}
.ce-center .ce-gallery .ce-column {
	margin: 0 auto;
	float: none;
}
.textmedia .ce-outer {
	height: 0;
	padding-bottom: 56.25%;
	/* padding-bottom: calc(56.25% + 50px); */
}
.ce-textpic .ce-inner {
    float: none;
    right: unset;
}
.textmedia .ce-inner {
    position: absolute;
	width: 100%;
	height: 100%;
}
.textmedia .ce-gallery figure {
	display: block;
}
.textmedia .ce-row,
.textmedia .ce-column,
.textmedia .video,
.textmedia .video-embed,
.textmedia iframe,
.textmedia .video-embed-item {
	height: 100%;
	width: 100%;
}
.video-embed.vimeo,
.video-embed.youtube {
	height: 0;
	padding-bottom: 56.25%;
	position: relative;
	/* padding-bottom: calc(56.25% + 50px); */
}
.video-embed.vimeo .video-embed-item,
.video-embed.youtube .video-embed-item {
	position: absolute;
	height: 100%;
	width: 100%;
	border: none;
}
figure {
    margin: 0;
}
.ce-bodytext ul {
    padding: 0;
}
.ce-bodytext li {
    list-style: none;
    padding-left: 20px;
    position: relative;
}
.ce-bodytext li::before {
    content: "-";
    position: absolute;
    left: 2px;
    top: -1px;
}
.frame-space-before-extra-large {
	margin-top: 110px;
}
@media (min-width: 1200px) {
	body .container {
		max-width: 1179px;
	}
}
@media (min-width: 992px) {
	.padding-lg-right {
		padding-right: 15px;
	}
}
@media (min-width: 1600px) {
	/*.rsSlide {
		top: -100px;
	}*/
}
@media (min-width: 1800px) {
	/*.rsSlide {
		top: -130px;
	}*/
}
.pn-row {
	display: flex;
}
.pn-container {
	width: 1120px;
	margin: 0 auto;
}
.content-element {
}
.content-element.full {
	padding-left: 0;
	padding-right: 0;
}
.content-element .content-element {
	padding-left: 0;
	padding-right: 0;
}
.content-element > div > .sg-row {
	margin-top: -20px;
	margin-bottom: -20px;
}
[class*="sg-"] {
    padding: 0 10px;
}
.sg-row {
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 !important;
}
.nopaddingtop {
	padding-top: 0 !important;
}
.nopaddingbottom {
	padding-bottom: 0 !important;
}
.no-padding {
	padding: 0 !important;
}
.bg1 {
	background-color: var(--grey-light);
}
.inner-wrapper {
	max-width: 712px;
	margin: 0 auto;
	text-align: center;
}
.bigger .inner-wrapper {
	max-width: 920px;
}
.bigger-link {
	font-size: 1.17rem;
	line-height: 2;
}
.smaller-1 {
	font-size: 14px;
	line-height: 20px;
}
.btn.btn-primary {
	border: 1px solid var(--grey1);
	border-radius: 20px;
	padding: 0 24px;
	margin-top: 20px;
	color: var(--grey1);
	line-height: 40px;
	background-color: transparent;
	transition: all .2s ease-in-out;
	width: auto;
	min-width: 130px;
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:not(:disabled):not(.disabled):active {
	border: 1px solid var(--grey1);
	color: white;
	background-color: var(--grey1);
	text-decoration: none;
	box-shadow: none;
}

.bck-dark-grey .btn.btn-primary {
	border: 1px solid white;
	border-radius: 20px;
	padding: 0 24px;
	margin-top: 20px;
	color: white;
	line-height: 40px;
	background-color: transparent;
	transition: all .2s ease-in-out;
	width: auto;
	min-width: 130px;
}
.bck-dark-grey .btn.btn-primary:hover,
.bck-dark-grey .btn.btn-primary:active,
.bck-dark-grey .btn.btn-primary:focus,
.bck-dark-grey .btn.btn-primary:not(:disabled):not(.disabled):active {
	border: 1px solid white;
	color: var(--grey1);
	background-color: white;
	text-decoration: none;
}

.bck-light-grey p {
	color: var(--grey) !important;
}

input, textarea, select, .btn:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
.ce-textpic .btn.btn-primary {
	margin-top: 7px;
	font-size: 17px;
	line-height: 1.3;
	padding: 11.5px 24px;
}
.btn.btn-primary.buttongroup-link {
	margin: 15px 0;
}

#main-navi-checkbox {
	display: none;
}
.wrap-all {
	flex: 1 0 auto;
	position: relative;
}
header.top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
	z-index: 10;
}
.header-wrapper {
	display: flex;
	align-items: center;
	height: 88px;
}
.logo {
	flex: 0 0 192px;
}
.logo-image {
	margin-right: 36px;
	width: 115.6px;
}
.navi-logo {
	display: none;
}
.main-nav {
	flex: 5 1 80%;
}
.main-nav > ul {
	display: flex;
}
.main-nav ul ul {
	pointer-events: none;
	max-height: 0;
	overflow: hidden;
	position: absolute;
	transition: all 0.4s ease;
	padding-top: 60px;
}
.main-nav ul .open ul {
	pointer-events: auto;
}
.has-submenu.open > ul,
.has-submenu.open2 > ul {
	max-height: 380px;
}
.main-nav li li {
	opacity: 0;
	transition: all 0.4s ease;
}
.main-nav li.open li,
.main-nav li.open2 li {
	line-height: 2.2;
	opacity: 1;
}
.main-nav a {
	color: var(--grey);
	padding: 4px 8px;
}
.nav-link:focus,
.nav-link:hover {
	color: var(--grey);
}
.main-nav a:hover,
.main-nav a.active,
.main-nav li.active > a {
	color: var(--orange);
	color: var(--red);
	text-decoration: none;
	border-bottom: none;
}
.main-nav ul ul li a:hover,
.main-nav ul ul li a.active,
.main-nav ul ul li.active > a {
	color: var(--grey);
	text-decoration: none;
	border-bottom: none;
}

.main-nav .has-submenu ul  a {
	color: white;
	font-weight: 400;
}
@media screen and (max-width: 992px) {
	.main-nav .has-submenu ul  a {
		color: var(--grey);
	}

}

@media screen and (max-width: 768px) {
	.haco-swiss-abstand {
		margin-bottom: 50px;
	}
}


.main-nav .has-submenu ul  li:hover a {
	color: var(--grey);
}
.subnav a {
	color: white;
}
.subnav, .searchbar {
	background-color: var(--grey1);
	position: fixed;
	top: 88px;
	left: 0;
	width: 100%;
	z-index: 8;
	transition: all 0.4s ease;
	height: 0;
}
.searchbar {
	background-color: var(--grey2);
	position: fixed;
	top: 88px;
	left: 0;
	width: 100%;
	z-index: 8;
	transition: all 0.4s ease;
	height: 0;
}
.subnav {
	z-index: 9;
}
.searchbar {
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.subnav.open,
.subnav.open2,
.searchbar.open {
	height: 288px;
}
#form_kesearch_searchfield,
body .kesearch_searchbox {
	width: 780px;
	display: flex;
	align-items: center;
}
#ke_search_searchfield_submit {
	margin-top: 17px;
}
.searchbar input,
body #ke_search_sword {
	width: 100%;
	line-height: 2rem;
	background: none;
	border: none;
	border-bottom: 1px solid var(--grey);
	padding: 14px 0 8px;
	margin: 0 0px 80px;
}
body div.kesearchbox {
	min-width: 580px;
	margin-right: 18px;
}
#ke_search_searchfield_sword {
	min-width: 580px;
}
body #ke_search_sword {
	position: relative;
	top: 0;
	width: 100%;
	border-radius: 0;
}
body .resetbutt {
	display: none;
}
.submitbutt .btn.btn-primary {
	margin-top: 40px;
	box-shadow: unset;
}
.news-list-view .btn.btn-primary {
	margin-top: 10px;
}
.submitbutt .btn.btn-primary:hover {
	background-color: white;
	color: var(--grey);
	border-color: var(--grey);
}
body .tx-kesearch-pi1 input[type="search"]:focus,
body .tx-kesearch-pi1 input[type="search"]:hover,
body .tx-kesearch-pi1 select:focus,
body .tx-kesearch-pi1 select:hover,
body .tx-kesearch-pi1 textarea:focus,
body .tx-kesearch-pi1 textarea:hover {
	box-shadow: none;
	border: none;
}

.meta-nav {
	flex: 0 0 10%;
	display: flex;
}
.search-link {
	display: inline-block;
	background: url("../Images/magnifier.svg") center center no-repeat;
	background-size: contain;
	width: 12px;
	height: 23px;
	margin-right: 30px;
}
.search-link:hover {
	background: url("../Images/magnifier-orange.svg") center center no-repeat;
	background-size: contain;
}
.current-language {
	display: inline-block;
	position: relative;
	padding-top: 1px;
	margin-right: 30px;
	cursor: pointer;
}
.language-nav {
	position: absolute;
	max-height: 0;
	overflow: hidden;
	top: 26px;
	background-color: var(--grey-light);
	border-radius: 14px;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.4s ease;
}
.current-language:hover .language-nav {
	padding: 5px 4px;
	max-height: 160px;
}

.language-nav a {
	color: var(--grey);
	display: block;
	padding: 4px 11px;
	font-size: 16px;
	border-top: 1.5px solid white;
	opacity: 0.47;
	text-align: center;
}
.language-nav a:hover {
	text-decoration: none;
}
.language-nav li:first-child a {
	border-top: none;
}
.language-nav li.active a,
.language-nav a:hover {
	opacity: 1;
}
.link-contact {
	display: flex;
	padding: 2px 10px 2px 33px;
	line-height: 22px;
	justify-content: space-between;
	position: relative;
	color: var(--grey);
}

.link-contact:hover {
	color: var(--grey);
	text-decoration: none;
}
.link-contact::before {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	content: "";
	width: 26px;
	height: 26px;
	/*background: url("../Images/rounded-arrow.svg") center center no-repeat var(--orange-light);*/
	background: url("../Images/rounded-arrow-hover.svg") center center no-repeat var(--grey1);
	background-size: 100%;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
}
.link-contact:hover::before {
	background: url("../Images/rounded-arrow-hover.svg") center center no-repeat var(--grey3);
	background-size: contain;
}
.main-footer {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.footer-wave {
	margin-top: 100px;
}

.footer-wave img {
	width: 100%;
}
.footer-wrapper {
	padding-top: 90px;

}
.main-footer .logo:hover {
	border-bottom: none;
}
.main-footer .logo-image {
	margin-bottom: 37px;
}
.padding-bottom-footer-line {
	margin-bottom: 4vw;
}
.footer-firstcol {
	font-size: 1.23rem;
	padding-right: 65px;
	line-height: 1.43;
}
.footerspecial {
	margin-top: -6px;
}
.main-footer a:hover {
	color: var(--orange);
}
.footer-secondcol p,
.footer-thirdcol p {
	font-size: 15px;
	line-height: 25px;
}
.footer-secondcol a,
.footer-thirdcol a {
	color: var(--grey);
}
.footer-secondcol strong,
.footer-thirdcol strong {
	font-size: 1rem;
}
.footer-thirdcol {
	padding-right: 0;
}
.footer-thirdcol a:hover {
	color: var(--grey);
}
.footer-thirdcol a {
	display: inline-block;
	padding: 5px 0 4px;
	line-height: 1;
}
.footer-fourthcol img {
	margin-top: 8px;
	margin-right: 10px;
	display: inline-block;
}
.copyright {
	margin-top: 20px;
	font-size: 12px;
	padding-bottom: 43px;
}
.copyright::before {
	content: "";
	display: block;
	height: 1px;
	background-color: #B0B6B7;
	margin-bottom: 16px;
}
.footer-nav ul {
	display: flex;
}
.footer-nav a {
	display: block;
	padding: 0 4px;
	color: var(--grey);
	/*border-right: 1px solid var(--grey);*/
}
.footer-nav li:last-child a {
	border-right: none;
}

.ce-maskhome {
	background-color: var(--orange-light);
}
.home-slider {
	position: relative;
	overflow: hidden;
	height: 600px;
}
.height-600 {
	height: 600px;
}
.slider-progress {
	height: 4px;
	background-color: #B5B5B5;
}
.slider-progress .progress {
	background-color: var(--orange);
	height: 4px;
	width: 0;
	border-radius: 0;
}
.royalSlider {
	width: 100%;
	background-color: var(--orange-light);
}
.capitalize a {
	text-transform: uppercase;
}
.page-1 .royalSliderWrapper {
	height: 600px;
	width: 1440px;
	width: 100% !important;
	position: absolute;
	left: calc(50% - 720px);
	left: 0px;
}
.ul-no-style ul {
	list-style-type: none;
	padding-left: 0px;
}
.ul-no-style ul li {
	list-style-type: none;
	padding-left: 0px;
	padding-bottom: 5px;
	color: var(--grey);
}
.ul-no-style ul li a {
	color: var(--grey);
}
.ul-no-style ul li a:hover {
	color: var(--grey);
}

.font-16 a, .font-16 p {
	font-size: 16px;
}
.font-14 a, .font-14 p{
	font-size: 14px;
}
@media (min-width: 1440px) {
	.page-1 .royalSliderWrapper {
		width: 100%;
		height: 41.67vw;
		left: 0;
	}
	.page-1 .royalSlider .rsImg {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media (min-width: 2600px) {
	.home-slider {
		position: relative;
		overflow: hidden;
		height: 800px;
	}
}
.royalSlider .rsOverflow {
	background-color: var(--orange-light);
	width: 100% !important;
}
.royalSlider .rsSlide {
	background-color: var(--orange-light);
}
.rsActiveSlide {
	z-index: 2;
}
.page-1 .rsDefault .rsArrowIcn {
	position: fixed;
	width: 35px;
	height: 27px;
	top: 338px;
	left: 50px;
	margin-top:0;
	margin-left: 0;
	background: none;
	border-radius: 0;
}
.page-1 .rsDefault .rsArrow {
	width: 87px;
	z-index: 9;
}
.rsDefault.rsHor .rsArrowLeft .rsArrowIcn {
	background: url("../Images/arrow-left-white.svg") center center no-repeat;
	background-size: contain;
}
.rsDefault.rsHor .rsArrowRight .rsArrowIcn {
	right: 50px;
	left: unset;
	background: url("../Images/arrow-right-white.svg") center center no-repeat;
	background-size: contain;
}
.page-38 .rsDefault.rsHor .rsArrowRight .rsArrowIcn {
	right: unset;
	left: 50%;
}
.page-38 .rsDefault .rsArrow {
	width: 58px;
}
.page-38 .rsDefault .rsArrowIcn {
	top: 50% !important;
}
.home-slide {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
	width: 100%;
}
.home-slide img {
	min-width: 100%;
	max-width: unset;
}
.home-links {
	position: absolute;
	background: url("../Images/header-home-wave.svg") 0 60px no-repeat;
	background-size: 101% auto;
	top: 402px;
	z-index: 3;
	height: 16vw;
	min-height: 200px;
	width: calc(100% + 1px);
	left: -1px;
}
@media (min-width: 2500px) {
	.home-links {
		top: 400px;
	}
}
.home-links-ul {
	display: flex;
	justify-content: center;
	list-style: none;
}
.home-links-ul a {
	font-size: 0.82rem;
	line-height: 1;
	padding: 12px;
	background-color: var(--orange-light);
	border-radius: 19px;
	margin: 0 5px;
	display: block;
}
.home-links-ul a:hover {
	color: white;
	background-color: var(--orange);
	text-decoration: none;
}
@media (min-width: 992px) and (max-width: 1080px) {
	.home-links {
		background: url("../Images/header-home-wave.svg") 0 100px no-repeat;
		background-size: 101% auto;
	}
	.home-links-ul {
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.home-links-ul a {
		margin: 0 5px 10px;
	}
}
.home-texts {
	position: relative;
	z-index: 4;
	top: 3vw;
	padding-bottom: 116px;
	text-align: center;
}
.home-texts h1,
.home-texts .home-subheader {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}
.home-texts .home-subheader {
	font-size: 1.47rem;
	letter-spacing: 0.25px;
}
.home-texts .home-links-ul {
	display: none;
}
.logohome {
	width: 140px;
	margin-top: 1.5rem;
}

.ce-masktitletext .container {
	padding-top: 60px;
	padding-bottom: 60px;
	padding-bottom: 80px;
}
.ce-masktitletext.bigger .container {
	padding-top: 50px;
	padding-bottom: 120px;
}
.ce-masktitletext.smallpaddingtop .container {
	padding-top: 50px;
}
.ce-masktitletext.smallpaddingbottom .container {
	padding-bottom: 30px;
}
.ce-masktitletext.bigger .bodytext {
	font-size: 1.18rem;
}

.ce-maskteaser {
	margin-bottom: 28px;
}
.ce-maskteaser .container {
	background-color: var(--grey2);
	color: var(--grey1);
}
/*.ce-maskteaser .container h1,.ce-maskteaser .container h2,.ce-maskteaser .container h3,.ce-maskteaser .container h4,.ce-maskteaser .container h5,.ce-maskteaser .container p {
	color: var(--grey3);
}*/
/*.ce-maskteaser .container.order-2{
	background-color: var(--grey1);
	color: white;
}*/
/*.ce-maskteaser .container.order-2 h1,.ce-maskteaser .container.order-2 h2,.ce-maskteaser .container.order-2 h3,.ce-maskteaser .container.order-2 h4,.ce-maskteaser .container.order-2 h5,.ce-maskteaser .container.order-2 p {
	color: white;

}*/
.ce-maskteaser .teaser-texts {
	align-self: center;
	text-align: center;
	padding: 50px 0;
}
.ce-maskteaser .text-wrapper {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.more-link {
	display: inline-block;
	margin-top: 24px;
	border: 1px solid var(--orange);
	border-radius: 19px;
	font-size: 14px;
	line-height: 1;
	padding: 12px;
	background-color: var(--orange-light);
}
.more-link:hover,
.more-link.news-more-link:hover {
	border: 1px solid white;
	color: white;
	background-color: var(--orange);
}
.ce-maskteaser .teaser-image {
	background: center center no-repeat;
	background-size: cover;
	min-height: 488px;
}

.deparment-row {
	display: flex;
}
.deparment-col {
	flex: 1 1 0px;
	position: relative;
}
.department-image {
	display: block;
}
.ce-maskdepartment h4 {
	padding: 0 25px;
	color: var(--orange);
}
.ce-maskdepartment .department-text {
	padding: 25px 25px 80px;
}
.ce-maskdepartment .more-link {
	margin-top: 4px;
}
.department-text .btn.btn-primary {
	position: absolute;
	bottom: 0;
}

.ce-maskstatement {
	width: 670px;
	margin: 100px auto 0 auto;
	text-align: center;
}
.statement-image {
	width: 110px;
	height: 110px;
	border-radius: 50%;
}
.statement-text {
	font-size: 1.24rem;
	margin-top: 1rem;
	margin-bottom: 1.4rem;
}
.statement-name {
	font-size: 0.88rem;
	color: var(--red);
	text-transform: uppercase;
}
.news-list-view {
	padding-top: 1.4rem;
}
.news-list-item {
	display: flex;
}

.news-list-item > a {
	display: flex;
	flex-direction: column;
	background-color: var(--grey-light);
}
.news-list-item > a:hover {
	text-decoration: none;
}
.news-list-item h4 {
	color: var(--grey);
}
.news-list-item .news-image {
	position: relative;
}
.news-list-item time {
	position: absolute;
	color: var(--grey);
	left: 40px;
	bottom: -14px;
	z-index: 2;
	background-color: white;
	display: inline-block;
	padding: 8px 22px;
	font-size: 12px;
	line-height: 1;
	border-radius: 14px;
}
.news-list-item .news-text {
	padding: 47px 18px 47px 40px;
}
.news-list-item .news-text p {
	font-size: 0.94rem;
	color: var(--grey);
	line-height: 1.5;
}
.news-list-view-all-wrapper {
	text-align: center;
	margin-top: 1rem;
}
.page-37 .news-list-view-all-wrapper {
	display: none;
}
.more-link.news-more-link {
	padding: 12px 45px;
	background-color: white;
}
.news-single .leadtext {
	font-family: 'Franklin Gothic Demi', Arial, sans-serif;
	margin-bottom: 30px;
	font-size: 1.24rem;
}
.news-detail-properties {
	margin-top: 80px;
	margin-bottom: 40px;
}
.news-single .thumbnail {
	margin-bottom: 30px;
}
.news .backlink {
	display: inline-block;
	margin-top: 20px;
}

.fullwidthimage-wrapper {
	height: 0;
	padding-bottom: 35%;
	overflow: hidden;
	position: relative;
}
.container .fullwidthimage-wrapper {
	height: unset;
	padding-bottom: 0;
}
.image-col {
	padding: 0;
}
.ce-maskfullwidthimage .image-bg {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	position: absolute;
}
.ce-maskfullwidthimage .container .image-bg {
	height: auto;
	position: static;
}
.ce-maskfullwidthimage img {
	width: 100%;
}
.ce-maskfoods .container {
	padding-bottom: 120px;
}
.ce-maskfoods .foods-col {
	padding: 8px;
	display: flex;
	position: relative;
}
.ce-maskfoods .foods-col > a {
	display: flex;
	flex-direction: column;
	background-color: white;
	padding-bottom: 108px;
}
.ce-maskfoods .foods-col.no-logo-foods > a {
	padding-bottom: 30px;
}
.ce-maskfoods a:hover {
	text-decoration: none;
}
.ce-maskfoods .foods-text {
	padding: 0 36px;
	text-align: center;
}
.ce-maskfoods .foods-text p {
	font-size: 0.94rem;
	color: var(--grey);
	line-height: 1.5;
}
.ce-maskfoods .foods-icon {
	position: absolute;
	bottom: 48px;
	left: 50%;
	transform: translateX(-50%);
}
.frame-type-mask_foods:last-child {
	margin-bottom: -190px;
}
.ce-maskteam .container {
	padding-bottom: 80px;
}
.frame-type-mask_team .container {
	padding-bottom: 40px;
}
.ce-maskteam h4 {
	margin-bottom: 2rem;
}
.team-col {
	margin-bottom: 40px;
	font-size: 0.9rem;
}
.team-col img {
	width: 123px;
	border-radius: 50%;
	margin-bottom: 20px;
}
.team-col .name {
	font-size: 1rem;
}
.ce-maskfoodssub {
	margin-bottom: -40px;
}
.ce-maskfoodssub .inner-wrapper {
	max-width: 984px;
	text-align: left;
}
.ce-maskfoodssub img {
	margin-bottom: 14px;
}
.foodssub-col {
	margin-bottom: 40px;
	padding: 0 9px;
}
.foodssub-col a {
	color: var(--grey);
	transition: all .2s ease-in-out;
}

.foodssub-col a:hover {
	color: var(--red);
}
.news-single .ce-maskfoodssub .container {
	padding: 0px;
}
.news-single .foodssub-col {
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
}
.ce-masktechnologies .inner-wrapper,
.ce-maskcountergroup .inner-wrapper {
	max-width: 884px;
}
.technologies-col {
	padding: 8px;
}
.technologies-subcols {
	background-color: var(--grey-light);
}
.technologies-subcol {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ce-maskmap {
	margin-bottom: 44px;
}
.frame-type-mask_map:last-child {
	margin-bottom: 0;
}
.ce-maskmap > .container {
	background-color: var(--grey-light);
	padding: 89px 100px 83px;
}

/* The map runs to the edge of the grey panel on three sides.
   .container carries padding: 89px 100px 83px, which is right for the text
   column and wrong for the map -- it left a grey margin above, below and to the
   right of the map instead of letting it fill its half. The negative margins
   cancel exactly those three, and padding-right: 0 removes the column's own
   gutter so nothing is left between the map and the panel edge. The left gutter
   stays: it is the gap between the text and the map.
   Desktop only. Below 992px the columns stack and the map has its own height
   and spacing further down this file. */
@media (min-width: 992px) {
	.ce-maskmap > .container .ce-map {
		/* The width has to grow, not just the margin. col-lg-6 sets width: 50%,
		   and a negative margin only lets a flex item overlap its neighbour --
		   with nothing to its right it simply left an 87px band of grey.
		   Measured: container 1179px wide, 100px padding each side, gutter 24px. */
		width: calc(50% + 100px - var(--bs-gutter-x, 24px) / 2);
		max-width: none;
		margin: -89px -100px -83px 0;
		padding-right: 0;
	}
}

.ce-maskmap h4 {
	color: var(--red);
}
.logo-map {
	margin: 12px 0 30px;
	max-height: 80px;
	width: auto;
}
.worldmap {
	height: 627px;
}
.icongroup-col {
	margin-bottom: 43px;
	text-align: center;
	padding-left: 38px;
	padding-right: 38px;
}
.ce-maskicongroup.colcount-4 .icongroup-col {
	padding-left: 24px;
	padding-right: 24px;
}
.ce-maskicongroup img {
	width: 142px;
	border-radius: 50%;
	margin-bottom: 14px;
}
.ce-maskicongroup.colcount-4 img {
	width: 124px;
	height: 124px;
}
.ce-maskcountergroup {
	padding-top: 110px;
}
.ce-maskcountergroup h2 {
	color: var(--grey);
}
.countergroup-col {
	padding: 10px;
}
.squarebox-outer {
	position: relative;
	height: 0;
	padding-bottom: 100%;
}
.squarebox {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #FCF9F5;
	padding: 9px 24px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
}
.countergroup-col:nth-child(2n+1) .squarebox {
	background-color: #FAF3EC;
}
.squarebox .counter-figure {
	font-family: 'Franklin Gothic Demi', Arial, sans-serif;
	font-size: 74px;
	line-height: 84px;
	color: var(--orange);
}

.ce-masktimeline .container {
	background-color: var(--orange-light);
	background-color: var(--grey-light);
}
.ce-masktimeline .container h3 {
	color: var(--red);
}
.ce-masktimeline h3 {
	margin-top: 87px;
	margin-bottom: 20px;
}
#timeline {
	position: relative;
	width: 983px;
	margin: 0 auto;
}
.timeline-inner-wrapper {
	width: 800px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	padding: 0;
}
#dates {
	width: 800px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
#dates li {
	list-style: none;
	float: left;
	text-align: center;
	width: 72px;
}
#dates a {
	color: var(--grey);
	display: block;
	line-height: 1.67;
}
#dates .selected {
	font-size: 1.59rem;
	line-height: 0.8;
}
#issues {
	width: 100%;
	min-height: 150px;
	overflow: hidden;
	margin: 130px 0 170px;
	padding: 0;
}
#issues li {
	height: 100%;
	list-style: none;
	float: left;
}
.timeline-inner {
	padding: 0 80px;
}
.timeline-heading {
	font-family: 'Franklin Gothic Demi', Arial, sans-serif;
	font-size: 3.9rem;

	color: var(--red);
}
.strong-red strong {
	color: var(--red);
}
.timeline-description {
	font-size: 1.1rem;
}
#timeline a:hover {
	text-decoration: none;
}
#next, #prev {
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 25px;
	height: 20px;
	background: url("../Images/arrow-left.svg") center center no-repeat;
	background-size: contain;
	z-index: 2;
}
#next {
	right: 0;
	background: url("../Images/arrow-right.svg") center center no-repeat;
	background-size: contain;
}
#prev {
	left: 0;
}

.ce-maskcompanies .inner-wrapper {
	max-width: 984px;
	text-align: left;
}
.ce-maskcompanies h4 {
	color: var(--red);
	border-bottom: 1px solid #707070;
	padding-bottom: 10px;
	margin-bottom: 75px;
}
.ce-maskcompanies .companies-col {
	padding-bottom: 80px;
}
.companies-inner-row {
	margin-left: -10px;
	margin-right: -10px;
}
.companies-inner-col {
	padding-left: 10px;
	padding-right: 10px;
}
.ce-maskcompanies .company-icon {
	display: block;
	margin-bottom: 29px;
	width: 93%;
}
.ce-maskcompanies .company-text {
	font-size: 0.82rem;
}
.frame-type-mask_companies:last-child {
	margin-bottom: -90px;
}
.ce-maskbuttongroup {
	padding: 30px 0;
}

/* Both class names on purpose. TYPO3 14 removed list_type, so a plugin is its
   own CType and the wrapper renders as content-element-powermail_pi1 with an
   empty list-type-. The old selector matched nothing after the upgrade and the
   form lost its spacing; the old one stays for anything still rendering it. */
.list-type-powermail_pi1,
.content-element-powermail_pi1 {
	padding-top: 110px;
	padding-bottom: 120px;
}
.list-type-powermail_pi1 header,
.content-element-powermail_pi1 header {
	padding-bottom: 26px;
}
.powermail_fieldset {
	width: 780px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.powermail_fieldset .row {
	min-width: 50%;
	margin-left: 0;
	margin-right: 0;
}
.powermail_fieldset .row-100 {
	min-width: 100%;
}
.powermail_fieldset .row-100 input {
	border-bottom: none;
	background-color: #e7e7e7;
	padding: 14px 0 14px 8px;
	margin-bottom: 20px;
}

.powermail_fieldset .row:nth-child(9) {
	min-width: 100%;
}
.powermail_fieldset .row:nth-child(10) {
	min-width: 100%;
}
.powermail_fieldset .row:nth-child(11) {
	min-width: 100%;
}
.powermail_fieldset.powermail_fieldset_12 .row:nth-child(9) {
    min-width: 50% !important;
}
.powermail_fieldset.powermail_fieldset_12 .row:first-child {
	margin: 0 auto;
}
/* Validation messages under a field.
   Powermail renders them as a <ul>, so out of the box they arrive with a bullet
   and the browser's list indent -- which pushed the text away from the field it
   belongs to. Flush left, no marker, and a little air above so it does not sit
   on the input's underline. */
.powermail-errors-list {
	list-style: none;
	margin: 0;
	padding: 6px 0 0;
	color: var(--red);
}
.powermail-errors-list li {
	color: var(--red);
}

input.powermail_file {
	font-size: 14px !important;
	width: 100%;
	line-height: 2rem;
	background: none;
	padding: 14px 0 8px
}
#file-upload-button {
	background-color: red !important;
}
.powermail_fieldwrap_lehrstelle input {
	padding-left: 18px !important;
	font-family: "Franklin Gothic Demi";
	color: var(--grey);
}
.powermail_fieldwrap {
	min-width: 100%;
	padding: 2px 8px;
}
.powermail_fieldset input,
.powermail_fieldset textarea {
	width: 100%;
	line-height: 2rem;
	background: none;
	border: none;
	border-bottom: 1px solid var(--grey);
	padding: 14px 0 8px;
}
.powermail_fieldset input.btn {
	background-color: transparent;
}
.powermail_fieldset textarea {
	height: 150px;
	line-height: 1.25;
}
.powermail_fieldset .row:last-child {
	justify-content: center;
	min-width: 100%;
}
.powermail_fieldwrap.powermail_fieldwrap_type_submit {
	text-align: center;
}
.tx-powermail .powermail_fieldset .parsley-errors-list.filled {
	float: none;
}
.tx-powermail select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	padding-left: 0;
	background: url('../Images/arrow-down-select-field.svg') 96% center no-repeat transparent;
	background-size: 23px auto;
	color: #7b7777;
	height: 57px;
	border-bottom: 1px solid var(--grey);
	width: 100%;
}


.list-type-ke_search_pi1 {
	padding-top: 110px;
	padding-top: 60px;
}

#kesearch_results .teaser_icon {
	display: none;
}

.has-submenu .back,
.subnavi-heading {
	display: none;
}

.companies-inner-col img[src='/fileadmin/user_upload/Logos/Girards_provisorisches_Logo_small.svg'] {
	max-width: 105px;
	height: 40px;
}

@media (max-width: 1339px) {
	.pn-container {
    	width: 920px;
	}
}
@media (max-width: 1199px) {
	#timeline,
	.timeline-inner-wrapper {
		width: 100%;
	}
	.ce-maskteaser .text-wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media (max-width: 991px) {
	.header-wrapper {
		justify-content: space-between;
	}
	header.top > .container {
		max-width: 100%;
	}
	.main-navi-label {
		display: inline-block;
		cursor: pointer;
		width: 32px;
		height: 18px;
		position: relative;
		z-index: 60;
	}
	.main-navi-label::before,
	.main-navi-label::after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		background-color: var(--grey-middle);
		height: 1px;
		top: 5px;
		left: 0;
		transition: all 0.4s ease;
	}
	.main-navi-label::after {
		top: 13px;
	}
	.main-nav {
		position: fixed;
		top: 0;
		right: 0;
		overflow: hidden;
		height: 100vh;
		background: var(--grey-light);
		z-index: 50;
		max-width: 500px;
		width: 0;
		transition: all 0.4s ease;
	}
	#main-navi-checkbox:checked ~ .wrap-all .main-nav {
		width: 100%;
	}
	#main-navi-checkbox:checked ~ .wrap-all .main-navi-label::before {
		transform: rotate(-45deg);
		height: 1px;
	}
	#main-navi-checkbox:checked ~ .wrap-all .main-navi-label::after {
		transform: rotate(45deg);
		top: 5px;
		height: 1px;
	}
	.navi-logo {
		display: inline;
		visibility: hidden;
	}
	.navi-logo-image {
		display: inline-block;
		width: 113px;
		margin-top: 20px;
		margin-left: 20px;
	}
	.main-nav > ul {
		display: block;
		margin: 40px 23px 30px;
	}
	#main-nav ul a.nav-link {
		padding: 12px 0;
		display: block;
		border-bottom: 1px solid var(--grey-middle);
	}
	#main-nav ul a.nav-link:hover {
		border-bottom: 1px solid var(--grey-middle);
	}
	.has-submenu {
		position: relative;
	}
	.main-nav .arrow {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		display: inline-block;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}
	.main-nav .arrow::before,
	.main-nav .arrow::after {
		content: "";
		position: absolute;
		right: 0;
		top: 4px;
		width: 14px;
		height: 1px;
		background-color: var(--red);
		transform: rotate(45deg);
	}
	.main-nav .arrow::after {
		transform: rotate(-45deg);
		top: 14px;
	}
	.main-nav ul .has-submenu ul {
		height: calc(100vh - 80px);
		overflow: visible;
		position: fixed;
		transition: all 0.4s ease;
		max-height: unset;
		top: 80px;
		left: 100%;
		z-index: 52;
		max-width: 500px;
		width: 100%;
		padding: 0 23px;
		background-color: var(--grey-light);
	}
	.main-nav ul .has-submenu.open > ul {
		left: calc(100% - 500px);
	}
	.main-nav li li {
		opacity: 1;
		line-height: initial;
	}
	.main-nav li.open li {
		line-height: initial;
	}
	.has-submenu .back a {
		border-bottom: none;
		position: relative;
		padding-left: 23px;
	}
	.has-submenu .back a::before,
	.has-submenu .back a::after {
		content: "";
		position: absolute;
		left: 0;
		top: 7px;
		width: 14px;
		height: 1px;
		background-color: var(--red);
		transform: rotate(-45deg);
	}
	.has-submenu .back,
	.subnavi-heading {
		display: block;
	}
	.has-submenu .back a::after {
		transform: rotate(45deg);
		top: 17px;
	}
	.subnavi-heading h4 {
		margin-top: 1.5rem;
		margin-bottom: 0;
		border-bottom: 1px solid var(--grey-middle);
		padding-bottom: 24px;
	}
	.main-nav .subnavi-heading a {
		border-bottom: none;
		padding-left: 0;
	}
	.subnav {
		display: none;
	}
	.meta-nav {
		display: none;
		margin: 0 23px;
		flex-direction: column;
	}
	.current-language:hover .language-nav {
		padding: 0;
		max-height: unset;
	}
	.meta-nav .search-link {
		border: 1px solid var(--grey);
		padding: 0 10px;
		background-size: auto 18px;
		height: 34px;
		border-radius: 17px;
		background-position: 13px center;
		transition: all 0.4s ease;
		width: 100%;
	}
	.meta-nav .search-link:hover {
		border: 1px solid var(--grey);
	}
	.meta-nav .search-link.open {
		width: 100%;
	}
	.link-contact:hover::after {
		right: unset;
		width: 56px;
	}
	.searchbar {
		display: none;
	}
	.searchbar {
		background-color: unset;
		position: static;
		height: auto;
	}
	.meta-nav .search-link .searchbar {
		display: flex;
	}
	#form_kesearch_searchfield {
		width: 100%;
	}
	#ke_search_searchfield_submit {
		display: none;
	}
	#ke_search_searchfield_sword {
		min-width: unset;
		padding: 0 0 0 32px;
		border: none;
		margin: 0;
		line-height: 34px;
		width: 100%;
	}
	.language-nav {
		position: static;
		max-height: unset;
		background: none;
		border-radius: 0;
		transform: none;
		display: flex;
		margin: 16px 0;
	}
	.main-nav .language-nav a {
		padding: 8px;
		border: none;
	}
	.main-nav .link-contact {
		padding: 4px 32px;
	}
	.link-contact::before {
		top: 2px;
	}
	.home-slider {
		height: 525px;
	}
	.deparment-row {
		flex-wrap: wrap;
	}
	.deparment-col {
		min-width: 100%;
		text-align: center;
		padding-bottom: 30px;
	}
	.ce-maskstatement {
		width: 85%;
		margin-top: 20px;
	}
	.page-1 .royalSliderWrapper {
		height: 525px;
		width: 1260px;
		left: calc(50% - 630px);
	}
	.page-1 .rsDefault.rsHor .rsArrowLeft {
		left: calc(600px - 50vw);
		top: -50px;
	}
	.page-1 .rsDefault.rsHor .rsArrowRight {
		right: calc(600px - 50vw);
		top: -50px;
	}
	.page-1 .rsDefault .rsArrowIcn {
		left: 20px;
	}
	.page-1 .rsDefault.rsHor .rsArrowRight .rsArrowIcn {
		right: 20px;
	}
	.page-1 .rsDefault .rsArrowIcn {
		top: 293px;
	}
	.home-texts {
		padding-bottom: 50px;
	}
	.home-texts h1,
	.home-texts .home-subheader {
		max-width: 90%;
	}
	.home-texts .home-subheader {
		font-size: 1.11rem;
	}
	.home-links .home-links-ul {
		display: none;
	}
	.home-texts .home-links-ul {
		display: flex;
		padding-left: 25px;
		padding-right: 25px;
		flex-wrap: wrap;
	}
	.home-links-ul {
		margin: 0 0 20px;
		padding: 0;
		text-align: center;
	}
	.home-links-ul a {
		background-color: white;
		display: inline-block;
		margin: 5px;
	}
	.ce-maskteaser {
		margin-bottom: 20px;
	}
	.ce-maskteaser .teaser-image {
		min-height: 0;
		padding-bottom: 60% !important;
	}

	.ce-maskteaser .teasertext {
		padding: 0 25px;
	}
	.list-type-news_pi1 .frame-space-before-extra-large {
		margin-top: 50px;
	}
	.news-list-view {
		padding-top: .7rem;
	}
	.news-list-view {
		padding-left: 0;
		padding-right: 0;
	}
	.news-list-view > .row {
		margin: 0;
	}
	/*.news-list-item {
		padding-left: 0;
		padding-right: 0;
	}*/
	/*.news-list-item {
		padding-bottom: 22px;
	}*/
	.news-list-item:last-child {
		padding-bottom: 0;
	}
	.news-image img {
		width: 100%;
	}
	.news-list-view-all-wrapper {
		display: none;
	}
	.bg1 {
		max-width: 100%;
	}
	.frame-type-mask_foods:last-child {
		margin-bottom: -130px;
	}
	.ce-masktitletext .container {
		padding-top: 40px;
		padding-bottom: 66px;
	}
	.ce-maskdepartment .container {
		padding: 0;
		margin: 0;
		max-width: 100%;
	}
	.ce-maskdepartment .row {
		margin: 0;
	}
	.ce-maskdepartment .col-12 {
		padding: 0;
	}
	.ce-maskdepartment .department-text {
		padding: 25px;
	}
	.department-text .btn.btn-primary {
		position: static;
	}
	.footer-wave {
		margin-top: 50px;
	}
	.main-footer .logo-image {
		margin-bottom: 70px;
		margin-right: 0;
	}
	.footer-firstcol {
		margin-bottom: 35px;
	}
	.copyright {
		margin-top: 30px;
	}
	.ce-maskmap > .container {
		padding: 50px 15px 0;
	}
	.ce-map {
		height: 400px;
		margin-top: 20px;
	}
	.ce-maskcountergroup {
		padding-top: 50px;
	}
	#issues {
		margin: 100px 0 120px;
	}
	.ce-maskfullwidthimage .container {
		margin: 0;
		padding: 0;
		max-width: unset;
	}
	.ce-maskfullwidthimage .row {
		margin-left: 0;
		margin-right: 0;
	}
	.fullwidthimage-wrapper {
		padding-bottom: 50%;
	}
	.powermail_fieldset {
		width: 100%;
	}
	.powermail_fieldset .row {
		min-width: 100%;
	}
	.list-type-powermail_pi1 {
		padding-top: 70px;
		padding-bottom: 70px;
	}


}
@media (max-width: 767px) {
	.ce-maskteaser .teaser-texts {
		order: 3 !important;
	}
	.ce-masktitletext .container {
		padding-top: 30px;
		padding-bottom: 40px;
	}
	.ce-masktitletext .inner-wrapper h2 {
		margin-bottom: 0px;
	}
	h1 {
		font-size: 1.76rem;
	}
	h2 {
		font-size: 1.47rem;
		margin-bottom: 30px;
	}
	h3 {
		font-size: 1.24rem;
	}
	.bigger-link {
		font-size: 1rem;
	}
	.ce-textpic {
		padding-bottom: 40px;
	}
	.main-footer {
		text-align: center;
	}
	.footer-firstcol {
		font-size: 1rem;
	}
	.footer-firstcol a {
		display: block;
		margin-top: -15px;
	}
	.footerspecial {
		margin-top: 25px;
	}
	.footer-firstcol {
		padding-right: 25px;
		padding-left: 25px;
	}
	.footer-secondcol,
	.footer-thirdcol,
	.footer-fourthcol {
		margin-bottom: 30px;
	}
	.ce-maskfoods .container,
	.ce-maskfoodssub .container {
		padding: 0;
	}
	.ce-maskfoods .row,
	.ce-maskfoodssub .row {
		margin-left: 0;
		margin-right: 0;
	}
	.ce-maskfoods .foods-col,
	.ce-maskfoodssub .foodssub-col {
		padding: 0;
	}
	.frame-type-mask_foods:last-child {
		margin-bottom: 0;
	}
	.ce-maskteam {
		font-size: 0.82rem;
	}
	.ce-maskteam .container {
		padding-bottom: 20px;
	}
	.team-col img {
		width: 101px;
	}
	.ce-maskfoodssub .inner-wrapper {
		text-align: left;
	}
	.foodssub-col {
		margin-bottom: 25px;
	}
	.ce-maskfoodssub img {
		margin-bottom: 10px;
	}
	.foodssub-text {
		padding: 0 15px;
	}
	.ce-masktitletext.smallpaddingbottom .container {
		padding-bottom: 15px;
	}
	.ce-maskmap {
		margin-bottom: 20px;
	}
	.fullwidthimage-wrapper {
		padding-bottom: 75%;
	}
	.squarebox-outer {
		height: auto;
		padding-bottom: 0;
	}
	.squarebox {
		position: static;
	}
	.ce-masktechnologies .container {
		padding-left: 0;
		padding-right: 0;
	}
	.ce-masktechnologies .row {
		margin-left: 0;
		margin-right: 0;
	}
	.technologies-col {
		padding: 0;
	}
	.technologies-subcol {
		padding: 0;
	}
	.technologies-subcol-text {
		min-height: 68px;
	}
	.technologies-col:nth-child(2n) .technologies-subcol {
		border-left: 3px solid white;
	}
	.technologies-col:nth-child(2n+1) .technologies-subcol {
		border-right: 3px solid white;
	}
	.technologies-col .technologies-subcol-text {
		border-bottom: 6px solid white;
	}
	.ce-maskteaser .teaser-texts {
		padding: 50px 15px;
	}
	body .kesearch_searchbox {
		flex-direction: column;
	}
	body div.kesearchbox {
		min-width: 100%;
		margin-right: 0;
	}
}
@media (max-width: 575px) {
	body {
		word-wrap: break-word;
	}
	.footer-wrapper {
		flex-direction: column;
	}
	.page-1 .rsDefault .rsArrowIcn {
		top: 263px;
	}
	.statement-image {
		width: 84px;
		height: 84px;
	}
	.home-slider {
		height: 400px;
	}
	.page-1 .royalSliderWrapper {
		height: 400px;
		width: 960px;
		left: calc(50% - 480px);
	}
	.page-1 .rsDefault.rsHor .rsArrowLeft {
		left: calc(520px - 50vw);
		top: -80px;
	}
	.page-1 .rsDefault.rsHor .rsArrowRight {
		right: calc(520px - 50vw);
		top: -80px;
	}
	.home-links {
		top: 302px;
	}
	.home-links-ul li {
		min-width: 100%;
	}
	.home-texts {
		top: 8vw;
		padding-bottom: calc(8vw + 40px);
	}
	.ce-maskcompanies .companies-col {
		padding-bottom: 40px;
	}
	.company-icon {
		margin-top: 20px;
	}
	.timeline-inner {
		padding: 0 50px;
	}
	#issues {
		height: auto;
		margin-bottom: 80px;
	}
}
a.no-link:hover {
	text-decoration: none;
}
@media (max-width: 500px) {
	.navi-logo {
		visibility: visible;
	}
	.main-nav ul .has-submenu.open > ul {
		left: 0;
	}
}
.bck-dark-grey {
	background-color: var(--grey1) !important;
}
.bck-dark-grey p {
 color: white !important;
}
.bck-light-grey {
	background-color: var(--grey2) !important;
	color: var(--grey);
}
.bck-dark-grey .foods-text h5 {
	color: white;
}

.ce-maskteaser .bck-very-light-grey.container {
	background-color: var(--grey-light);
	color: var(--grey) !important;
}
.weight-300 {
	font-weight: 300;
	font-family: "Franklin Gothic Book";
	color: var(--grey);
}
.accordion-button h4 {
	color: var(--orange);
}
.accordion-button:focus,.accordion-button:active {
	border-color: transparent !important;
}
.accordion-button:focus,.accordion-button:focus {
	border-color: transparent !important;
}
.accordion-button:not(.collapsed) {
	color: var(--grey);
	background-color: transparent;
}
.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	transform: rotate(180deg);
}
button:focus:not(:focus-visible) {
	outline: none !important;
}
.accordion-button:focus {
	border-color: transparent;
	box-shadow: 0 0 0 0.25rem transparent;
}
.accordion-item {
	background-color: var(--grey-light) !important;
}
.accordion-button {
	background-color: var(--grey-light) !important;
}
.accordion-button {
	padding: 1.5rem 2.25rem;
}
.accordion-body {
	padding: 1.5rem 2.25rem;
}
.accordion-body .container,
.accordion-body .container-fluid
{
	padding: 0px;
}
.accordion-body .list-type-powermail_pi1 {
	padding-top: 60px;
	padding-bottom: 20px;
}
.accordion-body .powermail_fieldset {
	width: 100%;
}
.powermail_form_4 input,
.powermail_form_4 textarea {
	padding-left: 18px;
}
body.layout__pagets__enjoy,
body.parent-page-147 {
	top: 0px;
}
.extbase-debugger {
	overflow: visible !important;
}
.news-list-item a {
	color: white;
	background-color: var(--grey1);
}
.news-list-item:nth-child(2n) a {
	background-color: var(--grey2);
	color: var(--grey);
}
.news-list-item p,
.news-list-item a h1,
.news-list-item a h2,
.news-list-item a h3,
.news-list-item a h4 {
	color: white;
}
.news-list-item .news-text p {
	color: white;
}
.news-list-item:nth-child(2n) .news-text p {
	color: var(--grey);
}
.news-list-item:nth-child(2n){
	color: var(--grey);
}
.news-text p {
	color: white;
}

.news-list-item:nth-child(2n) a p,
.news-list-item:nth-child(2n) a h1,
.news-list-item:nth-child(2n) a h2,
.news-list-item:nth-child(2n) a h3,
.news-list-item:nth-child(2n) a h4 {
	color: var(--grey);
}
h4 strong {
	color: var(--red);
}
.subtitle-margin p {
	margin-bottom: 5px !important;
}
.remove-filter {
	border-bottom: 1px solid var(--red);
}
input.zipfilter {
	border-radius: 30px;
	border: 1px solid var(--grey);
	padding: 5px 35px 5px 10px;
}
.ce-boxlist-multicol-container {
	margin-top: 50px;
	margin-bottom: 50px;
}
.ce-boxlist-multicol-item-wrap {
	background-color: var(--grey-light);
}
.ce-boxlist-multicol-text {
	padding: 20px;
}
.ce-boxlist-multicol-text-wrap p,
.ce-boxlist-multicol-text-wrap p a {
	font-size: 1em;
}
.ce-boxlist-multicol-text-wrap p {
	margin-bottom: 0px;
}
.ce-boxlist-multicol-text-wrap p a {
	border-bottom: 1px solid transparent;
}
.selectregions {
	border: none !important;
	margin-top: 5px;
	border-radius: 5px !important;
}
ul.filter-container ul.selectregions a {
	background: none !important;
}
ul.filter-container ul.selectregions li:first-of-type
{
	padding-top: 11px;
}
ul.filter-container ul.selectregions li:last-of-type {
	padding-bottom: 11px;
}
.reset-zip {
	right: 25px;
	display: none;
	top: 7px;
	font-size: 14px;
	transition: all .2s ease-in-out;
}
.reset-zip-region {
	right: 45px;
	display: none;
	top: 7px;
	font-size: 14px;
	transition: all .2s ease-in-out;
}
li.region-search {
	transition: all .2s ease-in-out
}
.countries.gruppe {
	border: none;
}
.disttypes.gruppe {
	border: none;
}
li.region-search:hover .reset-zip-region,
li.region-search:active .reset-zip-region,
li.region-search:focus .reset-zip-region
{
	display: block;
}
li.zipfilter {
	transition: all .2s ease-in-out
}
li.zipfilter:hover .reset-zip,
li.zipfilter:active .reset-zip,
li.zipfilter:focus .reset-zip
{
	display: block;
}
.team-col h5 p {
	height: 44px;
}
.bck-dark-grey h3,
.bck-dark-grey h2,
.bck-dark-grey h1
{
	color: white !important;
}
.bck-light-grey h1,
.bck-light-grey h2,
.bck-light-grey h3 {
	color: var(--grey) !important;
}
.button-jubi img{
	border-radius: 50%;
}
.button-jubi {
	position: absolute;
	background-color: transparent;
	left: 25px;
	top:25px;
	right: unset;
	width: 18vw;
	height: 18vw;
	opacity: 1;
	transition: all .2s ease-in-out;
}
@media screen and (max-width: 560px) {
	.button-jubi {
		width: 30vw;
		height: 30vw;
	}
}
.button-jubi:hover {
	transform: scale(1.05);
}
.button-jubi:hover,
.button-jubi a:hover
{
	opacity: 1;
}
.vimeo-wrapper video {
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
}

@media screen and (max-width: 768px){
	.pick-me-up {
		margin-top: 0px !important;
	}
}
.f3-widget-paginator {
	display: flex;
	justify-content: center;
}
.f3-widget-paginator li {
	padding-left: 5px;
	padding-right: 5px;
}
/* --- Live search suggestions ------------------------------------------------
   Progressive enhancement over the existing ke_search form; without JavaScript
   none of this renders and the form submits to the results page as before. */
#form_kesearch_searchfield {
	position: relative;
}
.search-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: 26rem;
	overflow-y: auto;
	background: #fff;
	border: 1px solid rgba(70, 78, 79, 0.15);
	border-radius: 2px;
	box-shadow: 0 6px 18px rgba(70, 78, 79, 0.12);
}
.search-suggest__item {
	display: block;
	padding: 0.6rem 0.85rem;
	border-bottom: 1px solid rgba(70, 78, 79, 0.08);
	color: #464e4f;
	text-decoration: none;
}
.search-suggest__item:last-child {
	border-bottom: 0;
}
.search-suggest__item:hover,
.search-suggest__item.is-active {
	/* The red line under the whole item used to come from the global a:hover
	   border-bottom. Links carry a text underline now, which follows the words
	   rather than the box, so this row states its own line. */
	border-bottom-color: var(--red);
	/* No grey fill: the red line and the red hit colour carry the state. */
	color: #464e4f;
	text-decoration: none;
}
.search-suggest__item:hover .search-suggest__title,
.search-suggest__item.is-active .search-suggest__title {
	/* The red line under the whole item carries the state; the title stays plain.
	   (This rule used to declare an underline and then cancel it two lines
	   later -- leftovers from an earlier iteration, removed.) */
	text-decoration: none;
}
.search-suggest__item:last-child:hover,
.search-suggest__item:last-child.is-active {
	/* The last item drops its separator, so hover has to bring one back --
	   otherwise it is the one row that does not react. */
	border-bottom: 1px solid var(--red);
}
.search-suggest__title {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
}
.search-suggest__teaser {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #7b7777;
}
.search-suggest__empty {
	padding: 0.7rem 0.85rem;
	font-size: 0.88rem;
	color: #7b7777;
}

/* --- Search panel -----------------------------------------------------------
   The dropdown layout is deliberately kept as it was: field where it always
   sat, results below it. The only real problem was that the panel was a fixed
   288px strip with overflow:hidden, so the list was rendered and then clipped.
   The panel now fills the viewport on white and the list scrolls inside itself.

   An earlier attempt rebuilt the form as a grid to make the list a flex/grid
   child that could stretch. That fought the existing flex rules and ended up
   overlapping the field with the results -- hence going back to the absolutely
   positioned dropdown, which needs nothing from the form's own layout. */
.searchbar {
	background-color: #fff;
}
/* Way out of the panel.
   Only visible while it is open: the button lives in .searchbar permanently, and
   .searchbar is part of the header the rest of the time. */
.searchbar__close {
	display: none;
}
.searchbar.open .searchbar__close {
	/* A flex sibling of the form rather than pinned to the panel. .searchbar
	   centres its children, so the button lands just past the submit and stays
	   with the form however wide the window gets -- against the panel's right
	   edge it ended up alone in the far corner, half a screen from the field it
	   belongs to. */
	display: block;
	flex: 0 0 auto;
	align-self: flex-start;
	/* Same offset the submit carries, so the two line up. */
	margin-top: 17px;
	margin-left: 24px;
	/* Cancels the button's own width and gap out of the centring, so the form
	   stays exactly where it was and the button hangs beside it. Without this
	   the whole group centres and the search field shifts left by half. */
	margin-right: -56px;
	width: 32px;
	height: 32px;
	padding: 4px;
	border: 0;
	background: none;
	color: #464e4f;
	cursor: pointer;
	transition: color .2s ease-in-out;
}
.searchbar.open .searchbar__close:hover {
	color: var(--red);
}
.searchbar__close svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

.searchbar.open {
	height: calc(100vh - 88px);
	/* The panel scrolls nothing itself; the list below does. */
	align-items: flex-start;
	padding-top: 96px;
}
.search-suggest {
	/* Room for the field above and a little breathing space at the bottom. */
	max-height: calc(100vh - 260px);
	overflow-y: auto;
	/* Keeps the wheel in the list once it reaches an end instead of handing the
	   scroll to the page behind the panel. */
	overscroll-behavior: contain;
	border: 0;
	border-top: 1px solid rgba(70, 78, 79, 0.15);
	border-top: none;
	border-radius: 0;
	box-shadow: none;
	background: #fff;
}
.search-suggest__count {
	/* Sticky and opaque: the bar stays put while results scroll underneath it
	   rather than sliding away with them. */
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0.6rem 0 0.5rem;
	background: #fff;
	font-size: 0.85rem;
	color: #7b7777;
}
.search-suggest__item {
	padding: 0.8rem 0;
}
.search-suggest__title {
	font-size: 1.02rem;
}
.search-suggest__more {
	display: block;
	padding: 0.9rem 0;
	font-weight: 700;
	color: var(--red);
	text-decoration: none;
}
.searchbar.open input {
	margin-bottom: 8px;
}

/* The page behind a fixed, full-height panel must not scroll, or the wheel
   moves the wrong thing as soon as the pointer leaves the list. */
body.search-open {
	overflow: hidden;
}

@media (max-width: 768px) {
	.searchbar.open {
		padding-top: 40px;
	}
	.search-suggest {
		max-height: calc(100vh - 200px);
	}
	#ke_search_searchfield_sword,
	body div.kesearchbox {
		min-width: 0;
	}
}

/* --- One look for both result lists -----------------------------------------
   The AJAX panel and /suche render from different templates -- ke_search's
   result list versus the JSON the panel builds -- but a visitor sees one
   search. These rules put the classic list on the panel's typography and
   spacing, and the panel on ke_search's red .hit highlighting, so the two are
   indistinguishable apart from where they appear. */
#kesearch_results .result-list-item {
	margin: 0;
	padding: 0.8rem 0;
	border-bottom: 1px solid rgba(70, 78, 79, 0.08);
}
#kesearch_results .result-list-item:last-child {
	border-bottom: 0;
}
#kesearch_results .result-list-item .result-number {
	/* The panel does not number its results; neither should this. */
	display: none;
}
#kesearch_results .result-list-item .result-title,
#kesearch_results .result-list-item .result-title a {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: #464e4f;
	text-decoration: none;
}
#kesearch_results .result-list-item .result-teaser {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.9rem;
	line-height: 1.35;
	color: #7b7777;
}

/* Same highlight in both lists. ke_search ships plain `red`; this is the brand
   red the rest of the site uses.
   The leading `body` is not decoration: ke_search's own stylesheet is merged
   after this one, and its rule has identical specificity, so without the extra
   element it would win the tie and the two lists would highlight in two
   different reds. Everything else here is scoped by #kesearch_results, which
   already outweighs it. */
body .tx-kesearch-pi1 #kesearch_results .result-list-item .hit,
.search-suggest .hit {
	color: var(--red);
	font-weight: 700;
}

/* --- Filtry dystrybutorów: strzałka sugerująca rozwijaną listę ------------- */
/* The filter labels are plain anchors, so nothing signalled that they open a
   list. The arrow is drawn in CSS rather than placed in the markup on purpose:
   dynamicSelects replaces the label's entire innerHTML with the chosen option's
   the moment you pick one, which wiped an inline SVG on the first click. A
   pseudo-element is out of that reach.
   currentColor keeps it in step with the label's own colour. */
.distribution-filter .label {
	position: relative;
	padding-right: 2em;
}
.distribution-filter .label::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1em;
	width: 0.5em;
	height: 0.5em;
	margin-top: -0.35em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
	            margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
/* Open state is a.label.active -- that is the class the script toggles, and the
   same one sortiment.css uses to drop the list down (ul.filter-container li >
   a.active + ul). The earlier rule keyed on li.open, which nothing ever sets,
   so the arrow never turned.
   Rotating from 45deg to -135deg is the same quarter turn either way, so the
   arrow eases open and eases back rather than snapping. */
.distribution-filter .label.active::after {
	transform: rotate(-135deg);
	margin-top: -0.15em;
}

/* Wybrana opcja w filtrach dystrybutorów.
   Nothing marked the current choice, so an opened list gave no clue which entry
   was active -- including the Switzerland preselection, which is the whole point
   of preselecting it. The label already shows the value; this makes the entry
   itself recognisable when the list is open. */
.distribution-filter .gruppe .option.active {
	color: var(--red);
	font-weight: 700;
}

/* --- Ergebnisseite /suche ----------------------------------------------------
   Brought in line with the live suggestion panel above: same narrow column,
   same type sizes, same hairline separators. ke_search's own stylesheet is
   merged after this file, hence the body prefix on every selector.

   The field and the button used to fight each other inside the flex row --
   the input carried margin-bottom: 80px while the button carried
   margin-top: 40px, which is what pushed the button off to the lower right.
   Both are neutralised here and the row simply aligns on its baseline. */
/* The page is two content elements, not one: pi1 carries the "Suche" heading
   with the form, pi2 the "Suchresultate" heading with the list. Centring the
   plugin alone would have left both headings hanging on the left, so the width
   and the centring sit on the elements themselves and the plugin fills them. */
body .content-element-ke_search_pi1,
body .content-element-ke_search_pi2 {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}
body .tx-kesearch-pi1 {
	max-width: none;
}
body .tx-kesearch-pi1 .kesearch_searchbox {
	width: 100%;
	align-items: flex-end;
	gap: 1rem;
}
body .tx-kesearch-pi1 div.kesearchbox {
	min-width: 0;
	flex: 1 1 auto;
	margin-right: 0;
}
body .tx-kesearch-pi1 #ke_search_sword {
	margin-bottom: 0;
}
body .tx-kesearch-pi1 .submitbutt {
	flex: 0 0 auto;
}
body .tx-kesearch-pi1 .submitbutt .btn.btn-primary {
	margin-top: 0;
}

/* Result list: the suggestion panel's vocabulary, one column wide. */
body .tx-kesearch-pi1 #kesearch_results {
	margin-top: 2rem;
}
body .tx-kesearch-pi1 #kesearch_results .result-list-item {
	margin: 0;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(70, 78, 79, 0.08);
}
body .tx-kesearch-pi1 #kesearch_results .result-list-item:last-child {
	border-bottom: 0;
}

/* Hover marks the whole record, as it does in the panel.
   The panel's item is itself the anchor, so the global `a:hover` rule (near the
   top of this file) draws its red line under the entire record. Here the anchor
   wraps the title alone, so that same rule drew a full-width line under the
   title while a local text-decoration added a second, text-width one on top of
   it -- two lines for one hover. The anchor's line is suppressed and the red
   moved onto the row's own separator, so both lists answer the pointer the same
   way.
   These carry the `body .tx-kesearch-pi1` prefix on purpose: the block above
   re-declares border-bottom at that specificity, so a rule scoped only by
   #kesearch_results loses to it and the row never turns red. */
body .tx-kesearch-pi1 #kesearch_results .result-list-item .result-title a:hover {
	/* The row draws the line; the title must not draw a second one. Was
	   border-bottom while links used a border. */
	text-decoration: none;
}
body .tx-kesearch-pi1 #kesearch_results .result-list-item:hover {
	border-bottom-color: var(--red);
}
body .tx-kesearch-pi1 #kesearch_results .result-list-item:last-child:hover {
	/* The last row drops its separator, so hover has to bring one back. */
	border-bottom: 1px solid var(--red);
}

/* The whole record is the link, as it is in the panel.
   ke_search's getTitle() always returns a ready-made <a>, so wrapping the row
   in a second anchor would nest links -- invalid HTML that browsers break
   apart. Instead the title's own anchor is stretched over the row with a
   transparent pseudo-element: one real link, no template override, and the
   pointer cursor, keyboard focus, middle-click and status-bar URL all keep
   working because it is still that anchor being clicked.
   The trade-off is that text inside a row can no longer be selected with the
   mouse -- the same as in the panel, where the item is itself an anchor. */
body .tx-kesearch-pi1 #kesearch_results .result-list-item {
	position: relative;
}
body .tx-kesearch-pi1 #kesearch_results .result-list-item .result-title a::after {
	content: '';
	position: absolute;
	inset: 0;
}
/* The panel numbers nothing, and a running count adds no information here. */
body .tx-kesearch-pi1 #kesearch_results .result-number {
	display: none;
}
body .tx-kesearch-pi1 #kesearch_results .result-title a {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	color: #464e4f;
	text-decoration: none;
}
body .tx-kesearch-pi1 #kesearch_results .result-teaser {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #7b7777;
}

/* --- Blätterung auf /suche ---------------------------------------------------
   ke_search renders the same Bootstrap markup as the Sortiment pager
   (.pagination / .page-item / .page-link), so this is that pager's vocabulary
   applied here: grey outlined pills, the current page red on its pale red
   ground, and the four navigation arrows without a border. Left alone it was
   Bootstrap's default blue block, which appears nowhere else on the site. */
body .kesearch_pagebrowser .pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-left: 0;
}
body .kesearch_pagebrowser .pagination .page-item {
	margin-left: 5px;
	margin-right: 5px;
}
body .kesearch_pagebrowser .pagination .page-link {
	border-color: var(--grey);
	border-radius: 30px;
	color: var(--grey);
	background-color: transparent;
	box-shadow: none;
}
body .kesearch_pagebrowser .pagination .page-link:hover {
	background-color: var(--grey);
	color: #fff;
}
body .kesearch_pagebrowser .pagination .active > .page-link,
body .kesearch_pagebrowser .pagination .page-link.active {
	z-index: 3;
	color: var(--red);
	background-color: #FFF6F5;
	border-color: var(--red);
}
body .kesearch_pagebrowser .pagination .active > .page-link:hover,
body .kesearch_pagebrowser .pagination .page-link.active:hover {
	background-color: var(--red);
	color: #fff;
}
/* ke_search renders four arrows: « first, ‹ previous, › next, » last. The
   Sortiment pager has only the two single ones, and the doubled pair read as
   noise next to them, so first and last are dropped. The li goes with the
   anchor -- hiding only the anchor would leave its margin behind as a gap. */
body .kesearch_pagebrowser .pagination .page-item:has(> [title="first"]),
body .kesearch_pagebrowser .pagination .page-item:has(> [title="last"]) {
	display: none;
}
body .kesearch_pagebrowser .pagination .page-link[title="first"],
body .kesearch_pagebrowser .pagination .page-link[title="last"] {
	display: none;
}

/* ‹ and › -- no border, just the glyph, as in Sortiment. */
body .kesearch_pagebrowser .pagination .page-link.prev,
body .kesearch_pagebrowser .pagination .page-link.next {
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0.1em 0.35em;
	background-color: transparent;
}
body .kesearch_pagebrowser .pagination .page-link.prev:hover,
body .kesearch_pagebrowser .pagination .page-link.next:hover {
	color: var(--grey);
	background-color: transparent;
}
body .kesearch_pagebrowser .pagination .page-item.disabled .page-link {
	opacity: 0.35;
}

/* The count line above it, in the teaser's tone rather than body copy. */
body #kesearch_pagebrowser_bottom,
body #kesearch_pagebrowser_top {
	margin-top: 1.75rem;
}
body #kesearch_pagebrowser_bottom .result_txt,
body #kesearch_pagebrowser_top .result_txt {
	text-align: center;
	font-size: 0.82rem;
	color: #7b7777;
	margin-bottom: 0.6rem;
}