:root {
	--viewport-margin: 10px;
    --viewport-width: calc(100% - 2 * var(--viewport-margin));
	--default-gap: 25px;
}

@font-face {
  font-family: "Roboto Regular";
  src: url("/font/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Roboto SemiBold";
  src: url("/font/Roboto-SemiBold.ttf");
}

@font-face {
  font-family: "Roboto Bold";
  src: url("/font/Roboto-Bold.ttf");
}

body {
	font-family: Roboto Regular, sans-serif;
	font-size: 16px;
	color: #333333;
	margin: 0;
}

h1,h2,h3 {
	color: #1565C0;
}

a {
	color: #1565C0;
}

.viewport {
    width: var(--viewport-width);
    margin-inline:auto;
}

header {
	padding-top: 100px;
}

header nav {
	height: 100px;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: white;
	z-index: 10;
	border-bottom: 1px solid #1565C0;
}

.header__contact {
	position: absolute;
	right: 50px;
	top: 30px;
}

.topbar__item {
	color: white;
}

.topbar__item a {
	color: white;
}

.logo img {
	height: 60px;
	position: absolute;
	left: 30px;
	top: 20px;
}

.main-nav {
	display: flex;
	list-style: none;
	justify-content: center;
	gap: 60px;
	padding-top: 20px;
}

.main-nav li a {
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
}

.main-nav li a:visited {
	color: #333333;
}

.main-nav li a:hover {
	color: #43A047;
}

.swiper {
	width: 100%;
	height: 600px;
}

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

.swiper-slide__overlay {
position: absolute;
  background-color: rgba(255,255,255, 0.7);
  color: #333;
  padding: 30px;
  left: 50px;
  bottom: 50px;
  width: 40%;
  font-size: 20px;
}

.swiper-slide__overlay h2 {
  margin-top: 0;
  color: #1565C0;
}

main > section {
	padding: 30px 0 50px;
	line-height: 1.4;
}

#leistungen {
	background-color: #E8E8E8;
	color: white;
}

#leistungen h2 {
	color: white;
}

#leistungen .viewport > h2 {
  color: #1565C0;
}

.leistungen-text {
	margin-top: 30px;
}

#kontakt .c-teaser {
	margin-bottom: 50px;
}

#kontakt form {
margin-top: 25px;
}

.card {
	display: flex;
	flex-direction: column;
}

.card .card_orientationwrapper {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.card .card__image.fullimage {
	height: 100%
}

.card .card__image {
	aspect-ratio: 2 / 1;
	position: relative;
	overflow: hidden;
}

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

.card .card__image .card__onimage {
	position: absolute;
	z-index: 2;
	bottom: 0px;
	padding: 15px;
	background-color: rgba(21, 101, 192, 0.5);
}

.card .card__image .card__onimage h2 {
	margin: 0;
}

.card .card__image .card__contrast-overlay {
  position: absolute;
  bottom: 0px;
  height: 300px;
  width: 100%;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 120%);
}

.detail {
	padding: 50px 0 100px;
}

label {
	display: block;
}

label:not(:first-child) {
	margin-top: 20px;
}

input[type=text], textarea {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}

input[type=text] {
	height: 30px;
}

input[type=submit] {
	background-color: #43A047;
	color: white;
	border: none;
	padding: 15px 30px;
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 10px;
	cursor: pointer;
	border: 1px solid #43A047;
}

input[type=submit]:hover {
	color: #43A047;
	background-color: white;
}

footer {
	background-color: #1565C0;
	color: white;
	padding: 30px 0;
	line-height: 1.4;
}

footer a {
	color: white;
}

.meta-nav {
	display: flex;
	list-style: none;
	padding: 0;
}

li.meta-item {
	margin-right: 20px;
}

li.meta-item a {
	color: white;
}


*:where(.gridcols) {
    gap: var(--default-gap)
}

.gridcols {
    display: grid;
    grid-template-columns: repeat(12, 1fr)
}

.gridcols .gridcol-1,.gridcols .gridcol-xs-1 {
    grid-column-end: span 1
}

.gridcols .gridcol-2,.gridcols .gridcol-xs-2 {
    grid-column-end: span 2
}

.gridcols .gridcol-3,.gridcols .gridcol-xs-3 {
    grid-column-end: span 3
}

.gridcols .gridcol-4,.gridcols .gridcol-xs-4 {
    grid-column-end: span 4
}

.gridcols .gridcol-5,.gridcols .gridcol-xs-5 {
    grid-column-end: span 5
}

.gridcols .gridcol-6,.gridcols .gridcol-xs-6 {
    grid-column-end: span 6
}

.gridcols .gridcol-7,.gridcols .gridcol-xs-7 {
    grid-column-end: span 7
}

.gridcols .gridcol-8,.gridcols .gridcol-xs-8 {
    grid-column-end: span 8
}

.gridcols .gridcol-9,.gridcols .gridcol-xs-9 {
    grid-column-end: span 9
}

.gridcols .gridcol-10,.gridcols .gridcol-xs-10 {
    grid-column-end: span 10
}

.gridcols .gridcol-11,.gridcols .gridcol-xs-11 {
    grid-column-end: span 11
}

.gridcols .gridcol-12,.gridcols .gridcol-xs-12 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-1,.gridcols .gridcol-m-1,.gridcols .gridcol-l-1,.gridcols .gridcol-xl-1,.gridcols .gridcol-xxl-1 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-2,.gridcols .gridcol-m-2,.gridcols .gridcol-l-2,.gridcols .gridcol-xl-2,.gridcols .gridcol-xxl-2 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-3,.gridcols .gridcol-m-3,.gridcols .gridcol-l-3,.gridcols .gridcol-xl-3,.gridcols .gridcol-xxl-3 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-4,.gridcols .gridcol-m-4,.gridcols .gridcol-l-4,.gridcols .gridcol-xl-4,.gridcols .gridcol-xxl-4 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-5,.gridcols .gridcol-m-5,.gridcols .gridcol-l-5,.gridcols .gridcol-xl-5,.gridcols .gridcol-xxl-5 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-6,.gridcols .gridcol-m-6,.gridcols .gridcol-l-6,.gridcols .gridcol-xl-6,.gridcols .gridcol-xxl-6 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-7,.gridcols .gridcol-m-7,.gridcols .gridcol-l-7,.gridcols .gridcol-xl-7,.gridcols .gridcol-xxl-7 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-8,.gridcols .gridcol-m-8,.gridcols .gridcol-l-8,.gridcols .gridcol-xl-8,.gridcols .gridcol-xxl-8 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-9,.gridcols .gridcol-m-9,.gridcols .gridcol-l-9,.gridcols .gridcol-xl-9,.gridcols .gridcol-xxl-9 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-10,.gridcols .gridcol-m-10,.gridcols .gridcol-l-10,.gridcols .gridcol-xl-10,.gridcols .gridcol-xxl-10 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-11,.gridcols .gridcol-m-11,.gridcols .gridcol-l-11,.gridcols .gridcol-xl-11,.gridcols .gridcol-xxl-11 {
    grid-column-end: span 12
}

.gridcols .gridcol-s-12,.gridcols .gridcol-m-12,.gridcols .gridcol-l-12,.gridcols .gridcol-xl-12,.gridcols .gridcol-xxl-12 {
    grid-column-end: span 12
}

.gridcols .gridcol-hide {
    display: none
}

@media (min-width: 480px) {
    .gridcols .gridcol-s-1 {
        grid-column-end:span 1
    }

    .gridcols .gridcol-s-2 {
        grid-column-end: span 2
    }

    .gridcols .gridcol-s-3 {
        grid-column-end: span 3
    }

    .gridcols .gridcol-s-4 {
        grid-column-end: span 4
    }

    .gridcols .gridcol-s-5 {
        grid-column-end: span 5
    }

    .gridcols .gridcol-s-6 {
        grid-column-end: span 6
    }

    .gridcols .gridcol-s-7 {
        grid-column-end: span 7
    }

    .gridcols .gridcol-s-8 {
        grid-column-end: span 8
    }

    .gridcols .gridcol-s-9 {
        grid-column-end: span 9
    }

    .gridcols .gridcol-s-10 {
        grid-column-end: span 10
    }

    .gridcols .gridcol-s-11 {
        grid-column-end: span 11
    }

    .gridcols .gridcol-s-12 {
        grid-column-end: span 12
    }
}

@media (min-width: 768px) {
    .gridcols .gridcol-m-1 {
        grid-column-end:span 1
    }

    .gridcols .gridcol-m-2 {
        grid-column-end: span 2
    }

    .gridcols .gridcol-m-3 {
        grid-column-end: span 3
    }

    .gridcols .gridcol-m-4 {
        grid-column-end: span 4
    }

    .gridcols .gridcol-m-5 {
        grid-column-end: span 5
    }

    .gridcols .gridcol-m-6 {
        grid-column-end: span 6
    }

    .gridcols .gridcol-m-7 {
        grid-column-end: span 7
    }

    .gridcols .gridcol-m-8 {
        grid-column-end: span 8
    }

    .gridcols .gridcol-m-9 {
        grid-column-end: span 9
    }

    .gridcols .gridcol-m-10 {
        grid-column-end: span 10
    }

    .gridcols .gridcol-m-11 {
        grid-column-end: span 11
    }

    .gridcols .gridcol-m-12 {
        grid-column-end: span 12
    }
}

@media (min-width: 1024px) {
	:root {
        --viewport-margin:30px
    }
	
    .gridcols .gridcol-l-1 {
        grid-column-end:span 1
    }

    .gridcols .gridcol-l-2 {
        grid-column-end: span 2
    }

    .gridcols .gridcol-l-3 {
        grid-column-end: span 3
    }

    .gridcols .gridcol-l-4 {
        grid-column-end: span 4
    }

    .gridcols .gridcol-l-5 {
        grid-column-end: span 5
    }

    .gridcols .gridcol-l-6 {
        grid-column-end: span 6
    }

    .gridcols .gridcol-l-7 {
        grid-column-end: span 7
    }

    .gridcols .gridcol-l-8 {
        grid-column-end: span 8
    }

    .gridcols .gridcol-l-9 {
        grid-column-end: span 9
    }

    .gridcols .gridcol-l-10 {
        grid-column-end: span 10
    }

    .gridcols .gridcol-l-11 {
        grid-column-end: span 11
    }

    .gridcols .gridcol-l-12 {
        grid-column-end: span 12
    }

}

@media (min-width: 1200px) {
    .gridcols .gridcol-xl-1 {
        grid-column-end:span 1
    }

    .gridcols .gridcol-xl-2 {
        grid-column-end: span 2
    }

    .gridcols .gridcol-xl-3 {
        grid-column-end: span 3
    }

    .gridcols .gridcol-xl-4 {
        grid-column-end: span 4
    }

    .gridcols .gridcol-xl-5 {
        grid-column-end: span 5
    }

    .gridcols .gridcol-xl-6 {
        grid-column-end: span 6
    }

    .gridcols .gridcol-xl-7 {
        grid-column-end: span 7
    }

    .gridcols .gridcol-xl-8 {
        grid-column-end: span 8
    }

    .gridcols .gridcol-xl-9 {
        grid-column-end: span 9
    }

    .gridcols .gridcol-xl-10 {
        grid-column-end: span 10
    }

    .gridcols .gridcol-xl-11 {
        grid-column-end: span 11
    }

    .gridcols .gridcol-xl-12 {
        grid-column-end: span 12
    }
}

@media (min-width: 1400px) {
	:root {
        --viewport-width:1360px;
        --viewport-margin: calc((100vw - var(--viewport-width)) / 2);
        --default-gap: 50px
    }
	
    .gridcols .gridcol-xxl-1 {
        grid-column-end:span 1
    }

    .gridcols .gridcol-xxl-2 {
        grid-column-end: span 2
    }

    .gridcols .gridcol-xxl-3 {
        grid-column-end: span 3
    }

    .gridcols .gridcol-xxl-4 {
        grid-column-end: span 4
    }

    .gridcols .gridcol-xxl-5 {
        grid-column-end: span 5
    }

    .gridcols .gridcol-xxl-6 {
        grid-column-end: span 6
    }

    .gridcols .gridcol-xxl-7 {
        grid-column-end: span 7
    }

    .gridcols .gridcol-xxl-8 {
        grid-column-end: span 8
    }

    .gridcols .gridcol-xxl-9 {
        grid-column-end: span 9
    }

    .gridcols .gridcol-xxl-10 {
        grid-column-end: span 10
    }

    .gridcols .gridcol-xxl-11 {
        grid-column-end: span 11
    }

    .gridcols .gridcol-xxl-12 {
        grid-column-end: span 12
    }
}