@CHARSET "UTF-8";

:root {
 --borderBlue: medium double #0079AE;
 --borderRed: medium double #dd2255;
 
 }
	h1,body,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
	font-family: Times New Roman, sans-serif;
	font-size: 16px;
	}
	
ul {
	list-style-type: none;
	}
ul a {
	display: flex;
	align-items: center;
	}
		
body {
	-webkit-text-size-adjust: 150%;
	text-size-adjust: 150%;
}

div > .mainnavi {
	position: fixed;
	top: 0.5em;
	left: 0.5em;
	z-index: 9;
	background-color: rgb(255,255,255,0.8);
	padding: 4px;
	}

nav details{
	border: var(--borderRed);
	font-size: 1.5em;
}
nav [open] li{
	padding: 20px;
}

nav [open] summary {
	list-style-type: "✖ ";
	color: #dd2255;
}
.navi-1 {
	position: fixed;
	top: 0.5em;
	right: 0.5em;
	z-index: 9;
	background-color: rgb(255,255,255,0.4);
	padding: 4px;
	display: flex;
	flex-flow: row-reverse wrap;
	align-items: center;
	max-width: 25%;
	
	
}
h1 {
	
	font-size: 1.5em;
	text-align: center;
}

h2 {
	font-size: 1.2em;
	text-align: center;
}
h3 {
	font-size: 1.1em;
	text-align: center;
}

body {
	background-color: #ffffff;
	color: #001988;
}

.unsichtbar{
	visibility: hidden;
	}
	
img, video,p {
	padding: 10px;
}

.frame_outer {
  border: var(--borderBlue);
	text-align: center;
	padding: 5px;
}

.frame_inner {
	border: var(--borderRed);
	padding: 5px;
}

.bottom {
	font-size: x-small;
	text-align: center;
}


.container {
		margin: 0 auto;
		max-width: 100%;
		width: 1200px;
	}
.mainpanel{
	width: 100%;
}
.comment_day{
	border: var(--borderBlue);
	display: flex;
	flex-flow: row nowrap;
	padding: 5px;
}
.comment_day_list{
	flex: auto;
}
.comment_entry{
	display: flex;
	flex-flow: row nowrap;
}
.comment_meta{
	display: flex;
	flex-flow: column wrap;
	width: 15%;
}
.comment_meta_neu {
	display: flex;
	flex-flow: column wrap;
	padding: 5px;
}
.comment_day_link{
	border: var(--borderBlue);
	padding: 5px;
	margin: 5px;
	flex-basis: 10%; 
}
.comment_synonym, #comment_freigabe{
	border: var(--borderBlue);
	margin: 5px;
}
.comment_text{
	border: var(--borderBlue);
	text-align: left;
	width: 85%;
	margin: 5px;
}

.comment_neu {
	border: var(--borderRed);
}
.day {
	border-bottom: var(--borderRed);
	padding-bottom: 20px;
}

/*
 position: sticky lässt Element beim scrollen sichtbar bleiben
*/

.date {
	position: sticky;
	top: 2em;
	margin: auto;
	margin-top: 5px;
	background-color: #ffffff;
	opacity: 0.85;
	padding: 10px;
	width: 75%;
	text-align: center;
	border: var(--borderBlue);
}

.day img {
	width: 400px; 
}
.day video {
  width: 400px;
}

.row-d{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	width: 100%;
	padding-top: 10px;
}
.bild {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	align-content: center;
	padding-top: 10px;
	margin: auto;
	width: 50%;
}
.bild div {
  padding-left: 90px;
  padding-right: 90px;
	
}
.bild div div {
  padding-left: 0px;
  padding-right: 0px;
}
.col-1 {
	width:100%;
	padding-top: 10px;
}
.col-2 {
	width: 48%;
	padding-top: 10px;
}
.col-4-key {
	width: calc(20% - 10px);
	overflow: hidden;
	text-overflow: hidden;
	font-weight: bolder;
	padding-bottom: 10px;
	padding-right: 10px;
}

.col-4-val {
	width: calc(30% - 10px);
	padding-left: 10px;
	padding-bottom: 10px;
}

.row-s {
	border-top: var(--borderRed);
	display: flex;
	width: 100%;
}
.row-sh {
	position: sticky;
	top: 2em;
	background-color: rgb(255,255,255,0.8);
	border-top: var(--borderRed);
	display: flex;
	width: 100%;
}
.row-sh1 {
	display: flex;
	flex-flow: row wrap;
	font-weight: bolder;
	justify-content: space-between;
	border-bottom: var(--borderRed);
	align-items: stretch;
	width: 100%;
}
.row-sh2 {
	display: flex;
	flex-flow: row wrap;
	font-weight: bolder;
	justify-content: flex-end;
	border-top: var(--borderBlue);
	border-bottom: var(--borderBlue);
	width: 100%;
}
.row-s1 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	border-bottom: var(--borderRed);
	align-items: stretch;
	width: 100%;
}
.row-s2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-items: stretch;
	border-top: var(--borderBlue);
	border-bottom: var(--borderBlue);
	width: 100%;
}
.col-s-w1 {
 width: 11.5%;
	border-right: var(--borderRed);
	font-size: 0.75em;
	text-align: center;
	border-left: var(--borderRed);
	border-bottom: var(--borderRed);
	padding-right: 1px;
}
.col-s-w100 {
 width: 100%;
	border-right: var(--borderRed);
	font-size: 0.75em;
	border-left: var(--borderRed);
	border-bottom: var(--borderRed);
	padding-right: 1px;
}
.col-s-w2 {
  width: 89.5%;
}
.col-s-w {
 width: 9%;
	border-right: var(--borderRed);
	font-size: 0.75em;
	text-align: right;
	padding-right: 1px;
}
.col-s-w3 {
 width: 13%;
	border-right: var(--borderBlue);
	font-size: 0.75em;
	text-align: right;
	padding-right: 1px;
}

.col-s-s {
	width: 4%;
	font-size: 0.75em;
	text-align: right;
	border-right: var(--borderRed);
	padding-right: 1px;
}
.col-s-m {
	width: 6.5%;
	font-size: 0.75em;
	text-align: right;
	border-right: var(--borderRed);
	padding-right: 1px;
}
.row-sh2 > .col-s-w1 {
	border-right: var(--borderBlue);
	border-left:  var(--borderBlue);
	border-bottom: none;
}
.row-s2 > .col-s-w1 {
	border-right: var(--borderBlue);
	border-left:  var(--borderBlue);
	border-bottom: none;
}
.texthervorhebung {
	border-style: double;
	border-width: medium;
	border-color: #0079AE;
	padding: 5px;
}

dialog,
button {
	border-radius: .5em .5em .5em .5em;
	border: var(--borderBlue);
	padding: .3em;
	margin-left: 3.5em;
	margin-right: 3.5em;
	margin-top: 0.2em;
	margin-bottom: 0.1em;
}
dialog {
	width: 700px;
	height: 700px;
}
dialog > form > div > button {
	margin-top: 2em;
}
#daymap_popup > form > div {
	text-align: center;
}
#map{
	width: 800px;
	height: 800px;
	border: var(--borderRed);
	margin: auto;
}
#daymap{
	width: 500px;
	height: 500px;
	border: var(--borderRed);
	margin: auto;
}

@media screen and (max-width: 1200px) and (max-height: 1200px) {
		.container {
		width: calc(100% - 70px);
		}
		#map {
		height: 800px;
		width: 800px;
		}
		#daymap {
		height: 600px;
		width: 600px;
		}
		dialog {
		height: 700px;
		width: 700px;	
		}
	}

	@media screen and (max-width: 992px) and (max-height: 992px) {
		#map,#daymap {
		height: 600px;
		width: 600px;
		}
		dialog {
		height: 700px;
		width: 700px;		
		}
	}

	@media screen and (max-width: 768px) and (max-height: 768px) {
		#map,#daymap {
		height: 500px;
		width: 500px;
		}
/* ☰ als Zeichen*/
		nav summary {
		list-style-type: "☰";
		font-size: 2rem;
		}
		nav summary span {
		font-size: 0;
		}
		dialog {
		height: 600px;
		width: 600px;		
		}
	}
	
	@media screen and (max-width: 576px) and (max-height: 576px) {
		#map,#daymap {
		height: 400px;
		width: 400px;
		}
		dialog {
		height: 500px;
		width: 500px;		
		}
	}