/* ID:92291 */
@charset "utf-8";
/*$smallDevWidth:600px;
$smallScreenWidth:890px;*/
body.touch{
	#sidebar{
		border:none;
		box-sizing: border-box;
		font-size: 1rem;
		max-height: 100vh;
		max-width: var(--maxSidebarWidth);
		padding: calc(2.5rem + 1ex) 0 0 0;
		position: fixed;
		right: 0;
		top: 0;
		width:4em;
		z-index: 9098;
		@media (max-height: 600px /*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
			width: 0;
		}
		nav{
			margin-bottom: 0;
		}
		#sidebarShow{
			position:absolute;
			right:0;
		}

		li{
			list-style-type: none;
			margin:0;
			padding: .5ex 1ex 0;

			a {
				border: 1px solid darkgrey;
				display: block;
				min-height: 4ex;
				&:hover{
					text-decoration:none;
				}
			}
		}
		table{
			margin-left: auto;
			margin-right: auto;
		}
		h3.plain,
		div.img,
		address div,
		span.link a,
		li.nolink{
			display: none;
		}
		details summary{
			padding-bottom: 0;
			position: relative;
			min-height:4ex;
			i{
				font-size: 1.5em;
				left:0.5em;
				min-width: 1em;
				position: absolute;
				text-align: center;
				top:0;
			}
		}

		nav.links,
		nav.files,
		address,
		span.link{
			ul{
				display: none;
			}
			label{
				display: revert;
			}
		}

		button{
			min-width: unset;
			span{
				display: none;
			}
		}
		button,
		input[type=submit]{
			font-size:1rem;
			height:6ex !important;
			margin-bottom: 1ex !important;
			width:100% !important;
		}
		#innersidebar {
			box-sizing: border-box;
			height: calc(100% - 2.5rem - 1ex);
			left:0;
			margin-right: 0;
			max-height: unset;
			max-width: 25rem;
			overflow-x: hidden;
			padding-bottom: 4em;/* bessere Anzeige auf Mobilgeräten*/
			padding:0 1ex;
			position: absolute;
			right:0;
			text-align: center;
			transition-delay: 50ms;
			transition-duration: var(--menuDelay);
			transition-property: width;
			transition-timing-function: linear;
			width:100%;
			z-index:+1;
			#lastLogin{
				max-width: 12em;
				text-align:left;
			}
		}
	}

	#navShow,
	#sidebarShow{
		display:inline-block;
		text-align:center;
		width:4em;
	}

	#sidebarShowCheck{
		~ #sidebar summary {
			&::-webkit-details-marker {
				display: none;
			}
			:first-child,
				:nth-child(2){
				display: none;
			}
			i:first-child{
				display: inline;
				left: 0;
			}
		}
		&:checked{
			~ #sidebar {
				width:100%;
				#innersidebar {
					opacity: 1;
				}
				h3 span,
				h3.plain,
				div.img,
				address div,
				li.nolink{
					display: revert;
				}
				span.link a{
					display: block;
				}
				nav.links,
				nav.files,
				address,
				span.link{
					ul{
						display: revert;
					}
					&::before				{
						display: none;
					}
				}
				nav.links,
				nav.files,
				address,
				span.link{
					label{
						display:none;
					}
				}
				button{
					span{
						display: unset;
					}
				}
				summary {
					&::-webkit-details-marker {
						display: inline;
					}
					:first-child,
						:nth-child(2){
						display: inline;
					}
					i{
						display: inline;
						left: 0.5em;
					}
				}
			}
		}
	}

	#navShowCheck:checked{
		~ #nav{
			display:block;
			ul::before{
				background: #000000b5;
				bottom: 0;
				content: "";
				left: 0;
				position: fixed;
				right: 0;
				top: 0;
			}
			#mainMenu{
				max-width:var(--maxMenuWidth);
				opacity: 1;
				padding-bottom: 100px;
				visibility: visible;
				width:100%;
			}
		}
	}

	#sidebarButton{
		align-items: center;
		color:white;
		display: flex;
		font-size: 1.3em;
		height:2.5rem;
		position: fixed;
		right:0;
		top:0;
		z-index: 9999;
	}
	#navButton,
	#sidebarButton,
	#homeButton{
		color: var(--themeFontColor);
	}
	#navButton{
		align-items: center;
		display: grid;
		font-size: 2ex;
		grid-row: 1;
		justify-content: center;
		right:0;
	}

	#nav{
		border-radius: 0;
		box-sizing: border-box;
		display:none;
		font-size: 1rem;
		left:0;
		max-height: 100vh;
		max-width:var(--maxMenuWidth);
		overflow:auto;
		padding-left: var(--sal);
		padding-top: calc(2.5em + 1ex);
		position: fixed;
		top: 0;
		width:100%;
		z-index: 9010;

		a{
			text-decoration: none;
			display:block;
		}
		ul{
			list-style: none outside none;
			margin:0;
			padding:0;
			transition-delay: 0ms;
			transition-duration: 0.03s;
			transition-property: left,clip,opacity;
			transition-timing-function: linear;
			width:100%;
			li{
				background-color: whitesmoke;
				border-bottom: 1px solid black;
				/*remove base color*/
				/*color:var(--themeFontColor) !important;*/
				padding: 1.2ex 3em 1.2ex 0.5em;
				position: relative;
				a:hover{
					color:inherit;
				}
				&.menu.back.first,
				&.menu.back.last{
					background-color: var(--themeColor);
					color:var(--themeFontColor) !important;
				}
			}
		}

		input[type=checkbox]{
			display:none;
		}

		label.next,
		label.back{
			width:100%;
			display: inline-block;
			span{
				position: absolute;
				right:1em;
				top:0;
			}
		}
		li.back span{
			font-weight: bold;
		}
		ul > li >ul{
			z-index: 9001;
		}

		li.menu:has(a.menumeta){
			border: none;
		}
		#mainMenu{
			opacity: 0;
			transition-duration: var(--menuDelay);
			transition-property: opacity;
			visibility: hidden;
			width:0;/*no click possible else*/
			z-index: 0;
		}
		li.menu.back.last{
			display:none;
		}
		input {
			~ ul{
				display:none;
				left: 0;
				opacity: 0;
				position: absolute;
				top:0;
			}

			&:checked ~ ul{
				display: block;
				opacity: 1;
				&::before {
					background: #000000b5;
					bottom: 0;
					content: "";
					left: 0;
					position: fixed;
					right: 0;
					top: 0;
				}
			}
		}
		/*change display order*/
		li:nth-child(1n+10) > ul{
			top:auto !important;
			bottom: 0;
			& > li.menu.back.first{
				display:none;
			}
			& > li.menu.back.last{
				display:inherit;
			}
		}
		span.plain{
			display: none;
		}
	}

	&.registered{
		#sidebarShowCheck:checked ~ #sidebarButton #sidebarShow,
			#navShowCheck:checked ~ #navButton #navShow{
			background-color: var(--themeColor) !important;
			color:color-mix(in srgb, black 20%, var(--themeFontColor)) !important;
		}

	}
}