/* modal open */
html.has-modal-open {
	overflow-y: scroll;
}

html.has-modal-open header:after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

html.has-modal-open body {
	height: 100vh;
	overflow: clip;
}



@-webkit-keyframes overlay-menu-slide-in-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2em);
                transform: translateX(2em)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
}



@keyframes overlay-menu-slide-in-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2em);
                transform: translateX(2em)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
}

@-webkit-keyframes overlay-menu-slide-out-right {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(2em);
                transform: translateX(2em)
    }
}

@keyframes overlay-menu-slide-out-right {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(2em);
                transform: translateX(2em)
    }
}

header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9999;
}

.width-like-content {
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--preset--spacing--40) * 2) !important;
}

header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #2B6F85 !important;
	color:#D7DA00 !important;

	-webkit-animation: overlay-menu-slide-in-right 0.5s ease-in-out;
	animation: overlay-menu-slide-in-right 0.5s ease-in-out;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
}

.wp-block-navigation__responsive-container-close {
	right: 1rem;
}

#modal-1-content .wp-block-navigation.items-justified-right {
    --navigation-layout-justification-setting: flex-start !important;
}

.wp-block-navigation__responsive-container-open {
        
	svg {
		width: 2.625rem;
		height: 1.5625rem;
		color: var(--wp--preset--color--accent-2, currentColor);
	}
	
	@media (min-width: 992px) {
		margin-bottom: .9rem;
		
		svg {
			width: 3rem;
			height: 2.5rem;
		}
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: calc(4rem + 24px);
	padding-bottom: calc(4rem + 24px);
}

header .wp-block-navigation__responsive-container-close {
	top: 1rem;
	right: 1rem;
	color: var(--wp--preset--color--base, currentColor);
}

.wp-site-blocks > header {
	.wp-block-navigation .wp-block-navigation__responsive-container {
		right: 0;
		z-index: 1000;
		
		@media (min-width: 1034px) {
			position: fixed;
			bottom: auto;
			left: auto;
			top: 0;
			bottom: 0;
			right: 0;
			max-width: 46rem;
			padding: 0;
			padding-left: 3rem;

			.wp-block-navigation__responsive-container-content {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-line-pack: start;
					align-content: flex-start;
				-ms-flex-wrap: wrap;
					flex-wrap: wrap;
				padding-top: 0rem;
				padding-bottom: 2rem;
				min-width: 30vw;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
					-ms-flex-direction: column;
						flex-direction: column;
				-webkit-box-align: start;
					-ms-flex-align: start;
						align-items: flex-start;
				-webkit-box-pack: start;
					-ms-flex-pack: start;
						justify-content: flex-start;
				
				padding-top: 5rem;
				
			}
		}


		.wp-block-navigation__container {
			gap: 1rem;

			.wp-block-navigation-item {
				width: 100%;
				padding-bottom: 3px;
			

				> a.wp-block-navigation-item__content {
					width: 100%;
					padding: 0.1875rem 0.375rem;
					text-decoration: none;
					font-weight: 600;

					@media (min-width: 992px) {
						padding: .5rem 1rem;
					}
				}
			}
		}

		.wp-block-navigation__container:first-of-type {
			margin-left: -1rem;
		}

		.wp-block-navigation__container:not(:first-of-type) {
			font-size: 1rem;
			gap: .8rem;

			a.wp-block-navigation-item__content {
				padding: 0;
				font-weight: normal;
				color: var(--wp--preset--color--base, currentColor);
			}
		}
	}
}


/* content-breaker-line */
.content-breaker {
	margin-left: -3rem;
	width: calc(100% + 3rem) !important;
	-webkit-border-before: 1px solid var(--wp--preset--color--base, currentColor);
	        border-block-start: 1px solid var(--wp--preset--color--base, currentColor);
}

/* header scrolled */
header.scrolled {} 


/* header scrolled > div with smooth transition */
header > div {
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

header.scrolled > div {
	padding-top: 0 !important;
	-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

header > div:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

header.scrolled > div:before {
	opacity: 1;
}

.entry-content:not(:has(> .wp-block-group.has-background), :has(> .wp-block-cover.alignfull)) {
	padding-top: 150px;
	padding-top: calc(var(--wp--custom--header-height) + 1rem);
}

header .wp-block-navigation-item a {
    padding: 10px 20px;
    position: relative;
    -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
    transition: -webkit-box-shadow 0.3s ease-in-out;
    -o-transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
	outline: none;
}

header .wp-block-navigation-item a:hover {
    -webkit-box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-1);
            box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-1);
}



/* EIN gemeinsamer Stil für Hover, Focus und aktives Item */
header .wp-block-navigation-item a:hover,
header .wp-block-navigation-item a:focus-visible,
header .wp-block-navigation-item.current-menu-item a,
header .wp-block-navigation-item a:focus {
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--base);
    font-weight: bold;
}

header .wp-block-navigation__container:not(:first-of-type) .wp-block-navigation-item a:focus {
	outline: 2px solid #ededed !important;
}

header .wp-block-navigation__container:not(:first-of-type) a {
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}

.wp-block-navigation__container:not(:first-of-type) a:hover {
	color: var(--wp--preset--color--accent-1) !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}

footer .wp-block-navigation__container a:hover {
	color: var(--wp--preset--color--contrast) !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}

header .wp-block-navigation-item.current-menu-item a {
    -webkit-box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-1);
            box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-1);
    font-weight: bold;
    -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
    transition: -webkit-box-shadow 0.3s ease-in-out;
    -o-transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}

.wp-block-navigation__container:not(:first-of-type) .wp-block-navigation-item.current-menu-item a {
    color: var(--wp--preset--color--accent-1) !important;
	-webkit-text-decoration: underline solid var(--wp--preset--color--accent-1) 1px !important;
	        text-decoration: underline solid var(--wp--preset--color--accent-1) 1px !important;
}

@media screen and (max-width: 768px) {
	.background-mobile {
	  background-position: 0 15% !important;
	  background-attachment: scroll !important;
	}
}

.hero-image img {
	aspect-ratio: 5 / 3 !important;
	object-fit: cover !important;
	width: 100% !important;
	height: auto !important;
}

.nav-buttons .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent-1) !important;
}