@font-face {
  font-display: swap; 
  font-family: 'Rufina';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rufina-v17-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Rufina';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/rufina-v17-latin-700.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab-v36-latin-regular.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-slab-v36-latin-700.woff2') format('woff2'); 
}

* {
	box-sizing: border-box;
	
	@media(max-width: 62rem){
		hyphens: auto; 
	}
}
:root{
	--c-green: #004839;
	--c-green-light: #b9d19d;
	--c-green-medium: #c8d96d;
	
	@media(prefers-reduced-motion:no-preference) {
		--t-std: all 0.3s ease allow-discrete;
		--t-slow: all 1.5s ease allow-discrete;
	}
	
	font-size: 1.125rem;
	
	@media(max-width: 30rem){
		font-size: 1rem; 
	}
	
	scroll-padding-top: 200px; 
}

body {
	color: #000;
	font-family: 'Roboto Slab',sans-serif;

	font-weight: 400;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: white;
	margin: 0;
	padding: 0;

	&:has(:popover-open){
		overflow: hidden; 
	}

}

a{
	transition: var(--t-std); 
	color: var(--c-green); 
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.5em;
	margin-top: 1em;
	font-family: "Rufina", sans-serif; 
	line-height: 1.07; 
	font-weight: 400; 
}

h1 {
	font-size: 4em;
}
h2 {
	font-size: 3.6em;
}
h3 {
	font-size: 3.1em;
}
h4 {
	font-size: 2.6em; 
}
h5 {
	font-size: 2.1em; 
}
h6 {
	font-size: 1.6em;
}

.page{
	& h1 {
		font-size: 3.3em;
	}
	& h2 {
		font-size: 2.9em;
	}
	& h3 {
		font-size: 2.5em;
	}
	& h4 {
		font-size: 2.1em; 
	}
	& h5 {
		font-size: 1.8em; 
	}
	& h6 {
		font-size: 1.4em;
	}
}

@media(max-width: 62rem){
		
	h1 {
		font-size: 3.5em;
	}
	h2 {
		font-size: 3em;
	}
	h3 {
		font-size: 2.5em;
	}
	h4 {
		font-size: 2em; 
	}
	h5 {
		font-size: 1.6em; 
	}
	h6 {
		font-size: 1.3em;
	}


	.page{
		& h1 {
			font-size: 3.5em;
		}
		& h2 {
			font-size: 3em;
		}
		& h3 {
			font-size: 2.5em;
		}
		& h4 {
			font-size: 2em; 
		}
		& h5 {
			font-size: 1.6em; 
		}
		& h6 {
			font-size: 1.3em;
		}
	}
		
	
}

.topline{
	font-size: 1.25em; 
	text-transform: uppercase;
	font-family: "Roboto Slab"; 
	margin-top: 0; 
	
	@media(max-width: 62rem){
		font-size: 1.125em;
	}
	
	&+h3{
		font-size: 3.6em;
		margin-top: 0; 
		@media(max-width: 62rem){
			font-size: 2.5em;
		}
	}
}
.contactrow{
	display: flex; 
	gap: var(--gap); 
	margin-top: 1em; 
	flex-wrap: wrap;
}

p{
	margin-block: 0 1em; 
}

.btn{
	--btn-bg: var(--c-green);
	--btn-c: var(--c-green-light);
	display: inline-flex; 
	background-color: var(--btn-bg);
	text-transform: uppercase; 
	gap: 0.5em; 
	padding: 0.25em 0.5em 0.35em; 
	letter-spacing: 0.05em; 
	text-decoration: none;
	font-size: 1.25rem;
	align-items: center; 
	transition: var(--t-std); 
	color: var(--btn-c); 
	border: 1px solid var(--btn-bg);
	cursor: pointer; 
	font-family: inherit; 

	&.btn-medium{
		--btn-bg: var(--c-green-medium);
		--btn-c: var(--c-green);
	}
	&.btn-light{
		--btn-bg: var(--c-green-light);
		--btn-c: var(--c-green);
	}
	&.btn-mediumoutline{
		--btn-bg: var(--c-green);
		--btn-c: var(--c-green-medium);
		border-color: var(--btn-c); 
		&:hover{
			--btn-c: var(--c-green);
			border-color: var(--btn-bg); 
			
			&>img{
				filter: brightness(0) invert(19%) sepia(19%) saturate(3871%) hue-rotate(134deg) brightness(101%) contrast(103%);
			}
		}
	}
	
	& img{
		width: 22px; 
	}
	
	&:hover{
		--btn-bg: white;
	}
}

header{
	background-color: var(--c-green);
	position: sticky; 
	container-type: scroll-state;
	container-name: sticky-heading;
	top: 0; 
	z-index: 200;
	
	& .logom{
		display: none; 
	}
	& .btn-menu-open{
		display: none; 
	}
	
	& .sidebar{
		display: none; 
	}
	
	& nav{
		position: relative; 
		outline: none; 
		background-color: transparent; 
		border: none; 
		padding: 0; 
		display: block; 
		width: 100%; 
		
		& .btn-menu-close{
			display: none; 
		}
		
		& .menu{
			list-style: none; 
			display: flex; 
			gap: 2em; 
			align-items: center; 
			margin: 0; 
			padding: 1.5em 0.5em; 
			transition: var(--t-std); 
			
			& li:has(.logo){
				margin: 0 auto; 
			}
			
			& .logo{
				width: 230px; 
				transition: var(--t-std); 
				margin-left: 0;
				margin-right: 70px;
				
				@media(max-width: 90rem){
					margin-left: 0;
					margin-right: 0;
				}
				@media(max-width: 75rem){
					width: 150px;
				}
			}
			& a {
				color: white; 
				text-transform: uppercase; 
				text-decoration: none; 
				letter-spacing: 0.1em;
			}
		}
		@media(max-width: 75rem){
			display: none; 
		}
	}
	
	@media(max-width: 75rem){
		flex-direction: row; 
		gap: 2em; 
		justify-content: space-between; 
		align-items: center; 
		padding: 1em; 
		display: flex!important;
	
		& nav {
			display: none; 
			background: var(--c-green);
			position: fixed;
			height: 100%;
			width: 100%;
			padding: 2em;
			gap: 2em;
			opacity: 0; 
			transform: translateY(-100%);
			grid-template-columns: auto 1px 1fr;  
			grid-template-rows: auto 1fr;  
			transition: var(--t-std); 
			
			
			&:popover-open{
				display: grid;
				opacity: 1; 
				transform: translateY(0);
				
				@starting-style{
					opacity: 0; 
					transform: translateY(-100%);
					
				}
			}
			
			& .spacer{
				background-color: var(--c-green-light); 
				grid-row: 1 / -1;
			}

			& .btn-menu-close{
				background-color: transparent; 
				border: none; 
				display: grid; 
				gap: 0.5em;
				cursor:pointer; 
				width: 2em; 
				aspect-ratio: 1; 
				flex-direction: column;
				align-items: center;
				padding: 0; 
				
				& span{
					height: 1px; 
					width: 100%; 
					background-color: white; 
					grid-column: 1; 
					grid-row: 1; 
					transform: rotateZ(45deg);
					
					&:last-child{
						transform: rotateZ(-45deg); 
					}
				}
			}			
			
			& .menu_frame_in{
				grid-row: 2; 
			}
			
			& .menu{
				display: flex; 
				flex-direction: column; 	
				align-items: start;
				gap: 1em; 
				padding: 0;
				hyphens: auto;
				
				& li:has(.logo){
					display: none; 
				}
				
				& a{
					text-transform: none; 
					font-size: 2rem; 
					align-items: start;
					font-family: "Rufina", sans-serif;
					letter-spacing: 0; 
				}
			}


			& .sidebar{
				display: block; 
				color: white; 
				width: 34ch;
				max-width: 100%;
				grid-row: 2; 
				
				& a {
					color: white; 
					text-decoration: none; 
				}

				
				& ul{
					list-style: none; 
					margin: 0; 
					padding: 0; 
					display: flex; 
					flex-direction: column; 
					gap: 0.5em;
					
					& li{
						display: grid;
						grid-template-columns: 2em auto; 
						align-items: center; 
						gap: 0.5em; 
						padding: 0; 
						min-height: 2lh;
						letter-spacing: 0.1em; 

						
						&:first-child{
							border-top: 1px solid white; 
							border-bottom: 1px solid white; 
							margin-bottom: 1em; 
							padding: 0.75em 0;
							align-self: start;
							text-transform: uppercase; 
							
							&:after{ 
								content: "Biergarten heute geöffnet!"
							}
						}
					}
				}
			}
			
			@media(max-width: 75rem){
				padding: 1em; 
				gap: 2em; 
				flex-direction: column; 
				
				&:popover-open{
					display: flex;
				}
				
				& .sidebar{
					order: 3; 
				}
				& .spacer{
					display: none; 
				}

				& .menu{
					& a{ 
						font-size: 1.5rem;  
					}
				}				
				
			}
		}
		& .logom{
			display: block; 
			width: 170px; 
			transition: var(--t-std); 			
		}
		& .btn-menu-open{
			display: block; 
			background-color: transparent; 
			border: none; 
			display: flex; 
			padding: 1em; 
			gap: 0.5em;
			cursor:pointer; 
			justify-content: center;
			
			width: 4em; 
			aspect-ratio: 1; 
			flex-direction: column;
			
			& span{
				height: 1px; 
				width: 100%; 
				background-color: white; 
			}
			
		}
	}
	
	
}

.biergarten-geschlossen header nav .sidebar ul li:first-child{
	&>img{
		transform: rotate(180deg);
		filter: brightness(0) invert(61%) sepia(14%) saturate(1703%) hue-rotate(319deg) brightness(98%) contrast(92%); 
	}

	&:after{
		content: "Biergarten heute geschlossen"
	}
}	


@container sticky-heading scroll-state(stuck: top) {
	header nav .menu .logo{
		width: 170px; 
	}
	header .logom{
		width: 100px; 
	}
	
	header nav .menu{
		padding-block-end: 0.5em; 
	}
}

.start {
	& .vorhang{
		margin-bottom: -100%;
	}
}

.vorhang{
	container-type: scroll-state;
	container-name: sticky-vorhang;

	z-index: 20;

	position: sticky;
	top: 150px;
	/*clip-path: polygon(0% 0%, 0% 200%, 100% 200%, 100% 0%);*/
	height: fit-content;
	
	@media(max-width: 75rem){
		top: 105px; 
	} 
	@media(max-width: 30rem){
		top: 100px; 
	} 

	&>div{
		display: grid;
	}

	& img{
		
		position: absolute;
		top: 0;
		left: 0;
		grid-column: 1; 
		grid-row: 1; 
		background-size: cover; 
		background-position: bottom center; 
		width: 100%; 
		aspect-ratio: 1920 / 200.396;
		filter:drop-shadow(0 0 64px #0008);
		transform-origin: top; 
		animation-range-end: exit 25%;
		animation-fill-mode: forwards; 
		
		&:nth-child(1),
		&:nth-child(2){
			animation-timeline: scroll();
			animation-name: moveOutTop; 
		}
		&:nth-child(3){
			animation-timeline: scroll();
			animation-name: scaleDown; 
		}
	}
}


@container sticky-vorhang scroll-state(stuck: top) {
	.vorhang >div{

	}	
}

@keyframes moveOutTop{
	0%{
		transform:  translateY(0) scaleY(1);
	}
	100% {
		transform: translateY(-10%) scaleY(0);
	}
}

@keyframes scaleDown{
	0%{
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0.5);
	}
}

.intro{
	background-color: var(--c-green);
	position: relative; 
	z-index: 30; 
	color: white; 
	
	display: grid; 
	grid-template-columns: 42ch 1fr 42ch;
	
	@media(max-width: 105rem){
		grid-template-columns: 37ch 1fr 37ch;
	}
	@media(max-width: 90rem){
		grid-template-columns: 27ch 1fr 27ch;
	}
	@media(max-width: 75rem){
		grid-template-columns: 1fr;
	}
	
	& .headercontent{
		text-align: center; 
		display: flex; 
		flex-direction: column; 
		align-items: center; 
		margin-block: 1em 2em; 
		padding-inline: var(--gap); 
		
		& h1{
			font-style: italic; 
		}
		
		& .contactrow{
			justify-content: center;
		}
		
		& .withbutton{
			margin-bottom: 2em; 
			
			& h1{
				grid-column: 2; 
				margin-bottom: 0; 
				
			}
			
			display: grid; 
			grid-template-columns: 1fr auto 1fr; 
			gap: 2em;
			align-items: end;
			
			& .buttonopening{  
				margin:  0.5em; 
				aspect-ratio: 1;
				display: flex;
				padding: 1.5em;
				flex-direction: column;
				background-color: var(--c-green-medium);
				color: var(--c-green);
				border-radius: 100%;
				border: 1px solid var(--c-green);
				outline: 0.375em solid var(--c-green-medium);
				transform: rotateZ(-9deg);
				text-align: center; 				
				width: 240px;
				justify-content: center;
				
				&>:nth-child(1){
					font-size: 1.7rem;
				}
				&>:nth-child(2){
					font-size: 3.5rem;
					font-weight: 700;
					line-height: 0.95; 
				}
				
				@media(max-width: 75rem){
									
					width: 180px;
					&>:nth-child(1){
						font-size: 1.35rem;
					}
					&>:nth-child(2){
						font-size: 2.5rem;
					}
					
				}
			}
			@media(max-width: 48rem){
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				& h1{
					margin-top: 0; 					
				}
			}
		}
	}
	
	& .sidebar{
		padding-left: 5em; 
		
		@media(max-width:105rem){
			padding-left: 3em; 
		}
		
		@media(max-width:90rem){
			padding-inline: 1em; 
		}
		
		& a {
			color: white; 
			text-decoration: none; 
		}
				
		& ul{
			list-style: none; 
			margin: 0; 
			padding: 0; 
			display: flex; 
			flex-direction: column; 
			gap: 0.5em;
			
			& li{
				display: grid;
				grid-template-columns: 2em auto; 
				align-items: center; 
				gap: 0.5em; 
				padding: 0; 
				min-height: 2lh;
				letter-spacing: 0.025em;

/*
				&:not(:first-child){
					&>:last-child{
						opacity: 1; 
						transition: var(--t-std); 
					}
				}
				&:hover:not(:first-child){
					&>:last-child{
						opacity: 1; 
					}
				}
*/				
				&:first-child{
					border-top: 1px solid white; 
					border-bottom: 1px solid white; 
					margin-bottom: 1em; 
					padding: 0.75em 0;
					align-self: start;
					text-transform: uppercase; 
												
					&:after{ 
						content: "Biergarten heute geöffnet!"
					}
				}				
				@media(max-width:75rem){
					&:not(:first-child){
						display: none; 
					}
				}
			}
		}
		
	}
}

.biergarten-geschlossen .intro .sidebar ul li:first-child{
	&>img{
		transform: rotate(180deg);
		filter: brightness(0) invert(61%) sepia(14%) saturate(1703%) hue-rotate(319deg) brightness(98%) contrast(92%); 
	}
	
	&:after{
		content: "Biergarten heute geschlossen"
	}
}

.doubleteaser{
	display: grid;
	grid-template-columns: 1fr 1fr;
	color: white; 
	
	& .item{
		display: grid; 

		& .bg-holder{
			grid-row: 1; 
			grid-column: 1; 

			position: relative; 

			& img{
				position: absolute;
				object-fit: cover;
				object-position: center center;
				inset: 0;
				height: 100%;
				width: 100%;
			}
		}
		& .text-holder{
			background: linear-gradient(#0000, #0009 60%);
			grid-row: 1;
			grid-column: 1;
			position: relative;
			padding: 3em;
			padding-top: 8em;
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-content: end;
			justify-content: end;
			align-items: end;
			gap: 1em;
			min-height: 36vw;
				
			& h2{
				grid-column: 1 / -1;
				grid-row: 1;
			}
			
			& .desc{
				grid-column: 2;
				/* grid-row: 1 / -1; */
				align-self: end;
				justify-self: end;
				/* justify-content: end; */
				/* align-content: end; */
				
				&>:last-child{
					margin-bottom: 0; 
				}
			}
			
			& .icons {
				& p{
					margin-bottom: 0; 
				}
			}
			
			&>:last-child{
				margin-bottom: 0; 
			}
			@media(max-width: 75rem){
				display: flex;
				flex-direction: column; 
				align-items: start;
				padding: 2em;
			}
			@media(max-width: 40rem){
				padding: 2em 1em;
			}
			
			& a {
				color: white; 
			}

		}

		&.item-wide{
			grid-column: 1/ -1;
			background-color: var(--c-green-light);
			background: white;
			
			& .text-holder{
				color: black;
				padding-block: 2em;
				background: none;
				
				& a {
					color: var(--c-green);
					&:hover{
					}
				}
			}
			& h2{
				color: var(--c-green);
				margin-top: 0;
			}
		}
	}	
	@media(max-width: 62rem){
		display: flex; 
		flex-direction: column; 
	}
}

.icons{
	display: flex;
	gap: 1em;
	align-items: center;
	text-wrap: balance; 
}

.highlight{
	color: var(--c-green-medium);
}

.doubleimg{
	padding-block: 4em 8em;
		
	& h2{
		color: var(--c-green); 
	}
	& h3{
		color: var(--c-green); 
	}
	
	&>div{
		display: grid;
		grid-template-columns: 1fr 0.1fr 0.9fr;
		gap: calc(2*var(--gap));		
		
		& .img-holder{
			display: flex; 
			flex-direction: column; 
			justify-content: center; 
			
			& >div{
				width: 100%; 
				aspect-ratio: 1; 
				display: grid; 
			}
			& img{
				width: 66%; 
				aspect-ratio: 1; 
				object-fit: cover; 
				grid-row: 1; 
				grid-column: 1; 
				
				&:nth-child(1){
					align-self: start; 
					justify-self: start;
				}
				&:nth-child(2){
					align-self: end; 
					justify-self: end; 
				}
			}
		}
		
		& .text-holder{
			grid-column: 3; 
		}

		@media(max-width: 90rem){
			grid-template-columns: 1fr 1fr;
			& .text-holder{
				grid-column: auto; 
				align-self: center;
			}
		}
		@media(max-width: 62rem){
			display: flex; 
			flex-direction: column; 
		}		
		
	}
}

.stellenliste{
	color: var(--c-green); 
	text-transform: uppercase;
	font-size: 1.25em; 
	font-weight: bold; 
	
	& span{
		text-transform: lowercase; 
		font-size: 0.8em; 
	}
	
	li{
		margin-bottom: 0.25em; 
	}

	@media(max-width: 62rem){
		font-size: 1.125em;
	}
	
}

.greenbg{
	background-color: var(--c-green-light); 
	padding-block: 5em 5em; 
	
	& h2{
		color: var(--c-green); 
	}
	& h3{
		color: var(--c-green); 
	}
	
	&>div{
		display: grid;
		grid-template-columns: 0.8fr 0.2fr 1fr;
		gap: calc(2*var(--gap));
		
		& .img-holder{
			grid-column: 3; 
		}
		
		@media(max-width: 90rem){
			grid-template-columns: 1fr 1fr;
			& .img-holder{
				grid-column: auto; 
				align-self: center;
			}
		}
		@media(max-width: 62rem){
			display: flex; 
			flex-direction: column; 
		}
	}
}


.cta{
	padding-block: 4em 8em; 
	background-image: url('../images/ctabg.svg'), linear-gradient(var(--c-green));
	background-position: center center;
	color: white;
	
	& h2{
		text-align: center;
		justify-self: center; 
		position: relative;
		anchor-name: --cta; 
	}
	
	& .buttonopening{  
		position-anchor: --cta;
		position: fixed;
		left: anchor(right);
		bottom: anchor(bottom);
		margin-left: 2em; 
		aspect-ratio: 1;
		display: flex;
		padding: 1.5em;
		flex-direction: column;
		background-color: var(--c-green-medium);
		color: var(--c-green);
		border-radius: 100%;
		border: 1px solid var(--c-green);
		outline: 0.375em solid var(--c-green-medium);
		transform: rotateZ(-9deg);
		text-align: center; 
		
		&>:nth-child(1){
			font-size: 1.125rem;
		}
		&>:nth-child(2){
			font-size: 2.25rem;
			font-weight: 700;
			line-height: 0.95; 
		}
		
		@media(max-width: 48rem){
			position: static; 
			justify-self: center; 
			margin-left: 0; 
			margin-top: -1em; 
		}
	}
		
	& p{
		text-align: center; 
		max-width: 55ch; 
	}
	
	& address{
		display: flex; 
		gap: 0.5em; 
		align-items: start; 
		justify-content: center;
		font-style: normal; 
		margin-bottom: 1em;
		margin-top: 1em;
	}
	
	&>div{
		display: grid; 
		justify-content: center; 
	}
	& .contactrow{
		justify-content: center;
	}
}


	
footer{
	background-color: var(--c-green);
	padding: calc(4*var(--gap)); 
	gap: calc(3*var(--gap));
	display: grid; 
	color: white; 
	
	grid-template-columns: auto auto auto 1fr;
	align-items: end; 
	
	border-top: 1px solid var(--c-green-light);
	
	& .logo{
		width: 225px;
	}
	
	& .shortmenu{
		align-content: end; 
		justify-self: end;
		
		& p{
			columns: 3; 
			gap: calc(3*var(--gap));
			
			& a{
				break-inside: avoid;
				display: inline-block;
			}
		}
	}
	
	& p{
		margin: 0; 
	}
	
	& a {
		color: white; 
		text-decoration: none; 
	}
	
	& .socialmedia{
		padding-inline: 2em; 
		
		& a:hover{
			filter: brightness(2) ;
		}
	}
	
	& .adresse{
		display: flex; 
		gap: calc(3*var(--gap));
		align-items: end; 
	}
	
	@media(max-width: 90rem){
		& .socialmedia{
			padding-inline: 0; 
		}	
		& .shortmenu{
			& p{
				columns: 2; 
				gap: calc(2*var(--gap));
			}
		}
	}
	@media(max-width: 75rem){
		& .adresse{
			flex-direction: column; 
			gap: 1em; 
			align-items: start; 
		}
		& .shortmenu{
			& p{
				columns: 1; 
			}
		}
	}
	@media(max-width: 62rem){
		padding: calc(2*var(--gap)); 
		gap: calc(2*var(--gap));
		grid-template-columns: auto 1fr;
		
		& .shortmenu{
			align-content: start; 
			justify-self: start;
			& p{
				columns: 3; 
				gap: calc(3*var(--gap));
			}
		}
		& .socialmedia{
			justify-self: center;
		}
	}
	@media(max-width: 48rem){
		display: flex; 
		flex-direction: column; 
		align-items: start; 
	}
	@media(max-width: 40rem){
		& .shortmenu{
			& p{
				columns: 2; 
				gap: calc(3*var(--gap));
			}
		}
	}
}
.vorhang+.regtext{
	padding-block-start: calc(10vw + 2em); 
}
.regtext{
	padding-block: 2em 4em;
}

.cform{
	position: relative; 
}

.cform:has(+footer) {
	margin-bottom: 5em;
}

.cform.sending:before {
	position: absolute;
	content: "";
	width: calc(100% + 2em);
	left: -1em;
	height: calc(100% + 2em);
	top: -1em;
	background-color: #4c4f55bb;
	z-index: 1;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border-radius: 1em;
	animation: 200ms linear fadeIn forwards;
}

.cform.sending:after {
	position: absolute;
	content: "Ihre Daten werden verarbeitet. Bitte warten...";
	bottom: 2em;
	right: 50%;
	transform: translateX(50%);
	z-index: 2;
	color: white;
	padding: 1em;
	z-index: 1000000000000;
	text-align: center;
	background: var(--c-green);
	border-radius: 1em;
	height: fit-content;
	width: fit-content;
	animation: 200ms linear fadeIn forwards;
}

.formgrid {
	display: grid;
	gap: 1px;
	grid-template-columns: max(20%, 130px) 1fr;
	border: 2px solid var(--c-green);
	margin-top: 30px;
	background-color: #ffffff;
	color: black;
	view-transition-name: conditional;
	margin: 0;

	> .field_wrap > .left, > .field_wrap > .right, > .field_wrap > .full {
		background-color: #f0f0f0;
		padding: 15px;
	}

	> .field_wrap > .left {
		font-weight: 600;
		font-style: italic;
	}

	> .field_wrap > .full {
		grid-column: span 2;
	}

	> .field_wrap > .right {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 15px 30px;

		&.vertical {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	> .next_wrap {
		background-color: #f0f0f0;
		padding: 15px;
		grid-column: span 2;
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		align-items: center;

		button.prev {
			background-color: transparent!important;
			color: #3e4e3f !important;
			border-color: #3e4e3f !important;

			&:hover {
				border-color: #22301a !important;
				color: #22301a !important;
			}
		}
	}

	&.validated:has(:invalid) .next_wrap button.next {
		filter: grayscale(1);
		cursor: default;

		&:hover {
			background-color: #3e4e3f!important;
			color: white!important;
			border-color: #3e4e3f!important;
		}
	}

	&.validated:has(:invalid) .next_wrap:after {
		content: "Bitte überprüfen Sie die markierten Felder um fortfahren zu können.";
		font-size: 0.8em;
		break-inside: avoid;
		display: inline-block;
	}

	.field_wrap {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: span 2;

		.error {
			display: none;
			font-size: 0.8em;
			color: red;
		}
	}

	> .error_wrap {
		background-color: red;
		padding: 15px;
		grid-column: span 2;
		display: flex;
		align-ites: center;
		color: white;
		display: none;

		&.showerrorhint {
			display: block;
		}
	}

	label {
		cursor: pointer;

		input + span {
			margin-left: 0.5em;
		}

		span + input {
			margin-left: 0.5em;
		}
	}

	select {
		border: 2px solid #ababab;
		padding: 10px;
		border-radius: 2px;
		background-color: white;
		font-size: 1em;
	}

	input[type="number"], input[type="time"], input[type="date"] {
		border: 2px solid #ababab;
		padding: 10px;
		border-radius: 2px;
		background-color: white;
		font-size: 1em;
		
		@media (max-width: 768px) {
			width: 230px;
		}

	}

	select:focus, select:focus-within, input:focus, input:focus-within {
		border: 2px solid var(--c-green-medium)!important;
		outline-offset: 4px; 
	}

	input[type="radio"] {
		scale: 1.1;
	}

	input[type="checkbox"] {
		scale: 1.1;
	}

	textarea, input[type="email"], input[type="tel"], input[type="text"] {
		width: 370px;
		padding: 10px;
		background-color: white;
		font-size: 1em;
		border: 2px solid #ababab;
		/* max-width: 80%; */
		/* min-width: 0; */
	}

	textarea {
		height: 5em;
		resize: vertical;
		width: 475px;
		max-width: 56vw;
	}

	input::placeholder {
		font-size: 0.75em;
	}

	fieldset {
		margin: 0;
		padding: 0;
		flex-wrap: wrap;
		gap: 15px 30px;
		display: flex;
		align-items: center;
		border: none;
	}

	.validated .field_wrap:has(:invalid) .error {
		display: block;
	}

	.showerror .error {
		display: block;
	}

	+ div {
		display: none;

		+ div {
			display: none;
		}
	}

	&.fatalerror + div + div {
		display: block;
	}

	&.success + div {
		display: block;
	}
}


@media (max-width: 479px) {
	.formgrid .field_wrap {
		display: flex;
		flex-direction: column;
	}
	.formgrid>.field_wrap>.right {
		padding-top: 0;
	}
	.formgrid input[type="email"], .formgrid input[type="tel"], .formgrid input[type="text"] {
		width: 100%;
	}
	
	.formgrid textarea{
		max-width: 100%;
	}
}

.validated .field_wrap:has(:invalid) .left,
.validated .field_wrap:has(:invalid) .right {
	background-color: #ffe0e0;
}