@charset "UTF-8";
/* @group General */

html {
	font: normal 400 1rem/1.6rem "Open Sans", Helvetica, Arial, sans-serif;
	  /* Always show the vertical scrollbar to prevent `jumps`
		     of page content after navigating from a very short page
		     that does not scroll to a long pager */
	overflow-y: scroll;
	  /* Setting this to `default` prevents the cursors from
		     changing when hovering blocks of text or whitespace,
		     which is less distracting */
	cursor: default;
	  /* Neccessary for sticks footer. */
	position: relative;
	min-height: 100%;
	  /* Prevent adjustments of font size after orientation
		     changes in IE and iOS. */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	/* space for sticky footer */
	margin-bottom: 18rem;
	background: #FFF;
	color: #111;
	border-color: #111;
}

@media (max-width: 64em) {
	html {
		/* We decrease the font-size a little-bit for tiny
	      screens. Because this stylesheet uses relative units
	      everywhere, everything scales nicely. */
		font-size: 0.95rem;
		line-height: 1.4rem;
	}
	
	body {
		margin-bottom: 25rem;
	}
}

.img_container {
	width: 300px;
	height: 400px;
}

img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
}

/* @end */

/* @group Reset & Normalization */

*, *::before, *::after {
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
	list-style: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
	/* Add correct display for IE 9- and some newer browsers */
	display: block;
}

table {
	border: none;
	border-collapse: collapse;
}

td {
	vertical-align: top;
}

.clearfix {
	clear: both;
}

.clearfix:after {
	clear: both;
	content: "";
	display: table;
}

/* @end */

/* @group Grid + Layout */

.wrap {
	box-sizing: content-box;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
	max-width: 44rem;
}

.wrap.wide {
	max-width: 100rem;
}

@media (min-width: 64em) {
	.wrap {
		padding-left: 3rem;
		padding-right: 3rem;
		max-width: 60rem;
	}
}

/* Notch-Specific Style (iPhone X) */

@media (max-width: 44em) {
	@supports (padding: 0px) {
		.wrap.
		wide {
		padding-left: 1rem;
		padding-right: 1rem;
	}
} }

/* @end */

/* @group Typography */

a {
	color: #DBDBDB;
	text-decoration: none;
	transition: all .1s linear;
}

a:hover {
	color: #FF5A03;
}

main a {
	color: inherit;
	font-weight: 600;
	border-bottom: 1px solid #111;
	border-color: inherit;
}

main a:hover {
	color: #FF5A03;
	border-color: #FF5A03;
}

strong {
	font-weight: 600;
}

b {
	font-weight: 700;
}

h1 {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.9rem;
}

.home h1 {
	font-size: 1.2rem;
	font-weight: 400;
}

h2 {
	font-size: 1.3rem;
	font-weight: 400;
	margin-top: 3rem;
}

.home h2 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-top: 0;
	line-height: 1.1;
}

h3 {
	font-size: 1rem;
	font-weight: 400;
}

h4 {
	font-weight: 600;
}

p:not(:first-of-type) {
	margin-top: 1.2rem;
}

p {
	font-size: 1.2rem;
	line-height: 1.6;
}

/* @end */

/* @group Header */

.header {
	height: 20rem;
	position: relative;
	overflow: hidden;
}

.header-overlay {
	position: absolute;
	width: 100%;
	height: 72rem;
	max-height: 100vh;
}

.header-logo {
	width: 20rem;
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, 0);
}

/* @end */

/* @group Hero */

.hero {
	height: 72rem;
	max-height: 100vh;
	position: relative;
	overflow: hidden;
}

.hero-background {
	width: 100%;
	height: 72rem;
	max-height: 100vh;
	background-position: center;
	background-size: cover;
	position: absolute;
}

.hero-overlay {
	position: absolute;
	width: 100%;
	height: 72rem;
	max-height: 100vh;
}

.hero-logo {
	width: 28rem;
	max-width: 50%;
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, 0);
}

@media (max-width: 44em) {
	.hero {
		display: none;
	}
}

/* @end */

/* @group Mobile Header */

.mobile_header {
	display: none;
}

.mobile_header .get-in-touch {
	background-color: #F2F2F2;
	padding: 1rem 0;
	display: inline-flex;
	width: 100%;
}

.mobile_header .get-in-touch svg {
	width: 2.5rem;
	margin: 0 .6rem;
	align-content: center;
}

.mobile_header .number a {
	font-size: 1.8rem;
	font-weight: 700;
	color: #FF5A03;
}

@media (max-width: 44em) {
	.mobile_header {
		display: inherit;
	}
	
	.mobile_header .logo {
		box-sizing: content-box;
		margin: 0 auto;
		padding-left: 1rem;
		padding-right: 1rem;
		max-width: 44rem;
	}
	
	.mobile_header .logo svg {
		width: 19rem;
		margin: 2rem -.9rem 0;
	}
}

/* @end */

/* @group Holiday Banner */

.banner {
	background-color: #FF5A03;
	color: #FFF;
	width: 100%;
	padding: .3rem 0;
}

.banner_content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem 0;
}

.banner .icon {
	width: 2rem;
	margin-right: 1rem;
	float: left;
}

/* @end */

/* @group Hero Bar */

.hero .bar-wrapper {
	bottom: 0;
	position: absolute;
	width: 100%;
}

.hero .bar {
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(15, 1fr);
	grid-gap: .5rem;
	grid-auto-flow: dense;
	font-size: .95em;
	line-height: 1.4em;
	padding: 2rem 0;
	overflow-wrap: normal;
	word-wrap: normal;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
}

.hero .call {
	grid-column: span 4;
	font-weight: 600;
}

.hero .call .number {
	font-size: 1.1rem;
}

.hero .call a {
	color: #111;
	transition: all .1s linear;
}

.hero .call a:hover {
	color: #FF5A03;
}

.hero .closing-in-placeholder, .hero .hero .on-holiday {
	font-weight: 400;
}

.hero .times {
	grid-column: 9 / span 9;
	justify-self: end;
}

.hero h4 {
	padding-right: .5rem;
}

.hero .times td:not(:first-child) {
	padding-left: .8rem;
}

.hero .info {
	display: none;
}

.hero .btn {
	border: 2px solid #F2F2F2;
	padding: .3rem .5rem;
	border-radius: .2rem;
	color: #F2F2F2;
	font-weight: 600;
}

.hero .times h4, .hero .times table, .hero .address h4, .hero .address div {
	display: inline-block;
	vertical-align: top;
}

@media (min-width: 64em) {
	.hero .call .number:before {
		content: "Telefon ";
		font-size: 1.1rem;
	}
}

@media (max-width: 44em) {
	.hero .call {
		grid-column: span 15;
	}
	
	.hero .times {
		display: none;
	}
	
	.hero .address {
		display: none;
	}
	
	.hero .info {
		grid-column: span 1;
		align-self: center;
		display: initial;
	}
}

/* @end */

/* @group Menubar */

.menu-wrapper {
	width: 100%;
}

.menu {
	line-height: 1.4em;
	text-align: center;
	font-size: .8rem;
}

.menuitems {
	display: inline-block;
	margin: 1rem 2rem;
	font-weight: 600;
	border-bottom: 1px solid #5E5C5B;
	color: #5E5C5B;
}

.menuitems:hover {
	border-color: #FF5A03;
}

/* @end */

/* @group Main Grid */

.darker {
	background-color: #F2F2F2;
}

.section_padding {
	padding: 9rem 0;
}

.page_padding {
	padding: 3rem 0 9rem;
}

.grid {
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: repeat(1, 1fr);
	grid-gap: 2rem;
	grid-auto-flow: dense;
}

.grid .title {
	grid-column: span 15;
	grid-row: span 1;
	overflow-wrap: normal;
	word-wrap: normal;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
}

.grid .content {
	grid-column: span 15;
	grid-row: span 1;
}

@media (max-width: 64em) {
	.text-left {
		grid-column: span 13;
	}
	
	.section_padding {
		padding: 6rem 0;
	}
	
	.grid .title {
		grid-column: span 15;
		grid-row: 1;
	}
}

@media (max-width: 44em) {
	.grid {
		grid-template-columns: repeat(14, 1fr);
		grid-gap: 1rem;
		grid-auto-flow: dense;
	}
}

@media (max-width: 44em) {
	.section_padding {
		padding: 4rem 0;
	}
}

/* @end */

/* @group Intro Section */

@media (min-width: 64em) {
	.two-column {
		columns: 2;
		column-gap: 2rem;
	}
}

/* @end */

/* @group Services Section */

.cd-tabs {
	max-width: 50rem;
	margin: 0 auto;
	position: relative;
	display: block;
}

.cd-tabs__panel {
	display: none;
	padding: 2rem 0;
	text-align: center;
}

.cd-tabs__panel--selected {
	display: block;
}

.cd-tabs__list {
	display: flex;
	overflow-x: auto;
	justify-content: space-between;
}

.cd-tabs__list::-webkit-scrollbar {
	display: none;
}

.cd-tabs__list li {
	display: inline-flex;
}

.cd-tabs__item {
	padding: .3rem .8rem;
	color: #5E5C5B;
	align-items: center;
	border-color: #5E5C5B;
	display: inline-flex;
}

.cd-tabs__item:hover {
	color: #5E5C5B;
	border-color: #FF5A03;
}

.cd-tabs__item:hover svg {
	fill: #5E5C5B;
}

.cd-tabs__item svg {
	height: 1.8rem;
	width: 1.8rem;
	padding-right: .5rem;
	fill: #5E5C5B;
}

.cd-tabs__item--selected {
	color: #111;
	border-color: #FF5A03;
}

.cd-tabs__item--selected svg {
	fill: #111;
}

@media (max-width: 44em) {
	.cd-tabs {
		display: none;
	}
	
	.services-section {
		position: relative;
	}
	
	.services-section:before {
		content: "\276C";
		font-size: 3em;
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		left: 0;
		height: 2rem;
		z-index: 1;
		pointer-events: none;
		visibility: visible;
		opacity: .1;
		text-align: left;
	}
	
	.services-section:after {
		content: "\276D";
		font-size: 3em;
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		right: 0;
		height: 2rem;
		z-index: 1;
		pointer-events: none;
		visibility: visible;
		opacity: .1;
		text-align: right;
	}
}

.scrolling-wrapper {
	flex: auto;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch;
}

.scrolling-wrapper::-webkit-scrollbar {
	display: none;
}

.scrolling-wrapper .card {
	flex: 0 0 auto;
	margin: 4rem 10vw;
	width: 80vw;
}

.scrolling-wrapper .card.last {
	width: 1px;
	margin: 0;
}

.scrolling-wrapper .card .title {
	display: inline-flex;
	margin-bottom: 1rem;
}

.scrolling-wrapper .card .title svg {
	height: 2.5rem;
	width: 2.5rem;
	padding-right: 1rem;
	fill: #5E5C5B;
	align-self: center;
}

.scrolling-wrapper .card .title h2 {
	color: #5E5C5B;
	align-self: center;
	font-size: 1.3rem;
}

@media (min-width: 44em) {
	.services-section {
		padding: 4rem 0 2rem;
	}
	
	.scrolling-wrapper {
		display: none;
	}
}

/* @end */

/* @group About Section */

.about-section .text {
	grid-column: span 9;
	grid-row: span 1;
	justify-self: start;
	align-self: center;
}

.about-section .text p {
	margin-top: 2rem;
}

.about-section .signature svg {
	height: 1.6rem;
	width: auto;
	vertical-align: middle;
	fill: #111;
}

.about-section i {
	vertical-align: middle;
	margin-left: .5rem;
}

.about-section .portrait {
	grid-column: 11 / span 5;
	grid-row: span 1;
	align-self: center;
}

@media (max-width: 44em) {
	.about-section .text {
		grid-column: span 14;
	}
	
	.about-section .portrait {
		display: none;
	}
}

/* @end */

/* @group Image Gallery */

.gallery-section figure {
	grid-column: span 5;
	grid-row: span 1;
	background-color: #F2F2F2;
}

.gallery-section a {
	border: none;
}

@media (max-width: 44em) {
	.gallery-section .wrap {
		padding: 0;
	}
	
	.gallery-section figure {
		grid-column: span 14;
		grid-row: span 1;
		background-color: #F2F2F2;
	}
}

/* @end */

/* @group Team Grid */

.team-section .title {
	grid-column: span 15;
	grid-row: span 1;
}

.team-section .portrait {
	grid-column: 11 / span 5;
	grid-row: span 1;
	align-self: center;
}

.team-section .text {
	grid-column: span 9;
	grid-row: span 1;
	align-self: center;
}

.team-section ul {
	margin-bottom: 1.5em;
	font-size: 1.2rem;
	line-height: 1.6;
	margin-top: 2rem;
}

.team-section li {
	text-indent: -1em;
	margin-left: 1em;
}

.team-section li:before {
	font-size: 1em;
	content: "• ";
	margin-right: .25em;
}

@media (max-width: 44em) {
	.team-section .grid {
		grid-gap: 0;
	}
	
	.team-section .text {
		grid-column: span 16;
		margin-top: 1rem;
	}
	
	.team-section .portrait {
		display: none;
	}
}

/* @end */

/* @group Contact */

.contact-section {
	width: 100%;
	text-align: left;
}

.contact-section p {
	font-size: inherit;
}

.contact {
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: repeat(22, 1fr);
	grid-gap: 0;
	grid-auto-flow: dense;
}

.contact .icon {
	width: 2.4rem;
	height: 2.4rem;
	align-self: center;
}

.title-wrapper {
	grid-column: span 15;
	grid-row: span 2;
	display: flex;
	align-items: center;
}

.map-wrapper {
	grid-column: span 7;
	grid-row: span 11;
}

.map-wrapper a {
	border-bottom: none;
}

#map {
	height: 100%;
	width: 100%;
}

.mapboxgl-canvas-container {
	cursor: default !important;
}

.directions-wrapper {
	grid-column: 9 / span 7;
	grid-row: span 11;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.directions-content {
	padding: 2rem 0;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 2rem;
	grid-auto-flow: dense;
}

.directions-content .location {
	grid-row: 1 / span 1;
}

.directions-content .opnv {
	grid-row: 2 / span 2;
	align-self: center;
}

.directions-content .opnv .rail_connection p {
	margin-top: .2rem;
}

.directions-content .opnv .rail_connection:not(:last-of-type) p {
	margin-bottom: 1rem;
}

.directions-content .opnv .rail_connection strong:nth-of-type(1) {
	background-color: #EE7F01;
	color: #FFF;
	padding: 0 .1rem 0 .05rem;
}

.directions-content .opnv .rail_connection strong:nth-of-type(2) {
	background-color: #55AB26;
	color: #FFF;
	padding: 0 .1rem 0 .05rem;
}

.directions-content .pkw {
	grid-row: 4 / span 2;
	align-self: center;
}

.directions-content .icon {
	grid-column: 1 / span 1;
}

.directions-content .inline-text {
	grid-column: 2 / span 8;
	align-self: center;
}

.horizontal_devider {
	grid-column: span 15;
	grid-row: 15 / span 2;
	position: relative;
}

.horizontal_devider:before {
	content: '';
	position: absolute;
	top: 50%;
	border-top: 1px solid #C4C4C4;
	width: 100%;
	transform: translateY(-50%);
}

.features-wrapper {
	grid-column: span 7;
	grid-row: span 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.features-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: .5rem;
	grid-auto-flow: dense;
	justify-content: center;
	padding: 2rem 0;
}

.feature_icon {
	grid-column: span 1;
	grid-row: 1 / span 1;
	margin: auto;
}

.feature_text {
	grid-column: span 1;
	grid-row: 2 / span 1;
	margin: auto;
	text-align: center;
	font-size: .9em;
	font-weight: 600;
	line-height: 1rem;
}

.emergency-wrapper {
	grid-column: 9 / span 7;
	grid-row: span 5;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.emergency-content {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-gap: 2rem;
	grid-auto-flow: dense;
	padding: 2rem 0;
}

.emergency-content .icon {
	grid-column: 1 / span 1;
	align-items: center;
	justify-content: center;
}

.emergency-content .inline-text {
	grid-column: 2 / span 8;
}

@media (max-width: 64em) {
	.contact {
		display: grid;
		margin: 0 auto;
		grid-template-columns: repeat(14, 1fr);
		grid-template-rows: repeat(34, 1fr);
		grid-gap: 0;
		grid-auto-flow: dense;
	}
	
	.title-wrapper {
		grid-column: span 14;
		grid-row: span 2;
		display: flex;
		align-items: center;
	}
	
	.map-wrapper {
		grid-column: span 14;
		grid-row: span 11;
	}
	
	.directions-wrapper {
		grid-column: span 14;
		grid-row: span 11;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.horizontal_devider {
		display: none;
	}
	
	.features-wrapper {
		grid-column: span 14;
		grid-row: span 5;
		border-right: none;
		border-top: 1px solid #C4C4C4;
		border-bottom: 1px solid #C4C4C4;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.emergency-wrapper {
		grid-column: span 14;
		grid-row: span 5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 44em) {
	.contact {
		grid-template-rows: repeat(22, 1fr);
		padding-top: 2rem;
	}
	
	.title-wrapper {
		display: none;
	}
	
	.map-wrapper {
		grid-row: span 8;
	}
	
	.directions-wrapper {
		grid-row: span 10;
	}
	
	.features-content, .directions-content, .emergency-content {
		padding: 3rem 0;
	}
	
	.features-content {
		max-width: 100%;
	}
}

/* @end */

/* @group Bottom Bar */

.bottom-info-section .bar {
	background-color: #5E5C5B;
	padding: 1.4rem 0;
	text-align: center;
	color: #FFF;
}

.neupatienten-infos {
	max-width: 66rem;
	padding: 1rem 1rem 2rem;
}

.neupatienten-infos h2 {
	margin-top: 1rem;
}

.neupatienten-infos .text {
	grid-column: span 9;
	grid-row: span 1;
	justify-self: start;
	align-self: center;
}

.neupatienten-infos .text p {
	margin-top: 2rem;
}

.neupatienten-infos .portrait {
	grid-column: 11 / span 5;
	grid-row: span 1;
	align-self: center;
}

@media (max-width: 44em) {
	.neupatienten-infos .text {
		grid-column: span 14;
	}
	
	.neupatienten-infos .portrait {
		display: none;
	}
}

/* @end */

/* @group Sticky Footer */

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: left;
	background-color: #353231;
	color: #DBDBDB;
	height: 18rem;
	padding: 5.5rem 0;
}

.footer .footer-section {
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-auto-flow: dense;
	height: 7rem;
	line-height: 1.4em;
	font-size: .9em;
}

.footer .logo {
	grid-column: span 3;
	grid-row: 1 / span 4;
	color: #FFF;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1rem;
}

.footer .contactdetails {
	grid-column: span 3;
	grid-row: 1 / span 3;
}

.footer .times {
	grid-column: span 5;
	grid-row: 1 / span 3;
}

.footer .times td:not(:first-child) {
	padding-left: .5rem;
}

.footer .address {
	grid-column: span 4;
	grid-row: 1 / span 3;
}

.footer .copyright {
	grid-column: span 11;
	grid-row: 4;
	font-size: .8em;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.footer .meta:not(:last-child) {
	margin-right: 1rem;
}

.footer .options {
	grid-column: span 1;
	grid-row: 4 / span 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.scroll-top {
	width: 1.5rem;
	height: 1.5rem;
}

.arrow {
	width: auto;
	height: auto;
	fill: #DBDBDB;
	transition: fill .2s linear;
}

a:hover .arrow {
	fill: #FF5A03;
}

@media (max-width: 64em) {
	.footer {
		height: 25rem;
		padding: 3.5rem 0;
	}
	
	.footer .footer-section {
		height: 18rem;
		grid-gap: 1rem;
	}
	
	.footer .logo {
		display: none;
	}
	
	.footer .contactdetails {
		grid-column: span 15;
		grid-row: span 1;
	}
	
	.footer .times {
		grid-column: span 15;
		grid-row: span 1;
	}
	
	.footer .address {
		grid-column: span 15;
		grid-row: span 1;
	}
	
	.footer .copyright {
		grid-column: span 15;
		grid-row: span 1;
	}
	
	.footer .options {
		display: none;
	}
}

/* @end */