:root {
	--bg-main: #f9f9fa;
	--bg-nav: #fff;
	--bg-header: #a8324a;
	--bg-footer: #a8324a;
	--bg-botton: #2e8224;
	--text-green: #2e8224;
	--text-main: #232323;
	--text-footer: #ffffff;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 860px; height: 100vh;
	margin: 0; margin-left: auto; margin-right: auto;
	padding: 0;
	font-size: clamp(12px, 2.5vw, 18px);
}

header,
main,
#footer_top,
footer {
	width: 100%; max-width: 100%;
	box-sizing: border-box;
}

/* === HEADER === */
header{
	width: 100%;
	color: #2e8224;
	margin-top: 10px;
}
header h1{
	font-size: font-size: clamp(16px, 5vw, 48px);;
	font-weight: bold;
}
header a{
	color: var(--text-green);
}
header img{
	width: 100%
}
#header_logos{
	display: flex;
}


/* === MAIN: nav + inhalt nebeneinander === */

main {
	display: flex;
	align-items: stretch;
	/*min-height: 400px;*/
	width: 100%; max-width: 100%;
	box-sizing: border-box;
}

/* === NAV START === */

nav {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 20%; min-width: 20%;
	padding-right: 1%; padding-left: 1%;
	flex-shrink: 0;
	overflow-x: hidden;          /* zu breiter Text wird abgeschnitten */
	white-space: nowrap;       /* kein Zeilenumbruch */
	box-sizing: border-box;
	transition: width 0.0s ease;
	align-self: stretch;       /* volle Höhe von main */
	background: #f5f5f5;
	z-index: 10;
}

nav:hover {
	width: 30%;
	min-width: 30%;
}
nav ul, nav ul ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul ul {
	margin-left: 20px;
	display: none;
}
nav ul li {
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	padding-top: 5px; padding-bottom: 5px;
}
nav ul li:has(> ul)::before {
	content: "+";
	margin-right: 0.5em;
	font-weight: bold;

}
nav ul li:not(:has(> ul))::before {
	content: "-";
	margin-right: 0.5em;
	cursor: pointer;
}
nav ul ul li:has(> ul)::before {
	content: "+";
	margin-right: 0.5em;
	font-weight: bold;
	cursor: pointer;
}
nav ul ul li:not(:has(> ul))::before {
	content: "-";
	margin-right: 0.5em;
	cursor: pointer;
}

/* Beim selected-Link oder wenn ein Kind selected ist: aufklappen */
nav li > a.selected,
nav li ul:has(a.selected) {
	color: red;
}

nav ul li:has(a.selected) ul
{
	display: block;
	/* Das direkte Untermenü dieses Pfads einblenden */
}

/* Optional: Schrift für selected-Link */
nav a.selected {
	color: red;
	font-weight: bold;
}
nav .unsichtbar{
	color: #CCCCCC;
}
nav a{
	white-space: nowrap;
}

/* Beim Hover: nav wird 30% → inhalt bleibt 80% → zusammen 110% →
   negativer margin-left kompensiert die 10% Überlappung */
nav:hover + #inhalt {
  margin-left: -10%;
}

/* === NAV ENDE === */
/* === INHALT START=== */
/* === INHALT START=== */

#inhalt {
	width: 80%;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: margin-left 0.0s ease;
	background: white;
	padding-left: 2%;
	z-index: 01;
}
#inhalt h1{
	font-size: 140%;
	font-weight: bold;
	margin-bottom: 10px;
}
#inhalt h2{
	font-size: 120%;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 05px;
}
#inhalt ul{
	list-style: disc;
	margin-left: 20px; margin-bottom: 20px;
}
#inhalt ul li{
	margin-left: 10px;
	padding-left: 10px;
}
#inhalt ol{
	list-style: nu;
	margin-left: 20px; margin-bottom: 20px;
}
#inhalt ol li{
	margin-left: 10px;
	padding-left: 10px;
}
#inhalt p{
	margin-bottom: 10px;
}
#inhalt a{
	text-decoration: underline;
	color: blue;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
}
#inhalt strong{
	font-weight: bold;
	color: var(--text-green)
}
#inhalt .thumbs{
	height: 16px;
	width: 16px;
	cursor: pointer;
}
#inhalt .eingabefeld{
	/*width: auto;*/
}
#terminvergabe_schuetzenhaus{
	padding-top: 10px;
	padding-bottom: 10px;
}

/* === INHALT ENDE=== */
/* === FOOTER START=== */
/*########### FOOTER ##############################################*/
footer {
	border-top: 4px solid #2e8224;
	padding-top: 10px;
	margin-top: 20px;
}
footer ul{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-evenly;
	align-items: center;
}
.dreix_footer{
	margin-top: 50px;
}
#footer_top{
	display: flex;
	border-top: 4px solid #2e8224;
	padding-top: 10px;
	margin-top: 20px;
}
#footer_top .col1{ width: 33%;}
#footer_top .col2{ width: 33%;}
#footer_top .col3{ width: 33%;}
#footer_top h2{ padding: 5px; background: #2e8224; width: 80%; color: white; font-weight: bold;}
#footer_top p{ line-height: 25px;}
#footer_top strong{
	font-weight: bold;
	color: var(--text-green)
}
/* === FOOTER ENDE=== */


/* === RESPONSIVE: untereinander ab 600px === */

@media (max-width: 600px) {
  main {
    flex-direction: column;
    min-height: auto;
  }

  nav,
  nav:hover {
    width: 100%;
    min-width: 100%;
    white-space: normal;
    overflow: visible;
  }

  nav:hover + #inhalt {
    margin-left: 0;
  }

  #inhalt {
    width: 100%;
  }
}
input{
	width: 99%; padding-left: 1%;
	font-size: clamp(12px, 2.5vw, 18px);
}

a{
	color: black;
}
table{
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

th{
	border: 1px solid gray;
	background: #E3E3E3;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
th div{
	max-width: 100%;
	overflow: hidden;
}
td{
	border: 1px solid gray;
	overflow: hidden;
	vertical-align: middle;
}
td .button{
	width: 100%;
}
/*####### FORMATIERUNGEN START ############*/
.font50pro{font-size: 50%;}
.font70pro{font-size: 70%;}

.mobil_ausblenden{ white-space: nowrap; overflow: hidden;}
.mobil_einblenden{ display: none; }
.hintergrund{background-color: #2e8224 !important; color: white;}
.hervorheben{background-color: #DEDEDE !important;}
.button{
	display: inline-flex; justify-content: center; align-items: center;
	flex: 0 0 auto;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	word-wrap: break-word;
	border: 1px solid #ADADAD; background: #cccccc;
	width: auto; max-width: 100%; min-width: auto;
	height: auto;
	overflow: hidden;
	line-height: normal;
	cursor: pointer;
	margin: 1px; margin-left: 0px; margin-right: 0.5%;
	padding: 2px; padding-left: 0.5%; padding-right: 0.5%;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	text-decoration: none;
	font-weight: normal;
	box-shadow: 2px 2px 1px #A9A9A9;
	box-sizing: border-box;
	user-select: none;
}
.breite100px{width: 100px;}
.links{text-align: left;}
.rechts{text-align: right;}
.zentrieren{text-align: center;}
.email{
	max-width: 250px;
	overflow: hidden;
}
.eingabefeld{
	max-width: 100%; min-height: 17px;
	border: 1px solid black;
	background: #D6F5FF;
	cursor: pointer;
	padding-left: 2px;
	width: calc(98% - 4px);
	box-shadow: 2px 2px 1px #A9A9A9;
	box-sizing: border-box;
	user-select: none;
}
.kalender{
	white-space: nowrap;
}
.kalender div{
	white-space: nowrap;
}
.zeit{
	display: inline;
}
.zeit div{
	display: inline;
}
.pointer{
	cursor: pointer;
}
.kein_umbruch{
	white-space: nowrap;
}

/*####### FORMATIERUNGEN ENDE ############*/
/*########### REITER ##############################################*/
#reiter_box{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	clear: both;
	background: white;
	border: 0px hidden;
	padding: 1px;
	max-width: 100%;
}
.reiter{
	padding-left: 0.5%;
	padding-right: 0.5%;
	padding-top: 5px;
	 border-left: 1px solid black;
	 border-top: 1px solid black;
	 border-bottom: 1px solid black;
	 border-right: 1px solid black;
	 background: silver;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	position: relative;
	top: 3px;
	cursor: pointer;
	flex: 1;
	text-align: center;
	overflow: hidden;
}
.reiter_selected{
	background: white;
	border-bottom: 1px solid white;
	color: red;
	z-index: 1;
}
.reiter_verborgen{ display: none; }
#div_termine{
	margin-top: 20px;
}

#termine_daten{
	display: block;
	float: none; clear: both;
	border: 0px hidden;
	box-shadow: 4px 4px 13px 0 #808080;
	margin: 1px;
	padding: 5px;
	border: 1px solid black;
	z-index: 1000;
	line-height: 1.2
}
.zeile_termine{
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid black;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	text-decoration: none;
	font-weight: normal;
	box-shadow: 2px 2px 1px #A9A9A9;
}
.zeile_datum_zeit{
	display: flex;
	gap: 6px;
	padding: 4px 0;
	align-items: center;
	overflow: hidden;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: nowrap;
	/*grid-template-columns: 16.5% 16.5% 16.5% 16.5% 16.5% 16.5%;  Datum | Zeit | Ort */
}
.zeile_datum_zeit div{}
.zeile_ort{
	display: grid;
	grid-template-columns: 20% 80%; /* Ort */
	gap: 6px;
	padding: 4px 0;
	align-items: start;
}
.zeile_beschreibung{
	display: grid;
	grid-template-columns: 20% 80%; /* Beschreibung */
	gap: 6px;
	padding: 4px 0;
	align-items: start;
}

/*########### SLIDER ##############################################*/
.toggle {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
}

.slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: #cdd1db;      /* grau = aus */
	border-radius: 28px;
	transition: background 0.25s;
}

.slider::before {           /* der weiße Kreis */
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.25s;
}

/* Eingeschaltet → blau + Kreis rechts */
.toggle input:checked + .slider {
	background: #4f6ef7;
}

.toggle input:checked + .slider::before {
	transform: translateX(24px);
}
/*########### TOOLTIP ##############################################*/
.ui-tooltip {
	opacity: 1;
	max-width: 400px; width: auto;
	padding: 5px;
}
.ui-tooltip p{ margin-bottom: 10px;}
.ui-tooltip:last-child{ margin-bottom: 5px;}