*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	font-family:'Verdana',sans-serif;
	font-size:15px;
	--back-color: #fdfdfd;
	--text-color: #333333;
}


a {
color: #0000c0;
text-decoration: none;
}
a:hover{
color: #000080;
background-color: #e0e0e0;
}

h1 {
font-size: 1.6rem;
font-weight:normal;
color:inherit;
margin: 1.6rem 0 .33rem 0;
}
h2{
font-weight: normal;
font-style: italic;
font-size: 1.4rem;
margin: 2rem 0 .33rem 1em;
text-indent: -1em;
}
h3{
font-weight: bold;
font-size: 1rem;
margin: 1rem 0 0 1em;
text-indent: -1em;
}

ul, ol, dl {
margin: 0 0 .5rem 2rem;
padding: 0;
}
ul{
list-style-type: disc;
}
li {
	text-indent: -1rem;
	padding-left: 1rem;
	padding-bottom: .3rem;
}
dd {
	margin-bottom: .5rem;
}

table {
	border-collapse: collapse;
}
td.visual {
	border: 1px solid #808080;
	padding: 0.2ex 0.5em;
	&.r {
		text-align: right;
	}
	&.c {
		text-align: center;
	}
}

p {
	margin: 0 0 .5rem 0;
}




body {
	margin: 0;
	padding: 0;
	background-color: var(--back-color, #fdfdfd);
	color: var(--text-color, #333333);
}

.topniv {
	width: 100%;
	margin: 0;
	display: grid;
	grid-template-areas:
		"banner"
		"header"
		"main"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr auto;
	gap: 0 0.5rem;
}

.banner {
	grid-area: banner;
	text-align: center;
	padding: 0;
}
header {
	grid-area: header;
	padding: 0 1rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}
main {
	grid-area: main;
	padding: 0 1rem;
}
footer {
	grid-area: footer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	margin: 1rem 0;
	border-top: 1px solid #c9c9c9;
	font-size: 80%;
}

.menu1 {
	position: relative;
	display: flex;
	grid-area: menu1;
	justify-content:flex-end;
	gap:2rem;
	padding: 0 .33rem;
}
.menu2 {
	display: none;
	grid-area: menu2;
	padding: 2rem 0;
}

@media only screen and (min-width : 800px) {

	body {
		margin: 3rem auto;
	}

	.topniv {
		width: 800px;
		margin: 0 auto;
		display: grid;
		grid-template-areas:
			"banner banner"
			"menu2 header"
			"menu2 main"
			"footer footer";
		grid-template-columns: 150px 1fr;
		grid-template-rows: auto auto 1fr auto;
	}

	.banner {
		padding: .33rem;
	}

	.menu1 {
		display: none;
	}
	.menu2 {
		display: block;
	}

}


.main-nav {
	position:absolute;
	top: 40px;
	right: 0;
	width: 150px;
	font-size: 90%;
	display: flex;
	flex-direction: column;
	gap: 0;
	visibility: hidden;
	/* z-index: 1000; */
	padding: 1px;
	border: solid 1px #c9c9c9;
	border-bottom: none;
	& a {
		width: 100%;
		& div {
			padding: .3rem 0;
			text-align: center;
			background-color: var(--back-color);
			border-bottom: 1px solid #c9c9c9;
		}
		& div:hover {
			background-color: #e0e0e0;
		}
	}
}
#navtoggle {
	position:absolute;
	right:999px;
}
.navtoggle-label {
	cursor: pointer;
	padding: 8px;
	& svg {
		display: block;
	}
	& .navicon-close {
		display: none;
	}
}
#navtoggle:checked ~ .main-nav {
	visibility: visible;
}
/* Toggle Logic */
#navtoggle:checked ~ .navtoggle-label .navicon-menu {
	display: none;
}
#navtoggle:checked ~ .navtoggle-label .navicon-close {
	display: block;
}


.nav-menu2 {
	margin-left: 1rem;
	font-size: 90%;
	display: flex;
	flex-direction: column;
	gap: 0;
	& a {
		width: 100%;
		& div {
			padding: .3rem 0;
			text-align: center;
			background-color: var(--back-color);
			border-bottom: 1px solid #c9c9c9;
		}
		& div:hover {
			background-color: #e0e0e0;
		}
	}
}


.punkt {
	margin-bottom: .67rem;
	margin-left: 1rem;
	text-indent: -1rem;
}

.affaldsliste {
	display: flex;
	flex-direction: column;
	gap: .67rem;
	& details {
		margin-left: 2rem;
	}
	& summary {
		margin-left: -2rem;
		font-weight:bold;
		font-size: 105%;
		&:hover {
			background-color: #e0e0e0;
		}
	}
}

.havedagefotos {
	display: flex;
	flex-flow: column nowrap;
	gap: 2rem;
	margin-bottom: 1rem;
	& div {
		&:nth-child(2n) {
			text-align: right;
		}
		& img {
			width: clamp(330px, 64%, 392px);
		}
	}
}

.oprop {
	font-size:110%;
	font-weight:normal;
	text-align:center;
	margin-top: 0.8ex;
	margin-bottom: 1.5ex;
}

.dato {
	font-size:80%;
	color: #808080;
}