/*
Theme Name: FWB
Author: Sebastian Starke
Author URI: https://erzberg.design/
Version: 0.1.0



- Gruppen posten
- Aktuelles


- h1
- Button animation
- Sitemap einreichen

- Urlaubsfeld
- Akzidenz kaufen
- Cookie-Icon?
- Erstes Cover bleibt stheen auf dem Handy
- Parallax allgemein?
- Grid: Tablet 3-4 Spalten
- Grid: Riesenmonitore 6 Spalten
- Tablet aussenabstände
- Inline Above the fold CSS.

- info@

*/


body > footer {
	background: var(--color-white);
	padding-block-start: 6.8rem;

	& .col-fixed {
		display: inline-block;
		width: calc(var(--lineheight) * 3.3);
	}

	@media (max-width: 1023px) {
		position: relative;
		padding-block-start: 3.8rem;
		font-size: var(--fontsize-small);
		line-height: var(--lineheight-small);

		& .social-icons {
			position: absolute;
			top: 4.1rem;
			right: var(--sitepadding);
		}

		& .copyright {
			display: block;
		}
	}

	& > div:last-child {
		padding-block: var(--lineheight);
		display: flex;
		align-items: center;
		gap: calc(var(--lineheight) * 0.6);
		position: relative;

		@media screen and (min-width: 1024px) {
			justify-content: center;
		}

		& svg {
			height: calc(var(--lineheight) * 1.4);
			width: calc(var(--lineheight) * 3);
			margin-block-start: calc(var(--lineheight) * -0.3);
			transition: fill var(--transition-short);
		}

		& a:is(:hover, :focus, :active) svg {
			fill: var(--color-highlight);
		}
	}

	& hr {
		margin-block: 1.3rem 0;
		@media screen and (min-width: 1024px) {
			margin-block-start: 3rem;
		}
	}

	& .wp-block-columns {
		align-items: flex-end;

		& .wp-block-column:last-of-type {

			& a {
				letter-spacing: 0.02em;
				text-transform: uppercase;
				text-decoration: none;
			}

			@media screen and (min-width: 1400px) {
				padding-inline-start: var(--gap-inline);
			}

		}

		@media screen and (max-width: 1600px) {
			gap: 3%;
			& .wp-block-column:nth-child(1),
			& .wp-block-column:nth-child(2) {
				flex-basis: 33.3333% !important;
			}
			& .wp-block-column:nth-child(3) {
				flex-basis: 27.3% !important;
			}
		}
	}

	& .social-icons {
		display: flex;
		gap: calc(var(--lineheight) * 0.5);

		@media screen and (min-width: 1024px) {
			margin-block-end: calc(var(--lineheight) * 2.9);
		gap: calc(var(--lineheight) * 1);
		}
	}

	& .wp-block-column:nth-child(2) {
		display: flex;
		flex-direction: column;
	}
}

.post-preview {
	text-decoration: none;

	& h3 {
		text-transform: none;
		margin-block-start: calc( var(--lineheight) * 0.3 );
		line-height: 1.1em;
		min-height: calc( var(--lineheight) * 1.89 );

		@media (min-width: 1500px) {
			padding-right: var(--lineheight);
		}
	}

	& div {
		overflow: hidden;
		position: relative;
	}

	& img {
		object-fit: cover;
		transition: transform var(--transition-short);
		will-change: transform;
	}

	&:hover img {
		transform: scale(1.1);
	}

}

a.jobs-preview {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-block: 0.58em 0.52em;
	font-size: var(--fontsize-small);

	&:not(:last-of-type) {
		border-block-end: none;
	}

	& + a.jobs-preview {
		margin-block-start: 0;
	}

	&:is(:hover, :focus, :active) {

		& + a.jobs-preview {
			border-block-start: var(--border-width) solid var(--color-highlight);
		}
		
	}

	& h3 {
		text-transform: none;
		font-size: var(--fontsize);
		padding-inline-end: calc(var(--lineheight) * 0.5);
	}
}

.box {
	width: 100vw;
	max-width: 100vw;
	padding: calc(var(--gap-inline) * 0.5);
	margin-inline: calc(var(--sitepadding) * -1);
	margin-block-end: calc(var(--lineheight) * 1);

	@media (min-width: 1024px) {
		width: 100%;
		max-width: 100%;
		margin: calc(var(--gap-inline) * -1) 0 0 0;
		padding: calc(var(--gap-inline) * 1);
	}
}

.infobox {
	color: var(--color-white);
	background: var(--color-highlight);
	font-weight: 900;
	padding: calc(var(--lineheight) * 0.45) calc(var(--lineheight) * 0.8) calc(var(--lineheight) * 0.25) calc(var(--lineheight) * 0.8);
	margin-block-start: calc(var(--lineheight) * -0.1);

	& + * {
		margin-block-start: calc(var(--lineheight) * 0.35);
	}

	@media (max-width: 1023px) {
		order: 1;
		margin-block-start: calc(var(--lineheight) * 1.5);

		& + * {
			margin-block-start: calc(var(--lineheight) * 0);
		}
	}

}

.history {


	.wp-block-column:nth-child(1) {
		text-align: center;
	}

	& h2::after {
				      left: calc(50% - 0.25em);
    bottom: -0.5em;
		content: '';
		position: absolute;
		width: 0.5em;
		height: 0.5em;
		border-radius: 0.25em;
		background: var(--color-highlight);
	}
}


@media (min-width: 576px) {

	h1, h2, h3, h4, h5, h6 {
		-ms-word-break: normal;
		word-break: normal;
	}

	p {
		hyphens: none;
	}

}

@media (max-width: 1023px) {

	.hidden-on-mob {
		display: none;
	}

	.alignfull-on-mob {
		width: 100vw !important;
		max-width: 100vw;
	}

	:where(main, .is-layout-constrained, .wp-block-columns) > .alignfull-on-mob {
		margin-inline: calc(var(--sitepadding) * -1);
	}

	.is-layout-constrained-on-mob {
		padding-inline: var(--sitepadding);
	}

	.switch-order .wp-block-column:last-child {
		order: -1;
	}

 	.history .wp-block-columns {
		margin-block-start: calc(var(--lineheight) * 2);
	}

	.page-id-201 main > div:last-of-type {
		margin-block-end: 0;
	}

	.single-jobs {
		& .wp-block-column .wp-block-group {
			width: 100vw;
			max-width: 100vw;
			padding-block: var(--lineheight);
			margin-inline: calc(var(--sitepadding) * -1);
			padding-inline: var(--sitepadding);
			margin-block-start: 0;
		}
		& .wp-block-column .wp-block-group:nth-of-type(1) {
			margin-block-start: var(--lineheight);
		}
		& .wp-block-column .wp-block-group:nth-of-type(odd) {
			background: var(--color-white);
		}
		& .wp-block-column .wp-block-group:nth-of-type(even) {
			background: rgba(126,127,126,0.2);
		}
	}
}

@media (min-width: 1024px) {

	.hidden-on-desk {
		display: none;
	}

	main > .alignwide .wp-block-column:last-child {
		padding-inline-end: calc(var(--sitepadding) * 1);
	}

	main > .alignwide:first-child .wp-block-column:first-child {
		position: relative;
    	z-index: -1;
	}

	main > .alignwide:first-child .wp-block-column:first-child:after,
	main > .alignwide:first-child .wp-block-column:first-child:before {
		content: '';
    	display: block;
    	position: absolute;
    	height: 85%;
    	top: 6%;
	    right: -20%;
    	border-radius: 100%;
    	aspect-ratio: 1;
    	background: rgb(255, 255, 255);
    	z-index: -2;
		pointer-events: none;

		opacity: 1;
		transform: translateX(0);
		animation: slideFadeIn var(--transition-long);
		backface-visibility: hidden;
	}

	main > .alignwide:first-child .wp-block-column:first-child:before {
    	opacity: 0.4;
    	mix-blend-mode: overlay;
    	z-index: 0;
	}

	.history {

		.wp-block-columns {
			position: relative;
			padding-block-end: var(--lineheight);
			gap: 0;
			margin-block-start: 0;

			&::after {
				content: '';
				position: absolute;
				width: var(--border-width);
				height: 100%;
				left: calc(50% - var(--border-width) * 0.5);
				top: 0;
				background: var(--color-text);
			}

			&:first-child::after,
			&:last-child::after {
				height: 50%;
			}

			&:first-child::after {
				top: auto;
				bottom: 0;
			}
			
			& .wp-block-column {
				flex-basis: calc( 50% - var(--gap-inline) ) !important;

				&:nth-child(1) {
					order: 2;
					flex-basis: calc(var(--gap-inline) * 2) !important;
					& h2 {
						background: var(--color-background);
						padding: 0.25em 0.25em 0.8em 0.25em;
						position: relative;

						&::after {
				      bottom: 0.35em;
				    }
					}
				}
			}

			&:nth-child(even) {
				& .wp-block-column:nth-child(2) {
					order: 1;
					& img {
						margin-inline-start: auto;
					}
				}
				& .wp-block-column:nth-child(3) {
					order: 3;
				}
			}

			&:nth-child(odd) {
				& .wp-block-column:nth-child(2) {
					order: 3;
				}
				& .wp-block-column:nth-child(3) {
					order: 1;
					text-align: right;
				}
			}
		}
	}

}
@keyframes slideFadeIn {
	from {
	  opacity: 0;
		transform: scale(0.8);
	}
}


@media (min-width: 1600px) {

	:is(site-header, main, footer) > :not(.alignwide, .alignfull) {
		max-width: var(--widesize);
		padding-inline: calc(var(--sitepadding) * 1);
	}

	main > .alignwide:first-child .wp-block-column:last-child {
		padding-inline-end: calc(var(--sitepadding) * 2);
	}

}

@media screen and (min-width: 2561px) {

	main > .alignwide {
		margin-inline: auto;
	}

}