[popover] {
	height: 0;
	width: 10em;
	overflow-y: clip;
	transition: height 0.25s allow-discrete, display 0.25s allow-discrete;
	inset: auto;
	interpolate-size: allow-keywords;
	position-anchor: --main-nav-toggle;
	/* for Chrome, problems with auto */
	
	top: anchor(bottom);
	left: anchor(left);
	border: none;
	background-col: red;
}

[popover]:popover-open {
	height: auto;
	/* Fallback */
	
	height: calc-size(auto, size);
	transition: height 0.4s allow-discrete, display 0.4s allow-discrete;
	border:none;
}
/* Entry: starting state before the popover animates in */

@starting-style {
	[popover]:popover-open {
		height: 0;
	}
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav a {
	display: block;
	padding: 0.4em;
	padding-left: 0	;
	text-decoration: none;
	font-weight: bold;
	border: thin solid var(--background-color);
	border-radius: .5em;
	color: #64822B;
	background-color: #E4F0DF;
	transition: all .25s ease-in;
}

[aria-current=page] {
	background: #64822B;
	color: #E4F0DF
}

nav a:focus,
nav a:hover,
nav a:active {
	color: #E4F0DF;
	background-color: #64822B;
}

button {
	font-size: 1.25em;
	border: none;
	border-radius: .4em;
	width: 1.6em;
	min-height: 1.6em;
	font-weight: bold;
	padding: 0;
	background-color: transparent;
}

button[popovertarget="main-nav"] {
	.line {
		transform-box: fill-box;
		fill: none;
		stroke: #64822B;
		stroke-miterlimit: 8;
		stroke-width: 5;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: all 0.25s ease;
		transform-origin: center;
	}
}

button[popovertarget="main-nav"]:has(~ nav:popover-open) {
	.top {
		transform: translateY(20px) rotate(45deg);
	}
	.bottom {
		transform: translateY(-20px) rotate(-45deg);
	}
	.middle {
		opacity: 0;
	}
}

:root {
	--g6: #E4F0DF;
	--accent1-color: gold;
	--accent2-color: rgb(100,129,43);
	--accent3-color: steelblue;
	--text-color: black;
}
/* Grundlayout für SELFHTML-Beispiele */

.hinweis {
	border-inline-start: thick solid var(--red);
	padding-inline-start: 1em;
}

kbd {
	background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
	border: thin solid #aaa;
	border-radius: 2px;
	box-shadow: 1px 2px 2px #ddd;
	font-family: inherit;
	font-size: 0.9em;
	padding: 0 0.5em;
	border: bold solid black;
}

.visually-hidden,
[visually-hidden="true"] {
	position: absolute !important;
	clip-path: rect(1px, 1px, 1px, 1px) !important;
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
}

h1 {
	color: var(--accent1-color);
}

h1 a img {
	width: 1.2em;
	aspect-ratio: 1;
}

body {
	background: var(--g6);
	font-family: sans-serif;
	padding: 0;
	max-width: 40em;
	color: white;
	background:red;
}