.menu{
	border-top: solid #ccc 0.5px;	
}

.menu li{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	border-bottom: 1px solid; 
	border-color: #ccc;
}

.menu ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background-color: #ecead8;
}
.menu ul ul {
	padding-left: 10px;
	background-color: #e9e9e9;
	border-bottom: 0px;
}
.menu a:link, .menu a:visited, .menu a:active {
	padding: 5px 10px 5px 20px;
	text-shadow: 0px 1px 8px #ccc;
	color: #6192bb;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
.menu a:hover {
	text-decoration: none;
	color: #6192bb;
}
.menu_current, .menu-current {
	color: #6192bb;
	background-color: #fff;
}
.menu li li a { font-weight: normal; border-top: 1px solid #999; }
.menu li li:first-child a { border-top: none; }

@media screen and (max-width: 900px) {	
	#mainContainer { 
	border:none;
	margin: 0 auto 0 auto;
	}
	
	#mainContent {
    float: none;
    width: 90%;
    padding: 20px 5%;
	margin: 0;
	}
	
	#container > a > img { display: block; }

	/* Sticky-Absicherung: Die Container erzeugen mobil keine eigene Box mehr.
	   Damit ist <body> der Bezugsrahmen fuer #mobilebar und die Leiste klebt auch dann,
	   wenn ein Modul (z.B. Formular-Fehlermeldung) ein div unsauber schliesst. */
	#mainContainer, #container { display: contents; }

	/* ---- Mobile Menueleiste: klebt oben, unabhaengig von Aufloesung/Header-Hoehe ---- */
	#mobilebar {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 1000;
		box-sizing: border-box;
		height: 48px;
		padding: 0 6px;
		background: #fdca01;
		border-top: 1px solid rgba(0,0,0,0.08);
	}
	#mobilebar.stuck { position: fixed; top: 0; left: 0; right: 0; }
	#menuswitch {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 0 12px;
		margin: 0;
		font: inherit;
		font-size: 15px;
		font-weight: 700;
		color: #000;
		background: transparent;
		border: 0;
		border-radius: 4px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	#menuswitch:hover, #menuswitch:focus-visible { background: rgba(0,0,0,0.08); }
	#menuswitch:focus-visible, #menuclose:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
	.menuswitch-icon { display: inline-flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; }
	.menuswitch-icon span { display: block; height: 2px; background: #000; border-radius: 1px; }

	/* ---- Menue als Slide-in-Panel von rechts ---- */
	#sidebar {
		display: block;
		float: none;
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: min(300px, 85vw);
		margin: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 2000;
		box-shadow: -8px 0 30px rgba(0,0,0,0.25);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}
	body.menu-open #sidebar {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s;
	}
	.drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding: 0 6px 0 20px;
		box-sizing: border-box;
		background: #fdca01;
		color: #000;
		font-weight: 700;
	}
	#menuclose {
		width: 44px; height: 44px;
		padding: 0; margin: 0;
		font-size: 30px; line-height: 1;
		color: #000;
		background: transparent;
		border: 0;
		border-radius: 4px;
		cursor: pointer;
	}
	#menuclose:hover { background: rgba(0,0,0,0.08); }
	#menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1500;
		background: rgba(0,0,0,0.45);
	}
	#menu-backdrop[hidden] { display: none; }
	body.menu-open { overflow: hidden; }

	#tools { float: none; width: auto; box-sizing: border-box; padding: 10px 20px 20px 20px; }
	.menu a:link, .menu a:visited, .menu a:active { padding: 12px 20px; font-size: 16px; }
	.menu ul ul a:link, .menu ul ul a:visited, .menu ul ul a:active { padding-left: 10px; }

	/* ---- Formular (thr_form): feste Pixelbreiten des Moduls mobil aufheben ----
	   Sonst ist die Seite breiter als das Handy-Display (seitliches Scrollen/Zoom-Out),
	   und die sticky Leiste verhaelt sich nach dem Absenden mit Fehlerseite anders. */
	div.thr_form, div.thr_form form { max-width: 100% !important; box-sizing: border-box; }
	div.thr_form fieldset { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
	div.thr_form div.questionbox,
	div.thr_form fieldset div.questionbox,
	div.thr_form div.answerbox,
	div.thr_form fieldset div.answerbox,
	div.thr_form div.submitbox { float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; height: auto !important; box-sizing: border-box; }
	div.thr_form input[type=text], div.thr_form input[type=email], div.thr_form input[type=tel],
	div.thr_form input[type=password], div.thr_form input[type=number], div.thr_form input[type=file],
	div.thr_form select, div.thr_form textarea,
	.thr_form_text, .thr_form_err_text, .thr_form_email, .thr_form_err_email,
	.thr_form_select, .thr_form_err_select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

	/* Seitliches Ueberlaufen generell abfangen, ohne sticky zu brechen (clip erzeugt keinen Scroll-Container) */
	html, body { max-width: 100%; overflow-x: clip; }
}