:root {
	--red: #ff0000;
	--lightred: #fb7272;
	--lightgreen: #21d785;
	--lightestgray: #f5f5f5;
	--lightgray: #f0f0f0;
	--mediumlightgray: #b0b0b0;
	--mediumgray: #808080;
	--mediumdarkgray: #606060;
	--darkgray: #303030;
	--lbsred: #ee0000;
	--lbsblue: #93c5d5;
	--lbsyellow: #f8ce41;
	--lbsgreen: #a2d16b;
	--lbsorange: #faa068;
	--lightblue: #74bbd5;
	--nicegreen: #a6cd86;
	--disabled: 0.3
}

body,
html {
	width: 100%;
	height: 100%
}

html {
	font-size: 16px
}

html * {
	box-sizing: border-box
}

body {
	-webkit-tap-highlight-color: transparent;
	font-family: LBSThesis, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 300;
	font-style: normal;
	font-kerning: normal;
	font-synthesis: none;
	font-variant-numeric: proportional-nums;
	-webkit-font-smoothing: antialiased;
	color: #000;
	background: #fff
}

body.modal-open {
	overflow: hidden
}

h1 {
	font-size: 2.2rem;
	font-weight: 300;
	line-height: 2.7rem;
	letter-spacing: -.005em;
	margin-bottom: 1rem
}

h2 {
	font-size: 2rem;
	font-weight: 300;
	line-height: 2.5rem;
	letter-spacing: -.005em;
	margin-bottom: 1rem
}

h3 {
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 2rem;
	letter-spacing: -.01em;
	margin-bottom: 1rem
}

h4 {
	font-size: 1rem;
	font-weight: 700
}

strong {
	font-weight: 700
}

a {
	color: inherit;
	-webkit-touch-callout: none !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	text-decoration: none
}

p {
	margin: 0 0 1em
}

p.bullet {
	font-weight: 700;
	padding-left: 1em;
	color: #000;
	border-left: 1px solid var(--lightred)
}

p.large {
	font-size: 1.5em
}

p.overline {
	margin-bottom: 4em;
	font-weight: 700;
	font-size: .8em;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mediumdarkgray)
}

.align-center {
	text-align: center
}

.hyphenate {
	hyphens: auto;
	-webkit-hyphens: auto
}

button {
	padding: .5em .75em;
	margin: 0;
	font-family: LBSThesis, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--mediumdarkgray);
	border: none;
	border-radius: 3px;
	cursor: pointer
}

a.cta {
	padding: .5em .75em;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--lbsred);
	border: none;
	border-radius: 3px;
	cursor: pointer
}

a.button.white {
	display: inline-block;
	padding: .5em .75em;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #000;
	background-color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer
}

@media screen and (max-width:600px) {
	p.large {
		font-size: 1.3em
	}
}

input[type=date],
input[type=email],
input[type=month],
input[type=password],
input[type=tel],
input[type=text],
select {
	-webkit-appearance: none;
	height: 44px;
	margin: 0 0 .5em;
	padding: 0 .5em;
	color: #000;
	background: #fff;
	border: 1px solid #888;
	border-radius: 3px;
	font-family: LBSThesis, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700
}

input[type=text]:disabled,
select:disabled {
	opacity: var(--disabled)
}

input.alignright {
	text-align: right
}

input[type=submit] {
	-webkit-appearance: none;
	margin: 0;
	padding: .5em .75em;
	color: #fff;
	background: var(--mediumdarkgray);
	border: none;
	border-radius: 3px;
	font-family: LBSThesis, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer
}

input[type=date]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=password]:focus,
input[type=submit]:focus,
input[type=tel]:focus,
input[type=text]:focus,
select:focus {
	outline: 0;
	outline: 2px solid #3378f6;
	outline: 2px solid -webkit-focus-ring-color
}

div.checkbox {
	display: flex;
	margin-bottom: 20px;
	outline: 0
}

div.checkbox>input {
	display: none
}

div.checkbox label {
	position: relative;
	display: inline-block;
	padding-left: 40px;
	padding-top: 5px;
	line-height: 20px;
	cursor: pointer;
	outline: 0
}

div.checkbox label:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	background: #fff;
	border-radius: 3px;
	border: 1px solid #888
}

div.checkbox:focus label:before {
	outline: 2px solid #3378f6;
	outline: 2px solid -webkit-focus-ring-color
}

fieldset legend {
	visibility: hidden
}

div.checkbox>input:checked+label:before {
	content: "\63";
	font-family: lbsicons !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--mediumgray)
}

div.checkbox>input+label a {
	text-decoration: underline
}

form>p {
	margin-top: .5em;
	margin-bottom: .5em
}

div.select-wrapper {
	position: relative
}

div.select-wrapper:before {
	content: '\61';
	position: absolute;
	right: .5em;
	top: 0;
	font-size: 20px;
	line-height: 40px;
	font-family: lbsicons !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	pointer-events: none
}

section {
	position: relative
}

section .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: url(/images/hero_image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: -1
}

section .bg .colorize {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #02364e;
	opacity: .4
}

section .fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	padding-top: 6rem;
	padding-bottom: 6rem
}

.fullwidth {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-top: 6rem;
	padding-bottom: 6rem
}

.content {
	width: 90%;
	max-width: 800px;
	margin: 0 auto
}

.content-wrapper {
	width: 90%;
	max-width: 400px
}

@media screen and (max-width:720px) {
	.content-wrapper {
		max-width: none
	}
}

.content-box {
	position: relative;
	background-color: rgba(255, 255, 255, .75);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px)
}

.content-padding {
	padding: 100px 30px 50px
}

.content-box .logo {
	position: absolute;
	top: 36px;
	left: 20px
}

.columns-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2rem;
	row-gap: 1rem
}

.columns-2+h3 {
	margin-top: 3em
}

.columns-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 2rem;
	row-gap: 1rem
}

@media screen and (max-width:720px) {

	.columns-2,
	.columns-3 {
		display: block
	}

	.columns-2 .column:nth-child(2) {
		margin-top: 4em
	}
}

#menu-toggle {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	padding: 16px;
	border: none;
	font-size: 24px;
	color: #fff;
	background: 0 0;
	cursor: pointer;
	transition: all .2s ease-in-out;
	z-index: 999
}

.menu-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 6.5rem;
	background: rgba(0, 0, 0, .2);
	background: linear-gradient(180deg, rgba(2, 54, 78, .7) 0, rgba(2, 54, 78, .5) 50%, rgba(0, 0, 0, 0) 100%);
	z-index: 998
}

.menu {
	position: absolute;
	right: 5%;
	top: 2rem;
	font-size: .9em;
	z-index: 998
}

.menu ul {
	list-style-type: none;
	padding: 0
}

.menu li {
	display: inline-block;
	padding: .2em .5em
}

.menu a {
	font-weight: 700;
	color: #fff
}

.menu-tray {
	position: fixed;
	top: 0;
	right: max(calc(-1 * 100vw), -360px);
	width: 360px;
	max-width: 100vw;
	height: 100vh;
	background: var(--lightgray);
	overflow: hidden;
	transition: right .35s cubic-bezier(.2, 0, .2, 1);
	z-index: 999
}

.menu-tray.toggled {
	right: 0
}

@media screen and (max-width:800px) {
	#menu-toggle {
		display: block
	}

	#menu-toggle.toggled {
		color: var(--mediumgray)
	}

	#menu-toggle .icon-close {
		display: none
	}

	#menu-toggle.toggled .icon-menu {
		display: none
	}

	#menu-toggle.toggled .icon-close {
		display: block
	}

	.menu {
		display: block;
		left: 0;
		top: -25rem;
		width: 100%;
		padding: 4em 5%;
		background: var(--lightgray);
		transition: top .25s cubic-bezier(.2, 0, .2, 1)
	}

	.menu.toggled {
		display: block;
		top: 0
	}

	.menu li {
		display: block;
		padding: 1em 0
	}

	.menu a {
		font-size: 1.1em;
		color: var(--mediumgray)
	}
}

#kontakt-flyout {
	position: fixed;
	left: 100%;
	width: 600px;
	bottom: 10%;
	z-index: 100;
	border-radius: 8px 0 0 8px;
	transition: left .35s cubic-bezier(.2, 0, .2, 1)
}

#kontakt-flyout.open {
	left: calc(100% - 600px);
	z-index: 999
}

.kontakt-flyout-tab {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	left: -44px;
	top: 0;
	width: 60px;
	height: 88px;
	padding: 0 28px 0 10px;
	background: var(--mediumdarkgray);
	border-radius: 8px 0 0 8px;
	transition: left .25s cubic-bezier(.2, 0, .2, 1);
	cursor: pointer;
	z-index: -1
}

.kontakt-flyout-tab:hover {
	left: -50px
}

#kontakt-flyout.open .kontakt-flyout-tab {
	left: 0
}

.kontakt-flyout-tab img {
	display: block;
	width: 100%;
	max-width: 24px
}

.kontakt-flyout-tab img:first-child {
	margin-bottom: 10px
}

.kontakt-flyout-content {
	padding: 20px 65px;
	line-height: 1.2;
	color: #fff;
	background: var(--mediumdarkgray);
	border-radius: 8px 0 0 8px;
	overflow: hidden;
	z-index: 2
}

.kontakt-flyout-content .kontakt-head {
	margin-bottom: 20px
}

.kontakt-flyout-content .kontakt-flexcontainer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between
}

.kontakt-flyout-content .kontakt-foto {
	display: block;
	width: 120px;
	height: 120px;
	margin-bottom: .5em;
	border-radius: 60px
}

.kontakt-flyout-content .kontakt-name {
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: .5em
}

.kontakt-flyout-content .kontakt-email,
.kontakt-flyout-content .kontakt-position,
.kontakt-flyout-content .kontakt-telefon {
	font-size: .9em;
	margin-bottom: .25em
}

.kontakt-flyout-content .kontakt-email,
.kontakt-flyout-content .kontakt-telefon {
	display: flex;
	align-items: center;
	margin-top: .5em
}

.kontakt-flyout-content .kontakt-email img,
.kontakt-flyout-content .kontakt-telefon img {
	width: 1.2em;
	height: 1.2em;
	margin-right: 1em
}

.kontakt-flyout-close {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	background-image: url(/images/icon_close.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 40%;
	cursor: pointer
}

@media screen and (min-width:1400px) {
	#kontakt-flyout {
		width: 700px
	}

	#kontakt-flyout.open {
		left: calc(100% - 700px)
	}
}

@media screen and (max-width:800px) {
	#kontakt-flyout {
		width: 260px;
		top: 60px;
		bottom: auto
	}

	#kontakt-flyout.open {
		left: calc(100% - 260px)
	}

	.kontakt-flyout-tab {
		top: auto;
		bottom: 0
	}

	.kontakt-flyout-content {
		display: block;
		padding-left: 2em;
		padding-right: 2em;
		font-size: .9em
	}

	.kontakt-flyout-content .kontakt-head {
		margin-bottom: 10px
	}

	.kontakt-flyout-content .kontakt-flexcontainer {
		display: block
	}

	.kontakt-flyout-content .kontakt-info:not(:last-child) {
		margin-bottom: 1.5em
	}

	.kontakt-flyout-content .kontakt-foto {
		width: 100px;
		height: 100px
	}

	.kontakt-flyout-content .kontakt-name {
		font-size: 1.1em;
		margin-bottom: .2em
	}
}

#cta-button {
	position: fixed;
	left: 5%;
	bottom: 5%;
	padding: .5em .75em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	text-align: center;
	border-radius: 3px;
	color: #fff;
	background: var(--lbsred);
	opacity: 0;
	transform: translateY(4em);
	z-index: 9999;
	cursor: pointer;
	transition: opacity .3s ease-in-out, transform .3s cubic-bezier(.2, 0, .2, 1)
}

#cta-button.visible {
	opacity: 1;
	transform: translateY(0)
}

.scrollme {
	--size: 72px;
	position: fixed;
	right: 50%;
	bottom: 7%;
	width: var(--size);
	height: var(--size);
	transform: translateX(50%);
	color: #fff;
	background: var(--lbsred);
	color: var(--lbsred);
	background: #fff;
	box-shadow: 0 4px 9px rgba(0, 0, 0, .2);
	border-radius: var(--size);
	overflow: hidden;
	z-index: 1000;
	transition: all .5s ease
}

.scrollme.fadeout {
	bottom: -100px;
	opacity: 0
}

.scrollme-inner {
	position: absolute;
	display: grid;
	align-items: center;
	grid-template-rows: 50% 50%;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(var(--size) * 2);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-align: center;
	animation-name: scrollme;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation: scrollme 8s ease infinite;
	animation-fill-mode: both
}

.scrollme-inner img {
	width: 48%
}

@keyframes scrollme {
	0% {
		top: calc(var(--size) * -2)
	}

	7% {
		top: calc(var(--size) * -1)
	}

	50% {
		top: calc(var(--size) * -1)
	}

	57% {
		top: 0
	}

	92% {
		top: 0
	}

	100% {
		top: var(--size)
	}
}

@media screen and (max-height:700px) {
	.scrollme {
		right: 140px
	}
}

@media screen and (max-width:600px) {
	.scrollme {
		right: 80px
	}
}

section#form,
section#hero,
section#information,
section#intro {
	min-height: 100vh
}

section#hero .bg {
	background-image: url(/images/foto_hero.jpg);
	height: 100vh;
	position: fixed
}

section#hero .bg.unlock {
	position: absolute;
	top: auto;
	bottom: 0
}

section#hero .content-box p {
	margin-bottom: 2em
}

section#hero .content-box {
	min-height: 460px;
	animation-name: slide-up;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(.2, 0, .2, 1);
	animation-delay: .9s
}

.badge {
	position: absolute;
	right: -120px;
	bottom: -40px
}

.tricolore {
	width: 400px;
	transform: rotate(-45deg)
}

.tricolore div {
	width: 100%;
	height: 12px
}

.tricolore .bleu {
	background: #0055a4
}

.tricolore .blanc {
	background: #fff
}

.tricolore .rouge {
	background: #ef4135
}

.text-line {
	position: absolute;
	animation-name: slide-up;
	animation-duration: 1.2s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(.2, 0, .6, 1);
	animation-delay: .1s;
	z-index: -1
}

.text-line img {
	width: 100%;
	height: 100%;
	object-fit: contain
}

.text-line.line1 {
	right: 5%;
	top: 33vh;
	width: 220px;
	height: 50px;
	animation-delay: .1s
}

.text-line.line2 {
	right: 14%;
	top: 70vh;
	width: 130px;
	height: 50px;
	animation-delay: .5s
}

.text-line.line3 {
	left: 3%;
	top: 45vh;
	width: 240px;
	height: 50px;
	animation-delay: .3s
}

@keyframes slide-up {
	0% {
		transform: translateY(50px);
		opacity: 0
	}

	100% {
		transform: translateY(0);
		opacity: 1
	}
}

section#slider {
	padding-top: 1rem
}

section#faq,
section#services {
	background-color: var(--lightgray)
}

section#form .bg {
	background-image: url(/images/foto_contact.jpg);
	background-attachment: fixed;
	background-position: 33% center;
	z-index: 0
}

section#form .fullscreen {
	position: relative;
	z-index: 1
}

@media screen and (max-width:720px) {
	section#form .bg {
		background-attachment: unset
	}
}

.reasons {
	width: 100%;
	color: #fff
}

.reasons .keyword {
	font-weight: 200;
	font-style: italic;
	font-size: 2em;
	color: #fff;
	opacity: 0;
	transition: opacity .3s linear
}

.reasons .keyword.visible {
	opacity: 1
}

.circles .circle {
	position: absolute;
	display: inline-block;
	width: 320px;
	height: 320px;
	border-radius: 320px;
	background: #9a7777;
	background: rgba(36, 62, 83, .8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: .95em;
	font-weight: 200;
	letter-spacing: .03em;
	text-transform: uppercase
}

.circles .circle>div {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center
}

.circles .circle>div>div {
	text-align: center
}

.circles .circle img,
.circles .circle span {
	display: block;
	margin: 0 auto
}

.circles .circle img {
	width: 3.5em;
	height: 3.5em;
	object-fit: contain;
	margin-bottom: .75em
}

.circles .circle:nth-child(1) {
	left: 8%;
	top: 620px
}

.circles .circle:nth-child(2) {
	left: 40%;
	top: 800px
}

.circles .circle:nth-child(3) {
	left: 65%;
	top: 550px
}

.circles .circle:nth-child(4) {
	left: 4%;
	top: 1800px
}

.circles .circle:nth-child(5) {
	left: 36%;
	top: 1700px
}

.circles .circle:nth-child(6) {
	left: 67%;
	top: 1850px
}

@media screen and (max-width:1000px) {
	.circles .circle {
		width: 30vw;
		height: 30vw;
		border-radius: 30vw;
		font-size: .9em
	}
}

@media screen and (max-width:720px) {
	.circles .circle {
		width: 40vw;
		height: 40vw;
		border-radius: 40vw;
		font-size: .85em
	}

	.circles .circle:nth-child(1) {
		left: 6%
	}

	.circles .circle:nth-child(2) {
		left: 35%
	}

	.circles .circle:nth-child(3) {
		left: 57%
	}

	.circles .circle:nth-child(4) {
		left: 2%
	}

	.circles .circle:nth-child(5) {
		left: 33%;
		top: 1600px
	}

	.circles .circle:nth-child(6) {
		left: 55%
	}
}

#slider {
	position: relative
}

#aktuelle-angebote {
	--size: 10rem;
	position: absolute;
	right: 15%;
	bottom: 6%;
	width: var(--size);
	height: var(--size);
	z-index: 10;
	transform: rotate(10deg);
	transition: transform .2s cubic-bezier(.2, 0, .2, 1)
}

#aktuelle-angebote:hover {
	transform: scale(1.15) rotate(7deg)
}

#aktuelle-angebote a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	z-index: 10;
	background: #fff;
	color: var(--lbsred);
	text-align: center;
	font-size: calc(var(--size) * .14);
	font-weight: 900;
	line-height: 1.1;
	box-shadow: 2px 5px 6px rgba(0, 0, 0, .3)
}

.glide__slides {
	height: 360px
}

.glide__slide {
	background: var(--mediumgray)
}

.glide__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.glide__arrow {
	width: 38px;
	height: 38px;
	padding: 6px 3px 3px;
	border: none;
	box-shadow: none;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	font-size: 38px;
	line-height: 0;
	opacity: .7;
	transition: opacity .2s cubic-bezier(.2, 0, .2, 1)
}

.glide__arrow:hover {
	opacity: 1
}

.glide__arrow--left {
	left: 30px;
	background-image: url(/images/arrow_left.svg)
}

.glide__arrow--right {
	right: 30px;
	background-image: url(/images/arrow_right.svg)
}

@media screen and (max-width:800px) {
	.glide__arrows {
		display: none
	}

	.glide__slides {
		height: 240px
	}

	#aktuelle-angebote {
		--size: 8rem
	}
}


/* Beginn Kontaktformular */

.contact {
	min-height: 620px;
	overflow: hidden;
	z-index: 0
}

.content-wrapper>h3 {
	color: #fff;
	margin-bottom: .5em;
	font-size: 1.2em;
	font-weight: 700;
	z-index: 1
}

.contact .form {
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	left: 0;
	top: 100%;
	background-color: var(--lightgray) !important;
	transition: top .35s cubic-bezier(.2, 0, .2, 1);
	z-index: 1
}

.contact .form.current {
	top: 0
}

.contact.complete .form {
	top: -100% !important
}

.contact.show-message .form {
	top: 100%
}

.contact .contact-send {
	width: 100%;
	margin-top: 1em
}

.contact h3 {
	text-align: left;
	transition: opacity .3s linear
}

.contact .form:not(.current) h3 {
	opacity: 0
}

.contact .inner-container {
	width: 100%;
	padding: 2.5em 3em 0
}

@media screen and (max-width:720px) {
	.contact .inner-container {
		padding: 2.5em 1.5em 0
	}
}

.contact input,
.contact select {
	width: 100%
}

.contact .message,
.contact .result {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0
}

.contact.complete .result,
.contact.show-message .message {
	display: block
}

.contact .message a {
	color: var(--mediumgray);
	font-weight: 700
}

.contact .message a span {
	margin-right: .2em;
	font-size: 20px;
	vertical-align: middle
}

.contact .message ul.message-text li {
	font-weight: 700;
	margin-bottom: .5em
}

.contact .message .message-confirm {
	width: 100%;
	margin: 2em auto
}

.contact .contact-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.contact .contact-send:disabled {
  cursor: wait;
  opacity: .65;
}

.contact #contact-referrer-label {
  font-size: 1em;
  margin-bottom: 0.2em;
}

.contact .contact-options > legend.visually-hidden {
  height: 12px;
}

#contact-sonstiges,
#contact-sparkasse {
	display: none
}

/* Ende Kontaktformular */ 



.faq-content {
	width: 90%;
	max-width: 800px;
	display: grid;
	grid-template-columns: 6fr 3fr;
	column-gap: 60px
}

.faq-content .subnav {
	grid-row-start: 1;
	grid-column-start: 2;
	grid-column-end: 3
}

.faq-content .subnav ul {
	border-left: 1px solid var(--mediumdarkgray)
}

.faq-content .subnav ul li {
	padding-left: 1.5em;
	margin-bottom: 1.3em;
	font-size: .9em;
	color: var(--mediumdarkgray);
	transition: color .1s linear
}

.faq-content .subnav ul li:hover {
	font-weight: 700;
	color: var(--mediumdarkgray)
}

.faq-content .subnav ul li.current {
	font-weight: 700;
	color: #000
}

.faq-content .subsections {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 100%);
	grid-row-start: 1;
	grid-column-start: 1;
	grid-column-end: 2;
	overflow: hidden
}

.faq-content .subsection {
	opacity: 0;
	transition: opacity .5s linear
}

.faq-content .subsection.current {
	opacity: 1
}

.faq-content .subsection h4 {
	margin-top: .5em
}

.faq-content .subsection .wrapper {
	transform: translateY(30px);
	transition: transform .5s cubic-bezier(.2, 0, .2, 1)
}

.faq-content .subsection.current .wrapper {
	transform: translateY(0)
}

@media screen and (max-width:800px) {
	.faq-content {
		display: block
	}

	.faq-content .subnav {
		margin-bottom: 3em
	}

	.faq-content .subnav ul {
		border-left: none
	}

	.faq-content .subnav ul li {
		display: block;
		padding: .4em 0;
		margin-bottom: 0;
		border-bottom: 1px solid var(--mediumlightgray)
	}

	.faq-content .subnav ul li:nth-child(1) {
		border-top: 1px solid var(--mediumlightgray)
	}

	.faq-content .subnav ul li a {
		display: inline-block;
		max-width: 16em
	}
}

#competence ul {
	font-weight: 700;
	padding-left: .7em
}

#competence ul li {
	list-style-type: '+';
	padding-left: .5em;
	line-height: 1.3;
	margin-bottom: .8em
}

#services ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 2em;
	row-gap: 1em;
	margin-top: 2em
}

#services ul li {
	font-size: .9em;
	line-height: 1.3
}

@media screen and (max-width:720px) {
	#services ul {
		display: block;
		padding-left: .7em
	}

	#services ul li {
		list-style-type: '–';
		padding-left: .5em;
		margin-bottom: .5em
	}
}

footer {
	color: #fff;
	background: var(--lbsred)
}

footer .footer-content {
	display: flex;
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	padding: 30px 0;
	font-size: .9em
}

footer .footer-content>div {
	flex: 1 1 auto
}

footer .footer-content>div.footer-menu {
	justify-self: flex-end;
	text-align: right
}

footer .footer-content>div.footer-menu ul li {
	display: inline-block;
	margin-left: 1em
}

footer .footer-content>div.footer-menu ul li:first-child {
	margin-left: 0
}

footer .footer-content>div.footer-menu ul li a {
	text-decoration: underline
}

@media screen and (min-width:1400px) {

	body,
	html {
		font-size: 18px
	}

	.content,
	.faq-content,
	footer .footer-content {
		max-width: 1000px
	}

	.content-wrapper {
		max-width: 500px
	}

	.contact {
		min-height: 680px
	}
}

@media screen and (max-width:720px) {
	footer .footer-content {
		display: block
	}

	footer .footer-content>div.footer-menu {
		text-align: left;
		margin-top: 1em
	}
}

.text #hero {
	height: 300px;
	min-height: 0;
	overflow: hidden
}

.status #hero {
	height: 70px;
	min-height: 0;
	overflow: hidden
}

.text #hero .bg {
	position: absolute;
	top: 0;
	height: 100%;
	background-position: 50% 20%
}

.text #hero .logo-panel {
	display: block;
	position: absolute;
	top: 0;
	left: max(calc(50vw - 400px), 5%);
	background: rgba(255, 255, 255, .75);
	padding: 14px 5px 7px 8px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px)
}

.status #hero .logo-panel {
	display: block;
	position: absolute;
	top: 0;
	left: max(calc(50vw - 400px), 5%);
	background: rgba(255, 255, 255, .75);
	padding: 14px 5px 7px 8px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px)
}

#main {
	min-height: calc(100vh - 380px);
	padding: 40px 0 120px
}

#main .content {
	background: #fff
}

#main a {
	color: var(--lbsred);
	text-decoration: underline
}

#main h1 {
	margin-top: 3em;
	margin-bottom: 2em
}

#main h3 {
	margin-top: 1.5em;
	margin-bottom: .5em
}

#main p.large {
	margin-bottom: 2em
}

#main ul {
	margin-bottom: 1em
}

#main ul li {
	padding-left: 2em
}

#main ul li:before {
	content: "•";
	display: inline-block;
	width: 0;
	margin-left: -2em;
	margin-right: 2em
}

@media screen and (min-width:1400px) {
	.text #hero .logo-panel {
		left: calc(50% - 500px)
	}
}