:root {
	--bg: #fff;
	--fg: #000;
	--prim: #00a650;
	--sek: #ed114e;
	--primshad: #aaa;
	--sekshad: #666;
}

:root {
	--bg: #eee;
	--bg: #fff;
	--fg: #004;
	--prim: #576c8c; /*#7a6aa7; */
	--sek: #f9ba00;
	--primshad: #b9b; 
	--sekshad: #ff8;
}

@font-face {
	font-family: 'Source Sans Pro'; src: url("SourceSansPro-Regular.ttf.woff2") format("woff");
}

@font-face {
	font-family: 'Source Sans Pro'; src: url("SourceSansPro-Bold.ttf.woff2") format("woff"); font-weight: bold;
}

@font-face {
	font-family: 'Source Sans Pro'; src: url("SourceSansPro-BoldIt.ttf.woff2") format("woff"); font-weight: bold; font-style: italic;
}

@font-face {
	font-family: 'Source Sans Pro'; src: url("SourceSansPro-Semibold.ttf.woff2") format("woff"); font-weight: 600;
}

@font-face {
	font-family: 'Source Sans Pro'; src: url("SourceSansPro-SemiboldIt.ttf.woff2") format("woff"); font-weight: 600; font-style: italic;
}

@font-face {
	font-family: 'Source Sans Pro'; src: url("SourceSansPro-It.ttf.woff2") format("woff"); font-style: italic;
}

body {
	font-size: 16pt;
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
	font-family: "Source Sans Pro", Roboto, Oxygen, "Droid Sans", sans-serif;
	color: var(--fg);
	background-color: var(--bg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 10px 20px 2em 20px;
	box-shadow: 5px 5px 6px #cccccc;
}

h2::before {
	content: url('ULDE%20Ding.svg');
	position: relative;
	bottom: -2pt;
	margin-right: 8pt;
	transform: scale(1.2,1.2);
	display: inline-block;
}

h2 {
	font-size: 32pt;
	font-weight: normal;
	color: var(--prim);
	margin: 48px 0px 16px 0px;
}

h3 {
	font-size: 16pt;
    font-weight: 600;
	color: var(--fg);
	margin: 32px 0px 8px 0px;
}

p {
	line-height: 160%;
	margin: 16px 0px 16px 0px;
}

p br {
  line-height: 100%;
}

ul, ol {
	margin-top: 0px;
	margin-bottom: 0px;
}

li {
	margin-bottom: 4pt;
}

::marker {
	color: #f6a725;
	content: '✓ ';
}

a {
	color: var(--prim);
}

a:hover {
	color: var(--sek);
}

a:hover img {
	border: 3px var(--sek) solid;
}

a[target="_blank"]::before {
	 content: "→ ";
	 display:inline-block;
	 color: var(--fg);
	 text-decoration-line: none;
}

i {
	color: var(--prim);
}

b {
	color: var(--prim);
}

em {
	font-style: normal;
	font-weight: 600;
	background-color: var(--sek);
	padding: 0px 6px;
}

hr {
	color: var(--sek);
	border: 1px solid var(--sek);
	margin: 2em 0px;
}

img {
	box-shadow: 5px 5px 6px #cccccc;
	border: 1px solid #eee;
	max-width: 720px;
}

img.flat {
	box-shadow: none;
	border: none;
	position: relative;
	bottom: -5px;
}

input {
	font-size: 80%;
	max-width: 40vw;
	margin: 2px 0px;
}

form {
	display: contents;
}

button, .button {
	color: #fff;
	font-family: : "Source Sans Pro", Roboto, Oxygen, "Droid Sans", sans-serif;
	font-size: 16pt;
	background-color: var(--prim);
	padding: 0px 8px;
	box-shadow: 2px 2px 3px 0px gray;
	border: 1px solid black;
	border-radius: 4px;
	margin: 4px 0px 0px 0px;
}

a.button {
	display: inline-block;
	box-sizing: border-box;
	text-decoration: none white solid 0px; 
	margin-bottom: -1px;
}

button:hover {
	color: var(--sek);  
	/* background-color: var(--sek);*/ 
}

td {
	vertical-align: bottom;
}

.top td {
	vertical-align:top;
}

.center td {
	text-align: center;
}

.right {
	text-align: right;
}

section {
	background-color: #f8f8f8;
	margin: 2em 0;
	padding: 1px 12px 12px 12px;
}    

footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100vw;
	text-align: center;
	font-size: 80%;
	padding: 2pt;
	background-color: #004a;
	color: var(--bg);
}

cite {
	display: inline-block;
	width: 700px;
	font-size: 90%;
	text-align: right;
	color: var(--prim);
}

footer a {
	color: var(--bg);
}

small {
	color: var(--prim);
	font-size: 70%;
}

.center {
	text-align: center;
}

.header {
	display: grid;
	grid-template: 
	'menu logo'
	'img img';
}

.logo {
	grid-area: logo;
	height: 72pt;
	text-align: right;
	box-shadow: none;
	border: none;
	margin-bottom: 0.5em;
}

.menu {
	grid-area: menu;
}

.menu-btn {
	display: none;
}

.menu-icon {
	display: inline-block;
	width: 1.5em;
	font-size: 150%;
	text-align: center;
	background-color: var(--prim);
	border-radius: 4px;
}

.menu ul {
	display: none;
	position: absolute;
	overflow: hidden;
	background-color: #f8f8f8e8;
	list-style: none;
	padding: 16px 24px;
	margin-bottom: 24px;
	border-radius: 4px;
}

.menu-btn:checked ~ ul {
	display: block;
}

.menu a {
	color: var(--fg);
}

.menu a:hover {
	color: var(--sek);
}

.kasten {
	background-color: #f8f8f8;
	margin: 3em 0;
	padding: 1px 12px 12px 12px;
}    

.slogan {
	color: var(--prim);
	font-size: 70%;
	/*padding-left: 1em;
	text-align: center;*/
	/*text-align: right;*/
}

.topimg {
	grid-area: img;
}

.topimg img {
	width: 720px;
	max-width: 100%;
	box-shadow: none;
}

.thispage {
	color: var(--sek);
}

.pointsto {
	list-style-type: "→  ";
}

.zitat {
	text-align: center;
	padding: 24px 12px 0px 12px;
	margin: 72px 0px 0px 0px;
	border-top: var(--sek) solid 2px;
}

.zitat2 {
	text-align: center;
	padding: 24px 12px 0px 12px;
	margin: 0px 0px 0px 0px;
}

.autor {
	color: var(--prim);
	font-size: 70%;
	text-align: right;
	padding: 0px 12px 12px 12px;
	margin: 0px 0px 72px 0px;
	border-bottom: var(--sek) solid 2px;
}

.floatright {
	float:right;
	margin-left: 0.5em;
}

.nofloat {
	float: clear;
}

#overlay {
	 position: fixed;
	 display: flex;
	 width: 100vw;
	 height: 100vh;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 background-color: rgba(0,0,0,0.7); /* Black background with opacity */
	 z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	 cursor: pointer; /* Add a pointer on hover */
	 align-items: center;
	 justify-content: center;
}

.messagebox {
	 padding: 1em;
	 border: 2px solid black;
	 background-color: white;
}