@font-face {
    font-family: "Orator";
    src: url("/wp-content/themes/oernie-theme/fonts/OratorStd.woff2") format("woff2"),
    url("/wp-content/themes/oernie-theme/fonts/OratorStd.woff") format("woff");
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
*, root {
    --background: white;
    --font: black; 
    --accent: #6118ab;
}
/* Body */
body {
    background: var(--background);
    color: var(--font);
    font-family: "Orator", sans-serif;
    font-size: 1rem;
    h1 {
        font-size: 2.5rem;
		font-family: "Orator", sans-serif;
    }
    h2 {
        font-size: 2rem;
		font-family: "Orator", sans-serif;
    }
    h3 {
        font-size: 1.5rem;
		font-family: "Orator", sans-serif;
    }
}
/* Header */
.site-header {
    max-width: 100vw;
    background: var(--background);
    position: sticky;
    top: 0;
    left: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	z-index: 1;
}
.site-header .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 1rem;
	.site-branding {
		display: flex;
		align-items: center;
		margin: 0;
	 img {
        width: 3rem;
        height: auto;
        transition: all 300ms ease-in-out;
        cursor: pointer;
    }
		}
    .site-branding img:hover {
        transform: scale(1.2);
    }
    .menu-wrapper {
        display: none;
        align-items: center;
        gap: 1rem;
        .menu-item {
            text-decoration: none;
            color: var(--font);
            font-size: 1rem;
        }
        .menu-item:hover {
            border-bottom: 1px solid var(--font);
            transition: 300ms ease-in-out;
        }
        @media (min-width: 800px) {
            display: flex;
        }
    }
}
/* Hamburger Menu */
.hamburger-menu {
    height: 3rem;
    width: 3rem;
    @media (min-width: 800px) {
        display: none;
    }
.hamburger-icon {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 300ms ease-in-out;
    span {
        background: var(--font);
        width: 90%;
        height: 2px;
    }
}
}
.mobile-menu {
    display: none;
    .mobile-menu-items {
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        .mobile-menu-item {
            text-decoration: none;
            color: var(--font);
        }
        .mobile-menu-item:hover {
            border-bottom: 1px solid var(--font);
            transition: 300ms ease-in-out;
        }
    }
}
.site-header .hamburger-icon:hover {
    transform: scale(1.2);
}
@keyframes fadeToCross1 {
	from {transform: rotate(0)}
	to {transform: rotate(45deg) translateY(-0.2rem); width: 2.2rem}
}
@keyframes fadeToCross2 {
	from {opacity: 1}
	to {opacity: 0}
}
@keyframes fadeToCross3 {
	from {transform: rotate(0)}
	to { transform: rotate(-45deg) translateY(0.2rem); width: 2.2rem}
}

body .site-header .cross-1 {
	transform-origin: 0px 0px;
	animation: 200ms ease-in forwards fadeToCross1;
}
body .site-header .cross-2 {
	animation: 200ms ease-in forwards fadeToCross2;
}
body .site-header .cross-3 {
	transform-origin: 0px 0px;
	animation: 200ms ease-in forwards fadeToCross3;
}
.site-header .active {
    width: 100%;
    height: auto;
    display: block;
    padding: 0 1rem 1rem 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--background);
}
/* Footer */
.site-footer {
    background: var(--background); 
    color: var(--font);
    max-width: 100vw;
    margin: 0 ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	padding: 0;
	.site-branding {
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img {
			max-width: 200px;
		}
		p {
			text-align: center;
			font-size: 1.5rem;
		}
	}
    .footer-content {
        width: 100%;
        display: flex;
		flex-direction: column;
        justify-content: space-between;
        align-items: center;
		margin: 0;
		padding: 1rem;
		.above {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			  .footer-menu {
        display: flex;
        gap: 1rem;
        .menu-item {
            text-decoration: none;
            color: var(--font);
        }
        .menu-item:hover {
            border-bottom: 1px solid var(--font);
            transition: 300ms ease-in-out;
        }
    }
			}
			.below {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				gap: 1rem;
				.site-branding {
					margin: 0;
				 img {
        width: 3rem;
        height: auto;
        transition: all 300ms ease-in-out;  
    }
					}
				.copyright {
					font-size: 0.8rem;
				}
			}
		
		 }
}
/* Main */
body .site-main {
    width: 100%;
	padding: 0;
}

/* Hero-section */
.site-main .hero {
    width: 100%;
    height: calc(100dvh - 88px);
	padding: 1rem;
	display: grid;
	grid-template-columns: 45vw 10vw 45vw;
	grid-template-rows: 40dvh 10dvh 40dvh;
	grid-template-areas:
		"foh . monitor"
		". logo ."
		"planung . system";
	place-content: center;
    .container {
		grid-area: logo;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
		img {
			width: 100px;
			height: auto;
			object-fit: cover;
			@media(min-width: 800px) {
				width: 200px;
			}
		}
		h1 {
			font-size: 1.5rem;
			white-space: nowrap;
			letter-spacing: 2px;
			@media (min-width: 600px) {
				font-size: 2rem;
			}
		}
		h2 {
			font-size: 1.2rem;
			letter-spacing: -2px;
			@media (min-width: 600px) {
				font-size: 1.5rem;
			}
		}
    }
    article {
        cursor: pointer;
        transition: all 300ms ease-in-out;
		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		p {
			font-size: 1rem;
			@media (min-width: 600px) {
				font-size: 1.5rem;
			}
		}
    }
	article:hover {
		transform: scale(1.05);
	}
    .foh-trigger {
        grid-area: foh;
		position: relative;
        p {
			position: absolute;
            top: 10vh;
            left: 10vw;
			color: var(--accent);
        }
    }
    .monitor-trigger {
        grid-area: monitor;
		position: relative;
        p {
			position: absolute;
            bottom: 5vh;
            left: 15vw;
            transform: rotate(-90deg);
			color: var(--accent);
        }
    }
    .system-trigger {
        grid-area: system;
		position: relative;
        p {
			position: absolute;
            bottom: 10vh;
            left: 5vw;
			color: var(--accent);
        }
    }
    .planung-trigger {
		grid-area: planung;
        position: relative;
        p {
			position: absolute;
            bottom: 5vh;
            left: 5vw;
			color: var(--accent);
        }
    }
    .angebot {
        display: none;
		max-width: 500px;
		height: auto;
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 2rem;
		background: var(--background);
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), 2px 2px 10px rgba(0, 0, 0, 0.2);
        .wrapper {
			width: 100%;
			height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
			h3 {
				color: var(--accent);
			}
			p {
				font-size: 1rem;
			}
        .close {
            all: unset;
            border-style: none;
            background: transparent;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }
        .close:hover {
            transform: scale(1.05);
            transition: 300ms ease-in-out;
        }
    }
    }
    .open {
        display: block;
    }
}

/* front-page-section */
body .site-main .front-page-section {
    width: 100%;
    padding: 2rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}
/* Fade in on scroll */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1000ms ease-out, transform 2000ms ease-out;
}
.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* About-section */
.front-page-section .about {
	scroll-margin-top: 90px;
    .container {
        display: flex;
        flex-direction: column;
		gap: 1rem;
		.image img {
			width: 200px;
			height: auto;
			@media (min-width: 800px) {
				width: 400px;
			}
		}
        @media (min-width: 800px) {
            flex-direction: row;
        }
    }
}

/* Material-section */
.front-page-section .material {
	scroll-margin-top: 90px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
    h2 {
        font-size: 2rem;
    }
    .container {
        display: flex;
        flex-direction: column;
		gap: 1rem;
        @media (min-width: 800px) {
            flex-direction: row;
        }
        .list-container {
            h3 {
                font-size: 1.5rem;
            }
            ul {
                list-style: none;
                padding: 0;
				li {
					font-family: "Orator", sans-serif;
				}
            }
        }
    }
}
/* Kontakt-section */
.front-page-section .contact {
	scroll-margin-top: 90px;
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	.wrapper {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		@media (min-width: 600px) {
			flex-direction: row;
			gap: 2rem;
		}
		a {
			text-decoration: none;
			color: var(--font);
		}
		a:hover {
			border-bottom: 1px solid var(--font);
			transition: 300ms ease-in-out;
		}
	}
	img {
		position: absolute;
		top: 0;
		left: 0;
		
		z-index: -1;
	}
}