body,
.www_dasnebahn_de {
	/*--header-background: #8b0000;*/
	--header-background: #8b1111;
	/*--nav-background: #9b0000;*/
	--nav-background: #b22222;
	--header-font-family: serif;
}

.www_rhaustalbahn_de {
	/*--header-background: #1e90ff;*/
	--header-background: #eef;
	/*--nav-background: #add8e6;*/
	--nav-background: #1e90ff;
	--header-font-family: sans;
}
.www_rhaustalbahn_de .name text {
	font-weight: bold;
	font-size: 3rem;
	margin: 0 1rem;
	color: #00c;
}


body {
	display: inline;
	margin: 0;
	font-family: Sans, Arial;
}

header {
	background: var(--header-background);
	display: block;
	position: fixed;
	width: 100vw;
	height: 5rem;
/*	font-family: arial serif;*/
	font-family: var(--header-font-family);
	z-index: 100;
}
header img {
	/*width: 4rem;*/
	height: 4rem;
	margin: 0.5rem;
	float: left;
}
header text {
	line-height: 5rem;
	font-size: 2rem;
}
header a {
	text-decoration: unset;
	color: unset;
}

nav {
	/*color: white;*/
	display: block;
	width: 25vw;
	max-width: 20rem;
	height: 100vh;
	padding: 0 0.5rem;
	overflow-y: auto;
	background: var(--nav-background);
	float: left;
}

nav .missing::before {
	display: inline-block;
/*	background: url("/media/glyphs/dropdown.png") center no-repeat;*/
/*	background-size: 1rem;*/
	content: '├';
	color: yellow;
	background: black;
	height: inherited;
	padding: 0 0.25rem;
	margin-right: 0.5rem;
/*	float: right;*/
}

nav a,
nav text {
	display: inline-block;
	text-decoration: unset;
	color: unset;
/*	margin: 0.75rem 0; */
/*	line-height: 2.5rem; */
	padding: 0.75rem 0.5rem;
	width: calc(100% - 4rem);
}

.navnode {
	margin-left: 0.5rem;
/*	line-height: 2rem;*/
/*	padding: 0.6rem 0;*/
}
.navnode:has(> .subnodes) {
/*	padding-bottom: 0;*/
}
nav > .navnode:nth-child(1) {
	margin-top: 5rem;
}
.navnode:hover {
	background: #ff000016;
}
.subnodes {
	display: none;
	background: #ffffff16;
}
nav .chkdd {
	display: none;
}
nav .chkdd:checked + .subnodes {
	display: block;
}

@keyframes dropdownup {
	0%   {scale(1,    1);}
	50%  {scale(1.4,  0);}
	100% {scale(1,   -1);}
}
.navnode:has(.chkdd:checked) > .lbldd::before {
	transform: scale(1, -1);
	transition: transform 250ms ease-out;
/*	animation-name: dropdownup;*/
/*	animation-duration: 150ms;*/
/*	content: 'A';*/
}

.navactive>a {
	font-weight: bold;
}
nav .lbldd::before {
	display: inline-block;
	background: url("/media/glyphs/dropdown.png") center no-repeat;
	background-size: 1rem;
	content: ' ';
	height: inherited;
	padding: 0 1rem;
	float: right;
/*	animation-name: dropdownup;*/
/*	animation-duration: 150ms;*/
	transition: transform 250ms ease-out;
}
nav .lbldd {
	font-size: 1.5rem;
	cursor: pointer;
	width: 1.5rem;
}

#mainwrapper {
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	/*background-image: url("/media/bg_gleis_977.jpeg");*/
	background-image: url("/media/bg_elzach.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	
}

main {
	margin: 10rem 5rem 5rem;
	padding: 1rem;
	/*background: #fffa;*/
	background: #fffc;
}

main p {
	text-align: justify;
}

main h3 {
	margin-bottom: 0rem;
	margin-left: 0.3rem;
}
main h4 {
	margin-bottom: 0rem;
	margin-left: 0.4rem;
}

main blockquote {
	font-family: times new roman;
}

main textarea.txtfile {
	color: black;
	cursor: text;
	/* upcoming from Chrome */
	field-sizing: content;
	/* to support all other browsers */
	/* (also having textarea rows="...") */
	width: 100%;
	box-sizing: border-box;
}

main img,
main video {
/*	max-width: 100%;*/
	max-width: min(400px,calc(100% - 1rem));
	max-height: 400px;
}

main img.titleimg {
}

.singleimg img,
.galleryyt {
/*	border: 1px solid gray;*/
	box-shadow: 0px 0px 10px 1px gray;
	margin: 0.5rem;
}

.gallery {
	max-height: 450px;
	overflow: scroll;
	border: 1px solid gray;
	box-shadow: 0px 0px 10px 1px gray;
	background: rgba(255,255,255,0.5);
	padding: 0.75rem;
	margin: 1rem 0.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
	gap: 0.5rem;
}

.gallery img:hover,
.gallery div:hover {
	transform: scale(1.1,1.1);
	transition: transform 150ms ease-in;
	box-shadow: 0px 10px 50px 5px #181818;
}

.gallery div {
/*	display: inline-block;*/
	height: 200px;
/*	width: 200px;*/
	background-position: center;
	background-size: cover;
}
.galleryyt {
	display: inline-block;
	height: 200px; /*1080*/
	width:  356px; /*1920*/
	max-width: 100%;
	background-position: center;
	background-size: cover;
	margin-bottom: 0.5rem;
}
.galleryyt div.ytbanbg {
	width:  85%;
	height: 75%;
	margin: 5% auto;
	background: #fffa;
	padding: 2.5%;
}
.galleryyt div.ytbanbg img {
	display: block;
	margin: auto;
}
.galleryyt {
	font-size: 0.8rem;
	text-align: justify;
}
.galleryyt p {
	margin: 0;
}
.galleryyt input ~ a {
	display: none;
}
.galleryyt input:checked ~ a {
	display: block;
}

tbody tr:nth-child(2n-1) {
	background: lightgrey;
}

table td {
	vertical-align: top;
}

blockquote {
	border-left: .25rem #933 solid;
	padding: 0 0.5rem;
	text-align: justify;
	margin-left: 1rem;
}

#navbtn {
	display: none;
	position: fixed;
}

.lblnavbtn {
	display: none;
}

.blogpreview {
	background: #ffffff8f;
	border: 1px solid grey;
	box-shadow: 0px 0px 10px 1px grey;
	padding: 0.75rem;
	margin: 1rem 0.5rem;
}
.blogpreviewlist a {
/*	text-decoration: none;*/
/*	color: black;*/
}
.blogpreview h3 {
	font-size: larger;
	margin: 0;
}
.blogpreview h4 {
	font-size: small;
	margin: 0 0 0.4rem 0.4rem;
	color: grey;
}
.blogpreview .img {
	display: inline-block;
	height: 150px;
	width:  150px;
	background-position: center;
	background-size: cover;
	box-shadow: 0px 0px 10px -1px grey;
}
.blogpreview .desc {
	display: inline-block;
	vertical-align: top;
	margin-left: 0.5rem;
	width: 100%;
}
.blogpreview .img + .desc {
	width: calc(100% - 150px - 1rem);
}

@media screen and (max-width: 1415px) {
	main {
		margin: 8rem 3rem 3rem;
	}
}
@media screen and (max-width: 850px) {
	header {
		height: 3.5rem;
	}

	header img {
		float: right;
		/*width: 3rem;*/
		height: 3rem;
		margin: 0.125rem;
	}
	header text {
		float: right;
		position: fixed;
		left: 5rem;
		line-height: 3.5rem;
		font-size: 1.5rem;
/*		margin-right: 1rem;*/
	}

	.www_rhaustalbahn_de header .name text {
		float: right;
		font-size: 1.5rem;
		margin: 0.125rem;
	}

	nav {
		display: none;
		width: 25rem;
		position: fixed;
		top: 3.5rem;
		max-width: 100vw;
	}
	nav > .navnode:nth-child(1) {
		margin-top: unset;
	}
	main {
		margin: 6.5rem 2rem 2rem;
	}

	#navbtn:checked + nav {
		display: block;
	}

	.lblnavbtn {
		display: block;
		position: fixed;
		cursor: pointer;
		z-index: 101;
	}

	body:has(#navbtn:checked) > .lblnavbtn::before {
		transform: rotate(180deg);
	}
	.lblnavbtn::before {
		display: block;
		background: url("/media/glyphs/hamburger.png") center no-repeat;
		background-size: 1.25rem;
		content: ' ';
		line-height: 1.25rem;
		padding: 0 2rem;
		position: fixed;
		top: 1.125rem;
/*		left: .25rem;*/
/*		animation-name: dropdownup;*/
/*		animation-duration: 150ms;*/
		transition: transform 250ms ease-out;
	}
}

@media screen and (max-width: 550px) {
	main {
		margin: 3.5rem 0rem 0rem;
		min-height: 100%;
	}
}
@media screen and (max-width: 336px) {
	header img {
		display: none;
	}
	.blogpreview .desc,
	.blogpreview .img + .desc {
		width: 100%;
	}
	.blogpreview h4,
	.blogpreview .desc {
		margin: 0 !imprtant;
	}
	.blogpreview {
		text-align: center;
	}
}