.main-navigation {

/* 
	--nav-leisten-hoehe: 1em;
	--nav-leisten-farbe-hintergrund	: #DFDFDF;
	--nav-leisten-farbe-text				:	gray;
	--nav-level-1-farbe-hintergrund	: #DFDFDF;
	--nav-level-1-farbe-active			: #F3F3F3;
	--nav-farbe-hover-hintergrund		: #CDC9C9;
	--nav-farbe-hover-text					: black;
*/
	.rechts {
		position					: absolute;
		right							: 0em;
	}
	.level_1 {

		.willkommen,
		.anmelden,
		.abmelden {
/* 			overflow						: hidden; */
			text-indent					: -99em;
			line-height					: 0;
				padding: auto auto;
			:after {
				font							: 1.5em/1 "RockSolid Icons";
				text-indent				: 0;
				display						: block;
			}
		}

		.willkommen {
			:after {
				content						: "\2302";
			}
		}

		.anmelden,
		.abmelden {
			:after {
				content						: "\e137";
			}
		}
		.abmelden {
			:after {
/* 				font-size					: 1.7em; */
				color							: red;
			}
		}

	}
}

/* ===========================================
 * greuthweg
 * Farben
 * =========================================== */
.rot {
	color: red;
}

/* ===========================================
 * greuthweg
 * template event_full.html5
 * =========================================== */
.mod_eventreader .event {
	.jahr, .titel, .ort, .zeitraum {
		display: inline;
	}
	.titel, .zeitraum {
		&::before{
			content: " - ";
		}
	}
	.titel {
		&::after{
			content: " - ";
		}
	}
	.titel, .zeitraum {
		font-weight: normal;
		font-style: italic;
		font-size: 60%;
	}
	
}


/* ===========================================
 * contao
 * Logout
 * unnötige Texte ausblenden
 * =========================================== */
.mod_login.logout {
	h2, p.login_info { display: none; }
}

/* ===========================================
 * contao
 * Kommentar
 * =========================================== */
.ce_comments .form .widget-text {
	display: none;
}

.h1-titel {
	img	{
		height: 2rem;
		width: auto;
	}
}

/* ===========================================
 * contao
 * accordion
 * Innenabstand links und rechts
 * =========================================== */
/* .content-accordion { */
	.rand-li-re,
	.handorgel__content,
	.handorgel__header {
	padding: 0 2rem;
	}
/* } */

/* ===========================================
 * contao
 * Button styles
 * =========================================== */
input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input:not([type]),textarea{
    width:100%;
    display:inline-block;
    padding:3px 6px;
    background:#fff;
    border:1px solid #ccc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:inset 0 1px 1px #eee;
    -webkit-box-shadow:inset 0 1px 1px #eee;
    box-shadow:inset 0 1px 1px #eee;
/* 
    -moz-transition:all .15s linear;
    -webkit-transition:all .15s linear;
    -o-transition:all .15s linear;
    transition:all .15s linear;
 */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=time]:focus,input[type=url]:focus,input:not([type]):focus,textarea:focus{
    outline:0;
    background:#fcfcfc;
    border-color:#bbb
}
form button,input[type=submit],.button{
    display:inline-block;
    padding:4px 15px 4px 14px;
    margin-bottom:0;
    text-align:center;
    vertical-align:middle;
    line-height:16px;
    font-size:11px;
    color:green;;
    cursor:pointer;
    border:1px solid #ccc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background-color:#ececec;
    background-image: none;
/* 
    background-image:-moz-linear-gradient(top,#fff,#ececec);
    background-image:-webkit-linear-gradient(top,#fff,#ececec);
    background-image:-ms-linear-gradient(top,#fff,#ececec);
    background-image:-o-linear-gradient(top,#fff,#ececec);
    background-image:linear-gradient(to bottom,#fff,red);
    background-repeat:repeat-x;
    -moz-transition:background .15s linear;
    -webkit-transition:background .15s linear;
    -o-transition:background .15s linear;
    transition:background .15s linear
 */
}
/* 
form button:hover,input[type=submit]:hover,.button:hover{
    text-decoration:none;
    background-image: none;
    background-color: yellow;
}
 */

/* ===========================================
 * opensauce
 * Button styles
 * =========================================== */
/* 
button,
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	padding: 0.55556em 1.5em;
	border: 1px solid;
	border-color: #34495e #2b3c4d #22303d;
	border-radius: 1.5px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 #2b3c4d;
	background: #3d566e;
/* 	background: linear-gradient(#425e78, #384e64); * /
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), inset 1px 1px #778899, inset -1px 0 #778899;
}
 */
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
	border-color: #2b3c4d #22303d #19232c;
/* 	background-image: linear-gradient(#486582, #32475a); */
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 1px 1px #778899, inset -1px 0 #778899;
}
button:active,
.button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
/* 	background-image: linear-gradient(#3f5971, #3b536b); */
	box-shadow: 0 0 8px rgba(0, 0, 0, 0), inset 1px 1px #778899, inset -1px 0 #778899;
}
#colorbox button,
#colorbox .button,
#colorbox input[type="submit"],
#colorbox input[type="reset"],
#colorbox input[type="button"] {
	/* Fix colorbox close button */
	box-shadow: none;
}

/* ===========================================
 * opensauce
 * schwarzer Hintergrund bei Slideshows
 * =========================================== */
 
.mod_rocksolid_slider {
	padding: 1rem;
}
.gruen {
.mod_rocksolid_slider,
.rsts-slide,
.rsts-main {
	background-color: green !important;
} }
.dunkel {
.mod_rocksolid_slider,
.rsts-slide,
.rsts-main {
	background-color: #aeaeae !important;
} }

/* ======================================================
 * NEWS
 * Modul "Nachrichtenliste" Template "news_boxes" geändert
 * ====================================================== */

.mod_newslist.block,
.mod_newslist.news-boxes {
	display					: flex;
	flex-wrap				: wrap;
	justify-content	: space-between;
	> h1 {
		display				:none;
	}

.news-image-teaser{
	width					: clamp(12em, 19vw, 15em );
		@med ia screen and (max-width: 900px) {
	width: 45%;		}
		@media screen and (max-width: 599px) {
	width: 100%;	}

	height: 22em;
		@media screen and (max-width: 900px) {
	height: 18em;	}
		@media screen and (max-width: 599px) {
	height: 25em;	}

	position			: relative;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 0;
	background-color: white;

	--figure-heigth : clamp(5em, 50vw, 10em );
	--rand-text: 10px;

	a {
		text-decoration: none;
		:hover{
		img, .subHeadline{
		  filter: blur(2px);
			}
		.more {
			color: red;
			}
		.more-img {
			z-index:99;
			}
		}
	}
	
	figure {
		position			: relative;
		width: 100%;
		margin:0;
		padding:0;
		height: var(--figure-heigth);
		}

	img {
		z-index				: -1;
		width					: 100%;
		height				: inherit;
		object-fit		: cover;
		}

	picture {
		width: 100%;
		height: inherit;
		}
	
	h2, .teaser, .more, .more-img {
		padding: 0 var(--rand-text);
		margin: 0px 0 0 0;
		}

	figure h2 {
		color: black;
			white-space: nowrap; 
		width: 100%;overflow: hidden;
			text-overflow:ellipsis;
		background: rgba(188, 188, 188, 0.8);
		font-weight:bold;
		text-shadow			: 2px 2px 3px white;
/* 		font-size				: clamp(1em, 2vw, 1.2em); */
		font-size				: clamp(1em, 1vw, 1.2em);
		position: absolute;
		bottom: 0em;
		}
	
	div.text {
		.teaser {
			max-height: 8em;
			overflow: hidden;
			font-size				: clamp(0.85em, 0.8vw, 0.9em);
			}
		h2 {
			width: 100%;
			font-weight: normal;
			white-space: wrap; 
			font-size				: clamp(1.0em, 1.3vw, 1.2em);
/* 
			white-space: nowrap; 
			overflow: hidden;
			text-overflow:ellipsis;
 */
			}
		.featured	& h2 {
			color: red;	}
		}
	
	.more-img {
		position:absolute;
		top: 2em;
		z-index:-1;
		width: 100%;
		color: white;
		text-shadow			: 0px 0px 4px #058505;
		font-size				: clamp(1.0em, 1.5vw, 2em);
		text-align: center;
		}
		
	.button {
		width: 6em;
		margin:0;
		padding:0;
		position:absolute;
		bottom: 1em;
		left:var(--rand-text);
		&:hover {
			background-color: darkgray;
			/* border-radius: 5px; */
			a {
				color: white;
				}
			}
		overflow: hidden;
		a {
			white-space: nowrap; 
			text-overflow:ellipsis;
			color: lightgray;
			}
		}
	}
}