@import url('styles.css');

html {}

html,
body {
	height: 100%;
	scrollbar-gutter: stable;
}

body {
	color: var(--schwarz);
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
}

a {
	color: #000;
	font-weight: 600;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1,
.h1 {
	font-size: 32px;
	margin-bottom: 15px;
}

h2,
.h2 {
	font-size: 28px;
}

h3,
.h3 {
	font-size: 24px;
}

/*------------------------------------*\
  #SEITENHEADER
\*------------------------------------*/
#seitenheader.be-layout-startseite,
#seitenheader.be-layout-contentseite {
	height: 100vh;
	margin-bottom: 60px;
	overflow: hidden;
}

#seitenheader.be-layout-startseite .topbereich,
#seitenheader.be-layout-contentseite .topbereich,
#seitenheader.be-layout-blank .topbereich {
	height: 100px;
	position: fixed;
	width: 100%;
	transition: all 0.5s ease-in-out;
	z-index: 99;
}

#seitenheader.scroll.be-layout-startseite .topbereich,
#seitenheader.scroll.be-layout-contentseite .topbereich,
#seitenheader.be-layout-blank .topbereich {
	background: rgba(0, 0, 0, 0.7);
}

.topbereich .kontakt-icons {
	left: 100px;
	top: 18px;
}

.topbereich .kontakt-icons .telefon {
	margin-right: 50px;
}

.topbereich .kontakt-icons a {
	color: #fff;
}

.topbereich .kontakt-icons a:hover {
	color: #ef7c00;
}

.topbereich .kontakt-icons i {
	font-size: 36px;
	filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
}

#splash-screen {
	background-color: rgba(255, 255, 255, 0.85);
	pointer-events: none;
	animation: bg-fade-out 1s ease-in-out forwards;
	animation-delay: 1s;
}

.splash-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 80%;
	width: 400px;
	animation: move-to-exact-top 1s ease-in-out forwards;
	animation-delay: 1s;
}

@keyframes move-to-exact-top {
	0% {
		top: 50%;
		transform: translate(-50%, -50%) scale(1);
	}

	100% {
		top: 15px;
		transform: translate(-50%, 0) scale(0.5);
		transform-origin: top center;
	}
}

@keyframes bg-fade-out {
	0% {
		background-color: rgba(255, 255, 255, 0.85);
	}

	100% {
		background-color: rgba(255, 255, 255, 0);
	}
}

#seitenheader.be-layout-contentseite .logo img,
#seitenheader .topbereich #splash-screen img {
	transition: all 0.5s ease-in-out;
}

#seitenheader.be-layout-startseite .topbereich .logo img {
	width: 200px;
	height: auto;
	margin-top: 15px;
}

#seitenheader.be-layout-contentseite .topbereich .logo img,
#seitenheader.be-layout-blank .topbereich .logo img {
	width: 200px;
	height: auto;
	left: 50%;
	margin-left: -100px;
	margin-top: 15px;
	position: absolute;
}

#seitenheader.scroll.be-layout-contentseite .topbereich .logo img,
#seitenheader.be-layout-blank .topbereich .logo img {
	width: 100px;
	height: auto;
	margin-left: -50px;
}


#seitenheader.scroll.be-layout-startseite .topbereich .logo img {
	width: 100px;
	height: auto;
}

#seitenheader.scroll .topbereich img {
	width: 200px;
	height: auto;
}

.fullscreen-container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.fullscreen-image {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center;
}

#seitenheader .kopfbild,
#seitenheader .kopfbild-contentseite,
#seitenheader .kopfbild-contentseite img,
#seitenheader .kopfbild img {
	width: 100%;
	height: 100%;
}

#seitenheader .kopfbild img,
#seitenheader .kopfbild-contentseite img {
	object-fit: cover;
}

.be-layout-startseite .kopfvideo video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	object-position: center;
}

/*------------------------------------*\
  #CONTENT
\*------------------------------------*/
main.be-layout-blank {
	min-height: 1000px;
	padding-top: 200px;
}

/*------------------------------------*\
  #FOOTER
\*------------------------------------*/
footer {
	background: var(--hellgrau);
	color: var(--schwarz);
	padding-top: 50px;
	padding-bottom: 20px;
}

footer a {
	color: var(--schwarz);
}

footer a:hover {
	text-decoration: none;
}

#c5 {
	text-align: right;
}

/*------------------------------------*\
  #TYPO3
\*------------------------------------*/
p {
	margin-bottom: 20px;
}

strong {
	font-weight: 600;
}

.frame-space-before-extra-small {
	margin-top: 20px;
}

.frame-space-before-small {
	margin-top: 40px;
}

.frame-space-before-medium {
	margin-top: 600px;
}

.frame-space-before-large {
	margin-top: 80px;
}

.frame-space-before-extra-large {
	margin-top: 100px;
}

.frame-space-after-extra-small {
	margin-bottom: 20px;
}

.frame-space-after-small {
	margin-bottom: 40px;
}

.frame-space-after-medium {
	margin-bottom: 60px;
}

.frame-space-after-large {
	margin-bottom: 80px;
}

.frame-space-after-extra-large {
	margin-bottom: 100px;
}

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}

.error {
	color: red;
	font-size: 20px;
	font-weight: bold;
}

.ce-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
	text-align: center;
	line-height: 1.4;
	width: 100%;
}

.ce-gallery figcaption {
	display: block !important;
}

.frame-grauer-hintergrund {
	background: #eee;
	padding: 20px 20px 5px 20px;
}

/*------------------------------------*\
  #TABELLEN
\*------------------------------------*/
figure.table {
	border: none;
	margin: 0;
}

.table table.contenttable {
	width: 100%;
	border-collapse: unset;
}

.table table.contenttable tr {}

.table table.contenttable tr td {}

/*------------------------------------*\
  #BACK-TO-TOP
\*------------------------------------*/
.back-to-top {
	position: fixed;
	bottom: 100px;
	right: 20px;
	line-height: 1;
	padding: 10px;
	z-index: 100;
}

.back-to-top div {
	background-image: url(/typo3conf/ext/heizidee/Resources/Public/Icons/Template/Back_to_top.svg);
	background-size: contain;
	width: 50px;
	height: 50px;
}

a:hover.back-to-top div {
	background-image: url(/typo3conf/ext/heizidee/Resources/Public/Icons/Template/Back_to_top_hover.svg);
}

/*------------------------------------*\
  #INSTAGRAM EINBINDUNG
\*------------------------------------*/
.tx-ns-instagram .instamediaframe {
	position: relative;
	margin-bottom: 30px;
}

.tx-ns-instagram .instadatatimestamp {
	position: absolute;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	font-size: 16px;
	font-weight: 400;
	padding: 2px 10px;
	width: 100%;
}

.gallery-item {
	overflow: hidden;
	position: relative;
	display: block;
}

.gallery-image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease-in-out;
}

.gallery-item:hover .gallery-image {
	transform: scale(1.1);
}

/*------------------------------------*\
  #MEDIA-QUERIES
\*------------------------------------*/
@media (max-width: 1999.98px) {}

@media (max-width: 1699.98px) {}

@media (max-width: 1599.98px) {}

@media (max-width: 1399.98px) {}


@media (max-width: 1199.98px) {

	.splash-logo,
	.topbereich .logo {
		width: 250px;
	}
}

@media (max-width: 991.98px) {
	.container {
		max-width: 100%;
	}

	.nsinstagram-v1apiview .gallery-image {
		width: 100%;
		height: auto;
		object-fit: unset;
	}
}

@media (max-width: 767.98px) {
	.topbereich .kontakt-icons {
		left: 20px;
	}

	.topbereich .kontakt-icons .telefon {
		margin-right: 30px;
	}

	#c5 {
		text-align: left;
	}

	.tx-ns-instagram .instamediaframe {
		position: relative;
		margin-bottom: 30px;
	}
}

@media (max-width: 575.98px) {

	#seitenheader.scroll.be-layout-startseite .topbereich,
	#seitenheader.scroll.be-layout-contentseite .topbereich,
	#seitenheader.be-layout-blank .topbereich {
		background: unset;
	}

	#seitenheader.be-layout-startseite .topbereich,
	#seitenheader.be-layout-contentseite .topbereich,
	#seitenheader.be-layout-blank .topbereich {
		height: 100px;
		position: absolute;
		width: 100%;
	}

	#seitenheader .kontakt-icons,
	#seitenheader .topbereich #splash-screen {
		position: absolute !important;
	}

	#seitenheader.scroll .topbereich .menu-button-wrap .menu-button #menu-skiplink a.toggle.hc-nav-trigger.hc-nav-1 div {
		display: none;
	}

	#seitenheader.scroll .menu-button-wrap .menu-button #menu-skiplink a.toggle.hc-nav-trigger.hc-nav-1 i {
		background: rgba(0, 0, 0, 0.7);
		border-radius: var(--borderradius);
	}

	.topbereich .kontakt-icons {
		top: 5px;
		left: 25px;
		flex-direction: column;
	}

	.topbereich .kontakt-icons i {
		font-size: 30px;
	}

	.topbereich .kontakt-icons .telefon {
		margin-right: 0;
	}

	#seitenheader.be-layout-contentseite .topbereich .logo img,
	#seitenheader.be-layout-blank .topbereich .logo img {
		width: 125px;
		margin-left: -63.5px;
	}
}