@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://feucht.ad-concepts.de//content/themes/feucht/fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('https://feucht.ad-concepts.de//content/themes/feucht/fonts/open-sans-v44-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('https://feucht.ad-concepts.de//content/themes/feucht/fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	--color1: #ee4d9b;
	--color2: #f36f21;
	--color3: #ee3124;
	--color4: #f388b7;
	--color5: #f4805e;
	--color-font: #000;
	--color-white: #fff;
	--color-highlight: #d0dd28;
	--color-background: #fff;
	--max-width: 1440;
	--max-width-px: 1440px;
	--fontweight-regular: 400;
	--fontweight-medium: 500;
	--fontweight-bold: 700;
	--fontsize-small: 16px;
	--fontsize-normal: 18px;
	--fontsize-menu: 16px;
	--lineheight-equal: 1;
	--lineheight-small: 1.2;
	--lineheight-normal: 1.5;
	--sidepadding: 30px;
	--sidepadding-mobile: 20px;
	--sidepadding-standout: 40px;
}

body {
	background-color: var(--color-background);
	color: var(--color-font);
	font-size: var(--fontsize-normal);
	font-weight: var(--fontweight-regular);
	line-height: var(--lineheight-normal);
}

.content-block {
	width: 100%;
	max-width: var(--max-width-px);
	margin: 0 auto;
}

/* Header */
.page-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	background: linear-gradient(
    to bottom,
    var(--color1) 0%,
    var(--color1) 38.8889%,
    var(--color2) 38.8889%,
    var(--color2) 47.7778%,
    var(--color3) 47.7778%,
    var(--color3) 68.8889%,
    var(--color1) 68.8889%,
    var(--color1) 88.8889%,
    var(--color2) 88.8889%,
    var(--color2) 100%
  );
	font-size: 0;
	line-height: 0;
	z-index: 1000;

	.header-content {
		display: flex;
		justify-content: space-between;
		padding: 0 var(--sidepadding-standout);

		.burger-menu {
			display: none;
		}
	}

	.logo {
		position: relative;
		height: 100%;
		align-self: start;

		a {
			position: relative;
			display: block;
			width: 325px;
			height: 214px;
			background: url(https://feucht.ad-concepts.de//content/themes/feucht/img/Blumenhaus_Feucht_Logo.jpg) no-repeat top left transparent;
			background-size: contain;
		}
	}

	nav {
		position: relative;
		bottom: 65px;
		align-self: end;

		ul {
			list-style: none;
			display: flex;
			gap: 30px;

			li {
				&:hover, &:focus-within {
					ul {
						display: block;
					}
				}
			}
		}

		a {
			text-decoration: none;
			color: var(--color-white);
			font-size: var(--fontsize-menu);
			font-weight: var(--fontweight-medium);
			line-height: var(--lineheight-equal);
			display: block;

			&:hover {
				color: var(--color-highlight);
			}
		}

		li.menu-current-page > a {
			color: var(--color-highlight);
		}
	}
}

/* Footer */
footer {
	position: relative;
	padding-top: 50px;
	background-color: var(--color1);

	& > .decoline1, & > .decoline2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 35px;
		background-color: var(--color3);

		&.decoline2 {
			height: 15px;
			background-color: var(--color4);
		}
	}

	.contact-block {
		padding: 60px 0;

		*, a {
			color: var(--color-white);
			font-size: var(--fontsize-menu);
			font-weight: var(--fontweight-regular);
			line-height: var(--lineheight-normal);
		}

		.page-content {
			padding: 0 var(--sidepadding-standout);
		}

		.row-grid .row-grid-column:nth-child(4) {
			align-self: center;
		}
	}

	.footermenu-block {
		background-color: var(--color5);

		& > .content-block {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: "copyright links";
			align-content: center;
			padding: 30px var(--sidepadding-standout);
		}

		.footer-copyright {
			grid-area: copyright;
			align-self: center;
			font-size: var(--fontsize-small);
			font-weight: var(--fontweight-medium);
			line-height: var(--lineheight-equal);
			color: var(--color3);
		}

		.footer-content {
			display: grid;
			grid-area: links;
			align-self: center;

			nav {
				justify-self: end;

				ul {
					list-style: none;
					display: flex;
					gap: 20px;
					align-items: center;

					a {
						color: var(--color3);
						font-size: var(--fontsize-small);
						font-weight: var(--fontweight-medium);
						line-height: var(--lineheight-equal);
						display: block;
						text-decoration: none;
					}
				}
			}
		}
	}
}

@media (max-width: 1440px) {
	.maincontent > .page-content > .content-block {
		padding-left: var(--sidepadding) !important;
		padding-right: var(--sidepadding) !important;
	}
}

@media (max-width: 1024px) {
	.page-header {
		height: 80px !important;

		& + main {
			padding-top: 80px;
		}

		.header-content {
			padding: 0;
		}

		.logo {
			padding-left: var(--sidepadding) !important;

			a {
				width: 150px;
				height: 100px;
			}
		}

		.pagemenu-mainmenu {
			display: none;
		}

		.burger-menu {
			position: absolute;
			top: 0;
			right: 0;
			align-self: center;
			border: none;
			cursor: pointer;
			display: flex !important;
			flex-direction: column;
			justify-content: space-between;
			width: 80px;
			height: 80px;
			padding: 25px 15px;
			background: transparent;

			.bar {
				width: 50px;
				height: 4px;
				background-color: var(--color-white);
				border-radius: 4px;
				transform-origin: center;
				transition: all 0.3s ease;
			}

			&.active {
				background-color: rgba(238, 77, 155, .8);

				.bar {
					width: 50px;

					&:nth-child(1) {
						transform: translateY(12px) rotate(45deg);
					}
					&:nth-child(2) {
						opacity: 0;
					}
					&:nth-child(3) {
						transform: translateY(-13px) rotate(-45deg);
					}
				}

				+ .pagemenu-mainmenu {
					display: block;
					position: absolute;
					top: 80px;
					bottom: auto;
					right: 0;
					background-color: rgba(238, 77, 155, .8);
					padding: 50px 30px;
					max-height: 80vh;
					overflow: auto;

					ul {
						display: grid;
						grid-gap: 30px;
						grid-template-columns: 1fr;

						a {
							display: block;
							text-align: center;
						}
					}
				}
			}
		}
	}

	footer {
		.contact-block {
			.page-content {
				padding: 0 calc(var(--sidepadding-standout) * 2);
			}

			.row-grid {
				grid-template-columns: 1fr 1fr !important;

				.row-grid-column {
					grid-column: auto !important;
				}
			}
		}

		.footermenu-block {
			& > .content-block {
				grid-template-columns: 1fr;
				grid-template-areas: "links" "copyright";
				grid-gap: 50px;
				height: auto;

				> div {
					justify-self: center;
					align-self: center;
				}
			}
		}
	}
}


/* Main Content */
main {
	width: 100%;
	padding-top: 180px;
	min-height: calc(100vh - 180px);

	a {
		text-decoration: none;
		color: var(--color-font);

		&:hover {
			text-decoration: underline;
		}
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: var(--fontweight-medium);
		margin-bottom: 1em;
	}

	h1 { font-size: 25px; }
	h2 { font-size: 22px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
	h5 { font-size: 16px; }
	h6 { font-size: 14px; }

	strong {
		font-weight: var(--fontweight-bold);
	}

	p, ul {
		margin-bottom: 1.5em;
	}
	li {
		margin-bottom: .5em;
	}

	p + ul {
		margin-top: -1.3em;
	}

	ul {
		margin-left: 20px;
		list-style-type: none;

		li::before {
			content: '-';
			display: inline-block;
			margin-right: 10px;
		}
	}

	.page-content > div:first-child:not(section) {
		margin-top: calc(var(--sidepadding-standout) * 2);
	}
	.page-content > .content-block:last-child {
		margin-bottom: calc(var(--sidepadding-standout) * 2);
	}

	.imgslider-fullsize .imgslider-item {
		max-height: 1100px !important;
	}
	.slick-dots {
		left: calc(50% - (var(--max-width-px) / 2));
		width: var(--max-width-px);
		max-width: 100%;
		display: flex;
		justify-content: end;
		padding: 0 40px;
		bottom: 20px;

		li {
			button::before {
				font-size: 20px;
				color: var(--color1);
				opacity: 1;
			}

			&.slick-active button::before {
				color: var(--color2);
				opacity: 1;
			}
		}
	}

	.rows-third {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 40px;
		font-size: 24px;
	}
}

@media (max-width: 1440px) {
	main {
		.slick-dots {
			left: 0;
			width: 100%;
		}
	}
}

@media (max-width: 1024px) {
	.mobilecenter > div {
		margin: 0 auto;
	}

	main {
		.imgslider-fullsize .imgslider-item {
			max-height: 500px !important;
		}

		.slick-dots {
			justify-content: center;
			bottom: -30px;

			li button::before {
				font-size: 14px;
			}
		}
	}
}

@media (max-width: 768px) {
	main {
		.imgslider-fullsize .imgslider-item {
			max-height: 230px !important;
		}

		.rows-third {
			display: grid;
			grid-template-columns: 1fr;
			gap: 40px;
		}
	}
}