/*
    Eigenschaften für margin, padding und border zurücksetzen, 
    damit Browserabweichungen ausgeglichen werden können.
*/
/*
 *{
    margin-left: 5px
    padding: 0px;
	box-sizing: border-box;
    border: none;
}
*/
.container{
	max-width: none;
	background: #daddf1;
	border-radius: 5px;
	width: max-content;
	padding: 20px;
	box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #b0b053;
}
.add{
	text-decoration: none;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: #fbb63e;
	font-size: 2rem;
	font-weight: bold;
	color:#FFFFCC;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Dynamic Class Createion */
.flex{
	display: block;
	/* gap: 1.0em; */
	/* float: left;*/
	border-radius: 5px;
	width: max-content;
	padding: 10px;
	background: #daddf1;
	/* justify-content: center; */
}
.delete{
	text-decoration: none;
	display: inline-block;
	background: #ffffff;
	color: #ff2600;
	font-size: 1.5rem;
	font-weight: bold;
	width: 30px;
	height: 30px;
	margin-left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
input_ma{
	padding: 8px 10px;
	background: #e8f0fe;
	border:  none;
	/* width: 100%;  */
	border-radius: 5px;
}
input_ma:focus{
	outline: 1px solid #E8F0FE;
}

.inp-group{
	margin-bottom: 10px;
}
/*
    Für den kompletten HTML Bereich setzen wir die Standard Schrift und verpassen
    der Seite noch eine Hintergrundfarbe.
*/
html {
 
	background-color: #e5eee9; /* #ffffff; */ 
	color: #000080;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

#title {
    /* background: #000080 url("bilder/logoklein5.png") no-repeat top left; */
	background: url("bilder/logoklein5.png");
    background-color: #67c78c; 
	background-repeat: no-repeat;
	background-size: 140px 140px;
	background-position: top left;
	height: auto;
    height: 140px; /* 170px + 10px (padding) gibt die 180px des Bildes */
    text-align: right;
    padding: 0px 15px 0px 70px;
	font-size: 24px; 
	text-shadow: 2px 2px #808080; 
    font-weight: normal;
	margin: 0px 0px 0px 0px;
	color: hsl(102, 84%, 12%);
}

#subtitle {
    color: #000080;

    text-decoration: underline;
    margin: 1em 0px 1em 20px;
    font-weight: bold;	
}

nav > ul {
	list-style: none;
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

nav li {
	margin: 0.5em;
	padding: 0;
/*	font-size: 1.5em; */
	font-size: 1.0em;
	flex: 1 1 0%;
}

@media (min-width: 45em) {
	nav > ul {
		flex-direction: row;
	}
	nav li {
		flex: 1;
		font-size: 1em;
	}
}

nav a {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	border: thin solid var(--background-color);
	border-radius: .5em;
	color: gold;
	background-color: var(--background-color);
	transition: all .25s ease-in;
}

nav li[aria-current] a {
	background-color: var(--accent2-color);
	color: var(--accent1-color);
}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	color: var(--background-color);
	background-color: var(--accent1-color);
}

/*     submenu navigation links      */
nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
nav .submenu li { 
  display: block; 
  width: 15em;
}
 
/**     Show the submenu on hover, focus     **/
nav li:hover  .submenu,
nav li:active  .submenu, 
nav li:focus  .submenu { 
  visibility: visible;
  height: auto;
}
:root {
	/* --background-color: midnightblue; */
	--background-color: midnightblue;
	--accent1-color: gold;
	--accent2-color: darkred;
	--text-color: black;
}

/*
    Und zu guter letzt noch der Content. 
    Am Container selbst wird nicht viel getan, aber die einzelnen Elemente darin müssen
    wieder ihren 'margin' bekommen, den wir am Anfang zurück gesetzt haben.
*/

#content {
	margin: 1em 0px 1em 14px;
    /* margin: 0px 1.3em; */
}


#content p {
    color: #000080; /* dunkelblau */
	margin: 1em 0px 1em 14px;
    /* margin: 1em 0px; */
}

#content h1 {
    color: #FFFFCC; /* helles gelb */
    margin: 1em 0px;
	font-size: 10px; 
}	

#content h2 {
    color: #000080; /* Dunkelblau */
    margin: 1em 0px; 
}
#content h3 {
    color: #000080; /* Dunkelblau */
    margin: 1em 0px; 
	font-size: 10px; 
}
#content h4 {
    color: #000080; /* Dunkelblau */
    margin: 0.7em 0px; 
	font-weight: 200;
	font-size: 8px; 
}

h5 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  font-size: 14px;
}	

#text1 {
	font-family: sans-serif;
    text-align: left;
    padding: 1em;
	background-color: white;
/*	width: 250px;
	height: auto; */
	font-size: 16px; 
	/* text-shadow: 2px 2px #e0e0e0; */
    font-weight: normal;
	margin: 0px 0px 0px 10px;
	color: #000070;
}

#figure {
	font-family: sans-serif;
    text-align: center;
	/* background-color: orange; */
	width: 250px;
	height: auto;
	float: right;
    padding: 1em 1em 3 em 1em;
	border: 1px solid silver;
	margin: 0 2em 2em 2em;
	box-shadow: 10px 0px 25px #555;
	transform: rotate(10deg);
}

#figure img {
	width: 25%;
	height: auto;
}	

.leftFloat {
	font-family: sans-serif;
	font-size: 8px; 
    font-weight: normal;
	float: left;
	padding: 1em 1em 2em 1em;
	border: 1px solid silver;
	margin: 0 2em 2em 2em;
}	


table,
th,
td {
    color: #000080; 
	margin-left: 12px;
	border-collapse: collapse;	
	border: 1px solid;
}
	
td {
	padding: .5em;
}

#coll {
	border-collapse: collapse;
	margin-left: 5px;
	font-size: 14px; 
    font-weight: normal;
}

#standinfo {
	border-collapse: collapse;
	margin-left: 20px;
}
#sepa {
	border-collapse: separate;
	margin-top: 2em;
}

input[type="number"] {
    color: #000080; 
	background-color: #E8F0FE;
	height: 1.3em;
	font-size: 14px; 
	border-width: 1px;
}	

input[type="text"] {
    color: #000080; 
	background-color: #E8F0FE;
	height: 1.5em;
	font-size: 14px; 
	border-width: 1px;
}	

input[type="password"] {
    color: #000080; 
	background-color: #E8F0FE;
	height: 1.5em;
	font-size: 14px; 
	border-width: 1px;
}	
input[type="email"] {
    color: #000080; 
	background-color: #E8F0FE;
	height: 1.5em;
	font-size: 14px; 
	border-width: 1px;
}	

input[type="url"] {
    color: #000080; 
	background-color: #E8F0FE;
	height: 1.5em;
	font-size: 14px; 
	border-width: 1px;
}	

input[type="submit"] {
	display: inline-block;
	font-size: 1.0em; padding: 5px 12px; 
	font-family: Roboto, sans-serif;
	font-weight: 300;
	color: teal;
	border: 1px solid silver;
	background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	border-radius: 20px;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
}

input[type="reset"] {
	font-size: 1.0em; padding: 5px 12px; 
	font-family: Roboto, sans-serif;
	font-weight: 300;
	color: teal;
	border: 1px solid silver;
	background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	border-radius: 20px;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
}

#hallenplan {
  position: relative;
  width: 50%;
  height: 50%;
}


/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

#close_cookie{display:none;}
#close_cookie:checked + #cookie_consent_popup{display:none;}
#cookie_consent_popup{
	position:fixed;
	bottom:30px;left:30px;
	width:400px;
	height:180px;
	background-color:#fbb63e;
	padding:20px;
	z-index:2;
}
	#cookie_consent_popup h1{
		font-size:1.2em;
	}
		#cookie_consent_popup h1:before{
			content:"";
			padding:0;
		}
	#cookie_consent_popup p{
		font-size:0.7em;
	}
	#cookie_consent_popup #close_cookie_box{
		position:absolute;
		top:20px;right:20px;
		cursor:pointer;
		font-size:1.3em;
	}
	#cookie_consent_popup #ok_cookie_box{
		position:absolute;
		bottom:20px;right:20px;
		cursor:pointer;
		font-size:1.6em;
		padding:10px 20px;
		font-weight:700;
		color:white;
	}