/* Schriften (lokal gehostet, nur die verwendeten Schnitte) */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-v20-latin-regular.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/poppins-v20-latin-500.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-v20-latin-600.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-v20-latin-700.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-slab-v24-latin-700.woff2") format("woff2");
}

html {
	font-family: "Poppins", sans-serif;
}

/* Hintergrund als WebP, JPG als Rückfall */
.bg-homeBg {
	background-image: url("../images/bg.jpg");
	background-image: image-set(url("../images/bg.webp") type("image/webp"), url("../images/bg.jpg") type("image/jpeg"));
}

/* Icons (Inline-SVG) */
.bi {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

.t-dotted {
	border: 0;
	border-bottom: 1px dashed #FA5252;
	display: inline;
	font-weight: bold;
}

a.resume-btn {
	cursor: pointer;
	transition: color 0.3s;
}
a.resume-btn:hover {
	color: #fa5252;
}

/* Spamschutz-Feld im Kontaktformular verstecken */
.hp-field {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

:disabled {
	opacity: .5 !important;
	cursor: not-allowed !important;
}

/* active color */
.is-active {
	color: #fa5252 !important;
}

/* Galerie */
.fillter-btn.is-checked {
	color: #fa5252;
}
.mymix {
	min-height: 50vh;
	margin-left: -10px;
	margin-right: -10px;
}
.three-col .isotop-item,
.three-col .grid-sizer {
	width: 33.33%;
	padding: 0 10px;
}
.two-col .isotop-item,
.two-col .grid-sizer {
	width: 50%;
	padding: 0 10px;
}
@media (max-width: 1199px) {
	.three-col .isotop-item,
	.three-col .grid-sizer {
		width: 50%;
	}
}
@media (max-width: 576px) {
	.three-col .isotop-item,
	.three-col .grid-sizer,
	.two-col .isotop-item,
	.two-col .grid-sizer {
		width: 100%;
	}
}
.three-col .isotop-item > div,
.two-col .isotop-item > div {
	margin-bottom: 20px;
}

/* Modal */
.modal {
	max-width: 1000px !important;
}
/* Zentrierung aus Tailwind (.modal-container) gegen jquery.modal (.modal { position: relative }) absichern */
.modal-container.modal {
	position: absolute;
}
.modal a.close-modal {
	display: none;
}
.jquery-modal.blocker {
	z-index: 9999999999;
}
.close {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	top: -20px;
	right: -20px;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 50%;
	filter: invert(0.9);
	transition: 0.3s;
}
.close:hover {
	filter: invert(1);
}
@media only screen and (max-width: 992px) {
	.close {
		top: -45px;
		right: 5px;
		width: 40px;
		height: 40px;
	}
}

/* Scrollbar */
.scrollbarLight::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.scrollbarLight::-webkit-scrollbar-track {
	border-radius: 100vh;
	background: #e9e3e3;
}
.scrollbarLight::-webkit-scrollbar-thumb {
	background: #797979;
	border-radius: 100vh;
	border: 5px solid #9c9fa1;
}
.scrollbarLight::-webkit-scrollbar-thumb:hover {
	background: #111111;
}
@media only screen and (min-width: 1700px) {
	.scroll-hide-1700 {
		overflow: hidden;
	}
}

/* Autofill-Hintergrund im Formular entfernen */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: gray;
	transition: background-color 5000s ease-in-out 0s;
	background: none !important;
}