/*
Theme Name:		Eberle
Theme URI: 		http://eberle-beck.ch
Version: 		1.01
Author: 		mig
Author URI: 	http://miggroup.ch
*/

@import "assets/fonts/stylesheet.css";


/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */


strong {
	font-weight: 600;
}


/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border: none;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}


.wp-block-buttons {
	gap: 0.5rem !important;
}


/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {

}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {

	width: 100%;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {

	width: inherit;
}



/* WEBSITE */


* {
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
}


body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

html, body {
	overflow-x: hidden;

}




.entry-content > .wp-block-group {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding-top:2rem;
	padding-bottom:2rem;
}

	@media (min-width: 600px) {
		.entry-content > .wp-block-group {
			padding-top:5rem;
			padding-bottom:5rem;
		}
	}

.entry-content > .wp-block-cover:first-child {
	height: 45vw !important;
	min-height: 50vh !important;
}

	.entry-content > .wp-block-cover:first-child h1 {
		line-height: 100%
	}

	.entry-content > .wp-block-cover:first-child h1::after {
		line-height: 120% !important
	}

	.entry-content > .wp-block-cover:first-child h1 + h3 {
		margin-top: -1rem !important;
	}

		@media (min-width: 800px) {
			.entry-content > .wp-block-cover:first-child h1 + h3 {
				line-height: 120%;
				margin-top: -1.5rem !important;
			}
		}

.entry-content,
footer {margin-block-start: 0 !important;}


a, a:link, a:visited, a:hover, a:active {
 color: inherit ;
}


body {
	padding-top: 6rem;
}


header {
	box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
	z-index: 9;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 6rem;
	display: flex;
	align-items: center;
	background: #fff;
	z-index: 9999;
}

	header .wp-block-site-logo {
		margin-bottom: 0;
		width: 12rem;
		height: auto;
	}

		@media (max-width: 600px) {
			header .wp-block-site-logo {
				width: 9rem;
				height: auto;
			}

		}

		@media (max-width: 782px) {
			header .wp-block-columns {
				display: flex !important;
				flex-flow: row wrap !important;
				gap: 0 !important
			}

			header .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
				flex-basis: 25% !important;
			}

			header .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2) {
				flex-basis: 50% !important
			}
		}


	header .wp-block-group {
		padding-top: 0;
		padding-bottom: 0;
	}

	header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--primary) !important;
	}

	header nav.has-background-background-color {
		background: none !important;
	}

	@media (max-width: 599px) {
		header .wp-block-columns  {
			display: flex !important;
			flex-flow: row wrap !important;
			gap: 0 !important;
			position: relative;
		}

		header .wp-block-columns .wp-block-column {
			flex-basis: 50% !important;
		}

		header .wp-block-columns .wp-block-column:nth-child(1) nav {
			position: absolute;
			top: 0;
			left: 0;
			width: 15% !important;
			margin-top: 1rem;
		}

		header .wp-block-navigation__responsive-container-open  {
			transform: scale(1.2) scaleX(150%);
			color: var(--wp--preset--color--primary) !important;
		}

		header .wp-block-columns .wp-block-column:nth-child(1) nav ul li {
			font-size: 2rem;
			line-height: 120%;
			margin-bottom: 0.25rem;
		}

		/* header .wp-block-columns .wp-block-column:nth-child(1) {
			flex-basis: 80% !important;
			width: 80% !important;
		} */
	}

nav {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 100%;
	text-transform: uppercase;
}

	header nav ul {
		gap: 0 !important
	}



h1 {
	padding-top: 1rem;
}

h1 + h2 {
	margin-block-start: 0 !important;
}

@media (max-width: 1000px) {
	body {
		--wp--preset--font-size--x-large: 3rem;
		--wp--preset--font-size--large: 1.25rem;
	}

}

@media (max-width: 500px) {
	body {
		--wp--preset--font-size--x-large: 2rem !important;
		--wp--preset--font-size--large: 1rem ;
	}
}

@media (min-width: 1400px) {
	body {
		--wp--preset--font-size--medium: 20px !important;
		line-height: 120% !important

	}
}

@media (min-width: 1600px) {
	body {
		--wp--preset--font-size--medium: 22px !important;
		line-height: 120% !important

	}
}

@media (min-width: 1800px) {
	body {
		--wp--preset--font-size--medium: 24px !important;
		line-height: 120% !important

	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block-end: 0.5em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
	margin-block-start: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
	margin-bottom: 0;
	margin-block-end: 0;
}



h1::after,
h2::after {
	display: block;
	content: "—";
	line-height: 0.2em;
	font-size: 0.7em;
}

.push-right em,
.push-left em {
	font-style: normal;
}

@media (min-width: 600px) {
	.push-right,
	.push-left {
		position: relative;
		z-index: 9;
	}

	.push-right em {
		transform: translateX(40%);
		display: block;
		font-style: normal;
		word-break: keep-all;
		white-space: nowrap;
	}

	.push-left em {
		transform: translateX(-40%);
		display: block;
		font-style: normal;
		word-break: keep-all;
		white-space: nowrap;
	}
}

@media (max-width: 599px) {
	.has-text-align-right {
		text-align: left;
	}
}

.push-right::after {

}

.is-uppercase {
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--large);
	line-height: 120%;
}


.has-loaded .wp-block-media-text .wp-block-media-text__media,
.has-loaded .wp-block-media-text .wp-block-media-text__content {
	transition: all 0.7s ease-out;
}

.wp-block-media-text .wp-block-media-text__media {
	padding-right: 1.25rem;
	transform: translateX(-30%);
	opacity: 0;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
	padding-left: 1.25rem;
	transform: translateX(30%);
}


@media (max-width: 599px) {
	.wp-block-media-text .wp-block-media-text__media {
		padding-right: 0;
	}

	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
		padding-left: 0;
	}
}

.wp-block-media-text .wp-block-media-text__content {
	transform: translateX(30%);
	opacity: 0;
	z-index: 9
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	transform: translateX(-30%);
}

.wp-block-media-text.is-in-viewport .wp-block-media-text__media,
.wp-block-media-text.is-in-viewport .wp-block-media-text__content {
	opacity: 1;
	transform: translateX(0);
}

.has-tertiary-background-color {
	background: url(assets/images/eberle-bg-01.png) repeat top left;
	background-size: cover;
}

.product-spacer {
	height: 12rem;
}

.wp-block-gallery.slider {
	display: block !important;
	margin-top: -17rem;
}

.wp-block-gallery.slider .wp-block-image {
	width: 100% !important;
	margin
}

@media (min-width: 800px) {
	.wp-block-gallery.slider .wp-block-image {
		width: 50% !important;
		padding: 1rem;
	}

	.flickity-prev-next-button.next {
		right: -2em !important;
		color: var(--wp--preset--color--primary) !important;
		background: none !important;
		transform: scale(1.5);
	}

	.flickity-prev-next-button.previous {
		left: -2em !important;
		color: var(--wp--preset--color--primary) !important;
		background: none !important;
		transform: scale(1.5);
	}
	}

	@media (min-width: 1400px) {

		.flickity-prev-next-button.next {
			right: -4em !important;
		}

		.flickity-prev-next-button.previous {
			left: -4em !important;
		}
	}

.wp-block-gallery.slider .wp-block-image img {
	aspect-ratio: 4 / 3;
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

.wp-block-navigation__responsive-container-open {
	transform: scaleX(1.5);
}

.wp-block-navigation__responsive-container-content {
	padding-left: 40%;
	min-height: calc(100vh - 4rem);
	justify-content: center !important;
}

	@media (min-width: 800px) {
		.wp-block-navigation__responsive-container-content {
			padding-left: 50%;
		}
	}

	ul.wp-block-navigation__container {
		justify-content: center !important;
	}

	.wp-block-navigation__responsive-container-content::before {
		content: "";
		background: url(https://projects.botanibot.com/eberle/app/uploads/2023/02/gipfel.svg) no-repeat center right;
		background-size: contain;
		position: absolute;
		width: calc(40% - 3rem);
		left: 1rem;
		top: 10%;
		bottom: 10%;
	}

		@media (min-width: 800px) {
			.wp-block-navigation__responsive-container-content::before {
				width: calc(50% - 15%);
				left: 10%;
			}
		}

	.wp-block-navigation__responsive-container-content ul,
	.wp-block-navigation__responsive-container-content ul li {
		align-items: flex-start !important;
		width: 100%;
	}

	.wp-block-navigation__responsive-container-content ul ul {
		padding: 0 !important;
		margin: 0.25em 0;
	}

		.wp-block-navigation__responsive-container-content ul ul li {
			font-size: 1.5rem !important;
			line-height: 120% !important
		}

.about-spacer {
	height: 10rem;
}

.about-columns {
	gap: 2rem !important;
	margin-top: -15rem !important;
}

.about-columns .wp-block-image {
	margin-bottom: 2rem !important
}

@media (min-width: 782px) {
.about-spacer {
	height: 15rem;
}

.about-columns {
	gap: 3rem !important;
	margin-top: -20rem !important;
}

	.about-columns .wp-block-image {
		margin-bottom: 3rem !important
	}

	.about-columns .wp-block-column:nth-child(1) p {
		margin-left: 3rem
	}

	.about-columns .wp-block-column:nth-child(2) {
		padding-top: 8rem
	}
}

.cta-columns {
	gap: 0 !important;
	margin-top: 6rem !important
}

	.cta-columns .wp-block-column > .wp-block-group {
		padding: 2rem !important;
	}

	@media (min-width: 782px) {
		.cta-columns .wp-block-column > .wp-block-group {
			padding: 2rem 4rem !important;
		}
	}

	@media (min-width: 782px) {
		.cta-columns .wp-block-column:nth-child(1) {
			min-height: 46vw;
			display: flex;
			align-items: center;
		}

		.page-id-33 .cta-columns .wp-block-column:nth-child(1) {
			min-height: 0;
			display: flex;
			align-items: flex-end;
		}

		.page-id-33 .cta-columns .wp-block-column:nth-child(2) {
			min-height: 46vw;
			display: flex;
			align-items: center;
		}

		.cta-columns .wp-block-column:nth-child(1) > .wp-block-group {
			margin-right: 10%;
		}
		.cta-columns .wp-block-column:nth-child(2) > .wp-block-group {
			margin-left: 10%;
		}
	}

	.cta-columns .wp-block-column:nth-child(2) img {
		position: relative;
		transform-origin: bottom right;
	}

	.cta-columns .wp-block-column:nth-child(1) img {
		position: relative;
		transform-origin: bottom left;
	}

	@media (min-width: 782px) {
		.cta-columns .wp-block-column:nth-child(2) img {
			transform: scale(1.1);
		}

		.cta-columns .wp-block-column:nth-child(1) img {
			transform: scale(1.1);
		}
	}


.has-loaded .cta-columns img {
	transition: all 0.7s ease-out;
}


.cta-columns img {
	opacity: 0;
	transform: translateY(50%);
}

.cta-columns.is-in-viewport img {
	opacity: 1;
	transform: translateY(0);
}


	form .form-row {
		width: 100%;
		margin-bottom: 0.5rem;
	}

	form .form-row p {
		margin-block-start: 0
	}

	form input[type='text'],
	form input[type='email'],
	form input[type='tel'],
	form input[type='number'],
	form input[type='submit'],
	form textarea {
		background: #FFF;
		color: #000;
		appearance: none;
		-webkit-appearance: none;
		border: 0;
		padding: 0.25rem 0.25rem 1rem 0.25rem;
		font: inherit;
		width: calc(100% - 0.5rem);
		outline: none;
		transition: all 0.2s ease-in-out;
	}

	form input::placeholder,
	form textarea::placeholder {
		color: #000000;
	}

	form input[type='text']:focus,
	form input[type='email']:focus,
	form input[type='tel']:focus,
	form input[type='number']:focus,
	form input[type='submit']:focus,
	form textarea:focus {
		border: 2px solid #FFF;
	}

	form textarea {
		height: 9rem;
	}

	form input[type='submit'] {
		flex: 0;
		background: #a14a48;
		border: 0;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 0.8rem;
		line-height: 120%;
		flex-basis: 0;
		padding: 1rem 2rem;
		width: 100%;
	}

	.hidden {
		display: none;
	}


footer {
	font-size: 0.867rem;
	line-height: 120%;
}

	footer > .wp-block-group  {
		padding-top: 4rem !important;
		padding-bottom: 0 !important;
	}

	footer .wp-block-columns > .wp-block-column {
		margin-bottom: 2rem;
	}

	footer .wp-block-columns > .wp-block-column:nth-child(1) {
		position: relative;
		overflow: hidden;
		margin-bottom: 0
	}

	footer .wp-block-columns > .wp-block-column:nth-child(1) img {
		position: absolute;
		width: 100%;
	}



		footer .wp-block-group > .wp-block-columns > .wp-block-column > .wp-block-columns > .wp-block-column {
			padding-left: 0;
			padding-right: 1rem;
			min-height: 100%;
		}

		footer .wp-block-group > .wp-block-columns > .wp-block-column > .wp-block-columns > .wp-block-column:nth-child(1) {
			white-space: nowrap;
		}

	@media (min-width: 782px) {
		footer .wp-block-group > .wp-block-columns > .wp-block-column > .wp-block-columns > .wp-block-column {
			border-left: 1px solid #fff;
			padding-left: 1rem;
			padding-right: 1rem;
		}

		footer .wp-block-group > .wp-block-columns > .wp-block-column > .wp-block-columns > .wp-block-column:nth-child(1) {
			border-left: 0;
			padding-left: 0;
		}
	}


@media (max-width: 599px) {

	.wp-block-media-text__content {
		padding: 2rem 0 0 0 !important
	}
}


header .stoerer {
	width: 7rem;
	height: 7rem;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 40%;
	z-index: 99;
	margin-left: -12rem;
	border-radius: 100%;
	overflow: hidden;
	transition: all 0.2s ease-out;
}

	header .stoerer:hover {
		transform: translateX(-50%) scale(1.1);
		box-shadow: 0 0 0.75rem rgba(0,0,0,0.4)
	}

	@media (max-width: 781px) {
		header .stoerer {
			width: 4rem;
			height: 4rem;
		}
	}

	@media (max-width: 599px) {
		header .stoerer {
			margin-left: -8rem;
		}
	}

	@media (min-width: 800px) {
		header .stoerer {
			margin-left: -20rem;
		}
	}

.page-id-35 header .stoerer {
	display: none;
}



.counters {
	position: relative;
	padding-top: 30vw !important
}

	@media (min-width: 600px) {
		.counters {
			position: relative;
			padding-top: 15vw !important
		}
	}

.counters::before {
	content: "";
	background: url(https://projects.botanibot.com/eberle/app/uploads/2023/03/Eberle_Webseite_Illustrstion-01.svg) no-repeat center top;
	background-size: 70% auto;
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	height: 100%;
	opacity: 0.2;
	pointer-events: none;
}

	@media (min-width: 600px) {
		.counters::before {
			background-size: 45% auto;
		}
	}



.text-stoerer + .credo-holder {
	padding-top: 38vw !important;
}

.wp-block-group.has-background-color.has-primary-background-color {
	background-color: none !important;
}
.text-stoerer {
	background: url(assets/images/stoerer-info-bg.png) no-repeat !important;
	background-size: 75% auto !important;
	background-color: none !important;
	aspect-ratio: 2.7 / 1;
	color: #fff;
	padding: 1rem 33vw 1rem 23vw !important;
	/* width: 50%; */
	margin: 0 !important;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	text-align: left;
	font-size: 11px;
	line-height: 120%;
	position: absolute;
	z-index: 99;
	transform: translateY(-10%);
}

	.text-stoerer > * {
		width: 100%;
	}

	@media (min-width: 800px) {
		.text-stoerer + .credo-holder  {
			padding-top: 20vw !important;
		}

		.text-stoerer {
			background-size: 50% auto !important;
			aspect-ratio: 4 / 1;
			color: #fff;
			padding: 1rem 55vw 1rem 16vw !important;
			background-color: transparent !important;
			transform: translateY(-30%);

		}
	}

	@media (min-height: 500px) and (min-width: 1000px) {
		.text-stoerer + .credo-holder  {
			position: relative;
			padding-top: 5rem !important
		}

		.text-stoerer {
			background-size: 33.33% auto !important;
			aspect-ratio: 6.1 / 1;
			color: #fff;
			padding: 1rem 70vw 1rem 11vw !important;

			position: absolute;
			background-color: transparent !important;
			transform: translateY(-100%);
			z-index: 99;

		}
	}

@media (min-width: 1600px) {
	.text-stoerer {
		
		    width: 40% !important;
		max-width: 40em !important;
    padding-left: 13em !important;
    padding-right: 4em !important;
    background-size: 100% !important;
    aspect-ratio: 2 / 1;
	}
}

    


	@media (max-width: 781px) {
		footer .wp-block-columns {
			display: flex !important;
			flex-flow: row wrap !important;
			gap: 0 !important;
			font-size: 12px !important;
			line-height: 120% !important
		}

		footer .wp-block-group > .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
			flex-basis: 20% !important;
		}

		footer .wp-block-group > .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:nth-child(2) {
			flex-basis: 80% !important;
			padding-left: 2rem !important;
			box-sizing: border-box;
		}

		footer .wp-block-group > .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:nth-child(2) > .wp-block-columns .wp-block-column  {
			flex-basis: 50% !important;
		}
	}

	@media (min-width: 550px) {
		footer .wp-block-group > .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:nth-child(2) > .wp-block-columns .wp-block-column  {
			flex-basis: 33.33% !important;
			padding-right: 1rem;
		}
	}


.partner-list {

}

	.partner-list .wp-block-columns {
		/* margin-block-start: 0 !important */
	}

	.partner-list img {
		width: 100%;
		max-width: 7rem;
		height: auto;
		margin-left: auto;
		margin-right: 0;
		display: block;
	}

	@media (max-width: 782px) {
		.partner-list .wp-block-columns .wp-block-columns {
			display: flex;
			flex-flow: row wrap;
			gap: 0;
		}

		.partner-list .wp-block-columns .wp-block-columns .wp-block-column {
			flex-basis: 20% !important
		}

		.partner-list .wp-block-columns .wp-block-columns .wp-block-column:nth-child(2) {
			flex-basis: 80% !important
		}
	}

footer a {
	text-decoration: none !important;
}


*:not(.slider) .wp-block-image:not(.stoerer) {
	opacity: 0;
	transform: translateY(5rem);
}

*:not(.slider) .has-loaded .wp-block-image:not(.stoerer) {
	transition: all 0.5s ease-out;
}


*:not(.slider) .wp-block-image:not(.stoerer).is-in-viewport {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 781px) {
	.page-id-35 .wp-block-spacer { display: none; }
	.page-id-35 .wp-block-columns {  gap: 0 !important; }
}