/*
 * Landingpage-spezifische Styles.
 * Das main.css aus pxdreibrueder wird weiterhin geladen; diese Datei wird
 * danach eingebunden und ueberschreibt per CSS-Kaskade gezielt einzelne Regeln.
 * Hier nur LP-spezifische Anpassungen ergaenzen.
 */

:root {
	--main-color: #184f61;
	--second-color: #22434d;
	--highlight-color: #137e9a;
	--button-secondary: #1691b1;
	--font-color: #5e5e5e;
	--headline-color: #494949;
	--background-color: #f6f6f6;
	--contrast-color: #000;
	--contrast-color-inverted: #fff;
	--baseWidth: 92%;
}

body {
	h1 {
		color: var(--main-color);
	}

	.site {
		.main {
			&::before {
				display: none;
			}
		}

		#subhead {
			p {
				line-height: 1.4;

				@media (max-width: 1200px) {
					font-size: 16px;
				}
			}
		}

		.ce-image .ce-gallery .image img {
			@container (width < 960px) {
				width: initial;
				height: revert-layer;
			}
		}

		.px-imagetiles {
			.px-imagetiles-inner {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;

				.item {
					background-color: var(--contrast-color);
					background: no-repeat center 40% / cover;
					width: calc(33.333% - (2*20px/3));
					position: relative;
					overflow: hidden;
					min-height: clamp(345px, 23vw, 500px);
					max-height: 480px;
					color: var(--contrast-color-inverted);
					display: flex;
					align-items: flex-end;
					transition: background-position calc(700ms * 1) cubic-bezier(0.19, 1, 0.22, 1), transform calc(700ms * 2) cubic-bezier(0.19, 1, 0.22, 1);
					box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
						0 2px 2px rgba(0, 0, 0, 0.1),
						0 4px 4px rgba(0, 0, 0, 0.1),
						0 8px 8px rgba(0, 0, 0, 0.1),
						0 16px 16px rgba(0, 0, 0, 0.1);

					.content {
						transform: translateY(calc(100% - 20px * 5 - 105px));
						padding: 60px 40px 40px 40px;
						transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
						display: grid;
						align-content: center;
						gap: 20px;
						z-index: 2;

						.text {
							opacity: 0;
							transform: translateY(50%);
							transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity calc(700ms * 1.5) cubic-bezier(0.19, 1, 0.22, 1);

							p+p {
								margin-top: initial;
							}

							.button {
								margin-top: 20px;
								padding: 10px 20px;
								transition: background-color calc(700ms * 1) cubic-bezier(0.19, 1, 0.22, 1);
								background: var(--mainColor);

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

								&::before {
									display: none;
								}
							}
						}


						.logo {
							img {
								height: 100%;
								max-width: 100%;
								max-height: 80px;
								object-fit: contain;
							}
						}

						@media (max-width: 1200px) {
							padding: 40px 20px 20px 20px;
						}
					}

					&::before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 200%;
						transform: translateY(-30%);
						pointer-events: none;
						background-image: linear-gradient(to bottom,
								hsla(0, 0%, 0%, 0) 0%,
								hsla(0, 0%, 0%, 0.009) 11.7%,
								hsla(0, 0%, 0%, 0.034) 22.1%,
								hsla(0, 0%, 0%, 0.072) 31.2%,
								hsla(0, 0%, 0%, 0.123) 39.4%,
								hsla(0, 0%, 0%, 0.182) 46.6%,
								hsla(0, 0%, 0%, 0.249) 53.1%,
								hsla(0, 0%, 0%, 0.320) 58.9%,
								hsla(0, 0%, 0%, 0.394) 64.3%,
								hsla(0, 0%, 0%, 0.468) 69.3%,
								hsla(0, 0%, 0%, 0.540) 74.1%,
								hsla(0, 0%, 0%, 0.607) 78.8%,
								hsla(0, 0%, 0%, 0.668) 83.6%,
								hsla(0, 0%, 0%, 0.721) 88.7%,
								hsla(0, 0%, 0%, 0.762) 94.1%,
								hsla(0, 0%, 0%, 0.790) 100%);
						transition: transform calc(700ms * 2) cubic-bezier(0.19, 1, 0.22, 1);
						transition: all 0.3s ease-in-out;
					}

					&:hover {
						transform: scale(1.05);

						&::before {
							transform: translateY(-50%);
						}

						.content {
							transform: translateY(0);

							.text {
								opacity: 1;
								transform: translateY(0);
							}
						}

						@media (max-width: 1200px) {
							transform: scale(1.02);
						}
					}

					@media (max-width: 1200px) {
						width: 100%;
						min-height: 300px;
					}
				}
			}
		}

		.foot {
			.inner {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 18px;

				.footnav {
					display: flex;
					gap: 20px;

					li {
						a {
							text-decoration: underline;
							font-size: 16px;
						}
					}
				}

				.copy {
					font-size: 14px;
					opacity: 0.6;
					text-align: center;
				}
			}
		}

		.main {
			.cont {
				>div.frame:first-of-type {
					margin-top: initial;
				}
			}
		}

		.frame {
			&:last-child {
				margin-bottom: 40px;
			}
		}
	}
}