/**************************************/
/* Default styles for news extension */
/**************************************/
.news .clear {
	clear: both;
}

.news .nav ul {
	float: left;
	display: inline;
	margin: 0;
}

.news .nav li {
	float: left;
}

.news .nav a {
	float: left;
	display: block;
}

.news .nav:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/*
.news .article {
	padding-bottom: 15px;
	margin-bottom: 15px;
}
*/
.news .article:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

.news .article:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/*
.news .article .news-img-wrap {
	float: left;
	margin: 3px 12px 5px 0;
	background: #fff;
}

.news .article .news-img-wrap a {
	display: block;
	float: left;
	padding: 4px;
	border: 1px solid #ddd;
	background: #fff;
}
*/
.news .article .news-img-wrap img {
	float: left;
	height: auto;
	width: auto;
}

.news .article .teaser-text {
	/*margin: 0 0 10px 0;*/
	margin: 0 0 0 0;
}

.news .article h3 {
	margin-bottom: 0;
}

.news .footer {
	clear: both;
	padding: 10px 0 0 0;
	border-top: 1px solid #eee;
	margin-top: 15px;
	color: #888;
}

.news .footer p {
	line-height: 1em;
}

.news .footer span {
	display: inline-block;
	padding-right: 8px;
	margin-right: 8px;
	border-right: 1px solid #ddd;
}

.news .footer span:last-child {
	border-right: 0;
}

.news .footer .news-category a {
	text-transform: uppercase;
}

.news .no-news-found {
	color: #DB0202;
	font-style: italic;
}

.news .page-navigation p {
	float: left;
}

.news .page-navigation ul {
	float: right;
}

.news .page-navigation ul li {
	float: left;
	display: block;
	padding: 0 2px;
	background: none;
}

.news .page-navigation ul li a {
	display: block;
}

/* category menu view */
.news-category-view ul li {
	padding: 5px 8px;
}

.news-category-view ul li li {
	padding: 2px 8px 2px 12px;
}

.news-category-view > ul > li:nth-child(even) {
	background: #f9f9f9;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.news-category-view .category-desc {
	padding-left: 10px;
	margin-left: 10px;
	border-left: 1px solid #ddd;
}

/* single view */
.news-single .footer {
	margin-bottom: 20px;
	margin-top: 5px;
	padding: 10px 0 0 0;
	border-bottom: 0;
	border-top: 1px solid #eee;
}

.news-single .article .news-img-wrap {
	float: right;
	width: 282px;
	margin: 0 0 0 25px;
}

.news-single .article .news-img-wrap img {
	float: none;
}

.news-single .teaser-text {
	font-size: 15px;
	color: #888;
}

.news-text-wrap {
	margin-bottom: 10px;
}

.news-img-caption {
	color: #888;
}

/* related news + files */
.news-related-wrap {
	display: table;
	margin-top: 20px;
	width: 100%;
}

.news-related {
	width: 50%;
	padding: 15px;
	border: 1px solid #eee;
	display: table-cell;
}

.news-related ul li {
	line-height: 1em;
	margin-bottom: 12px;
}

.news-related ul li span {
	border-right: 1px solid #DDDDDD;
	display: inline-block;
	margin-right: 8px;
	padding-right: 8px;
	color: #888;
}

.news-related ul li span:last-child {
	border-right: 0;
	padding-right: 0;
}

.news-related h4 {
	margin-bottom: 10px;
}

.news-related-files ul li {
	margin-bottom: 20px;
}

.news-related-files .news-related-files-link .jpg {
	background-position: 0 0;
}

.news-clear {
	clear: both;
}




/*+- ub*/
/* --- News-list - Anf. --- */
.news-list-view  .allbutmeta {			
	border-color: var(--bs-border-color-translucent);
	border-width: var(--bs-border-width);
	border-style: solid 
}	


.news-list-view  .allbutmeta {
	box-shadow: 0
	z-index: 101;
transition: box-shadow 0.5s ease, width 0.5s ease;	
}

.news-list-view  .allbutmeta:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.25),0 2px 2px rgba(0,0,0,0.22);
	z-index: 101;	
	transition: box-shadow 0.5s ease, width 0.5s ease;
}

.news-list-view .article .bild-header-teaser-more a {text-decoration: none; color:inherit;}

.news-list-view .article .bild-header-teaser-more a .header { color: var(--bs-danger);}

.news-list-view .article .bild-header-teaser-more a .header .headline::after {
	content: "";
	height: 0.1rem;
	width: 20%;
	background-color: #d3d4d5;
	display: block;
	margin-top: 5px;
	transition: background-color 0.5s ease, width 0.5s ease;
}

.news-list-view .article .bild-header-teaser-more a:hover .header .headline::after {
	content: "";
	height: 0.1rem;
	width: 80%;
	background-color: var(--bs-danger);
	display: block;
	margin-top: 5px;
	transition: background-color 0.5s ease, width 0.5s ease;
}




/* more pfeil und text */
/* morelink pos. rel. wg text */
.news-list-view .article .bild-header-teaser-more a .morelink {
	position: relative; 
	margin-top: auto; 
	margin-bottom: 0.5rem; 
	font-size: 2rem;
}
	
.news-list-view .article .bild-header-teaser-more a .more-arrow {
	color: inherit;
	transition: color 0.5s ease-in-out, width 0.5s ease-in-out;
	height: 1.5rem;
}
.news-list-view .article .bild-header-teaser-more a:hover .more-arrow {
	color: var(--bs-danger);
	transition: color 0.5s ease-in-out, width 0.5s ease-in-out;
}



.news-list-view .article .bild-header-teaser-more a .btn-text {
	max-width: 0;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	color: inherit;
	margin-left: 0rem;
	font-size: 1rem;
	right:3.5rem;
	-webkit-transition: color .5s ease-in-out, max-width .5s ease-in-out ; 
	transition: color .5s ease-in-out, max-width .5s ease-in-out ;  
}
.news-list-view .article .bild-header-teaser-more a:hover .btn-text {
	display: inline-block;
	max-width: 100px; /* content fkt. leider nicht bei dieser animation*/
	color: var(--bs-danger);
	-webkit-transition: color .5s ease-in-out, max-width .5s ease-in-out;
	transition: color .5s ease-in-out, max-width .5s ease-in-out;
}

/* --- News-list - Ende --- */


/* --- News-kalender - Anf. --- */

/* ------------ news-calendar ------------------ */
#news-kalender > ul {
	padding-left:0;	
}

.button-news-cal {
	text-align:left;
	padding-left: 1.5rem;	
}

/*auf-/zuklappen */
.buttonwrap  button.filtered .indicator::after {
	content: "\f3e0";
	font-family: "bootstrap-icons";
	font-size: 80%;
	margin-left:0.5rem;
}

/*toggle icon hinter jahr*/
/*content: "\F4FE";   =plus,  \F2EA = minus   f3e0 = filter*/

.buttonwrap button:hover .buttonjahr {text-decoration: underline;}

.buttonwrap button[aria-expanded="true"] {	
	content: "\F4FE";
	/*font-family: "bootstrap-icons";*/
}

.buttonwrap button[aria-expanded="false"]::after {
	content: "\F4FE";
	font-family: "bootstrap-icons";
	float: right;
}

.buttonwrap button[aria-expanded="true"]::after {
	content: "\F2EA";
	font-family: "bootstrap-icons";
	float: right;
}

 button span.filter::after {
	content: "\f3e0";
	font-family: "bootstrap-icons";
	margin-left:0.5rem;
	font-size: 80%;
}


li .item, li .itemactive, li.collapse {
	list-style-type: none;	
}

/*.item:not(.itemactive):hover {text-decoration: underline;}*/

ul.jahreseintraege  {padding-left: 0.75rem;}

ul.jahreseintraege .item:last-child {padding-bottom: 1rem !important;}




/* --- News-kalender - Ende --- */


/* --- News-Detail - Anf. --- */




/*metaangaben - von oben gilt per default für listitem und detail*/
/*.news .footer-detail {
	clear: both;
	padding: 0.5rem 0 0 0;
	border-top: 1px solid #eee;
	margin-top: 15px;
	color: #888;
}
*/
/*p entfernt
.news .footer-detail p {
	line-height: 1em;
}*/


/* --- Footer ist oben ;-) sind die angaben für datum, cat, tag, autor und autor-email ---*/
.footer-detail {
	border-top: 1px solid rgb(232, 233, 234);
	margin-top: 2rem;
	margin-bottom: 2rem;
	background-color: var(--bs-light);
	transition: background-color 0.3s ease-in-out;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
	
.footer-detail:hover {
	background-color: rgb(232, 233, 234);
	transition: background-color 0.3s ease-in-out; 
}

div.news-detail-meta {
	display: inline-block; 
	line-height: 1em;
	/*margin-top: 1rem;
	margin-bottom: 1rem;*/
}

div.news-detail-meta:not(:last-child) {
	padding-right: 0.5em;
	border-right: 1px solid #bbb8b8;
}


/* --- Bilder und Haupttext ---*/

/*flex mit media-query <=md*/
@media (min-width: 769px) {
	.flexbox-text-media { 
		display:flex;
		flex-direction: row-reverse;
		
	}
}
@media (max-width: 768px) {
	.flexbox-text-media { 
		display:flex;
		flex-direction: column-reverse !important;
	}
	
}

/*
@media (min-width: 768px) {
.einviertel   {min-width: 25%; max-width: 25%;}
.eindrittel   {min-width: 33%; max-width: 33%;}
.einhalb      {min-width: 50%; max-width: 50%;}
.zweidrittel  {min-width: 66%; max-width: 66%;}
.dreiviertel  {min-width: 75%; max-width: 75%;}
}

*/




/*wie mit row-col   flex: grow 0 shrink 0 flexbasis*/ 
@media (min-width: 768px) {
.einviertel   {flex: 0 0 25%; }
.eindrittel   {flex: 0 0 33%; }
.einhalb      {flex: 0 0 50%; }
.zweidrittel  {flex: 0 0 66%; }
.dreiviertel  {flex: 0 0 75%; }
}



/* bild zentrieren bei kl. viewports (bs kennt kein text-xxxx-center,nur text-xl-start end)
klasse ggf. noch zum hinweistext in formular*/
@media (max-width: 768px) {
.bildzentriert {text-align: center}
}













/*.medien.flex-row-reverse .haupttext   { margin-right:auto !important;}*/

/* mit mx-auto gelöst
.haupttext.einviertel   {flex: 75%;  }
.haupttext.eindrittel   {flex: 66%; }
.haupttext.einhalb      {flex: 50%; }
.haupttext.zweidrittel  {flex: 33%; }
.haupttext.dreiviertel  {flex: 25%; }
*/





/*--- zughörige news/dateien/links ---*/
.news-detail-zugehoeriges .zugehoerig {
	margin-top: 2.5rem;
	padding-top: 1rem;
	/*padding: 1rem 0 0; 
	
	border-top: 1px solid #eee;
*/
}
.news-detail-zugehoeriges .zugehoerig {
	background-color: rgb(248,249,250); 
	transition: background-color 0.3s ease-in-out;
}
	
.news-detail-zugehoeriges .zugehoerig:hover {
	background-color: #ededed;
	transition: background-color 0.3s ease-in-out; 
}

.news-detail-zugehoeriges .zugehoerig-ueberschrift  {
	font-weight: 300;
	margin-bottom: 0.25rem;
}

/*verhindert überlaufen in nächste spalte bei langen links*/
.news-detail-zugehoeriges .verwandtelinksorfiles {overflow-wrap: anywhere;}


/*--- detail vor zurück --- */
.news-detail-prev-next li:hover {
	background-color : var(--bs-light);
}

.news-detail-prev-next li a{
	text-decoration: none;
	color: var(--bs-secondary);
	border: none !important;
	border-radius:0 !important;	
}


















/* ------------------ news-list-latest (card-optik) ------------------*/
/*news latest card tmpl 101*/ 


/*a la in2code.de*/
  
  /*.........................................................*/	
	.article .news-latest-card {
		transform: scale();
		transition: transform 0.5s ease-in-out;
		}
	.article .news-latest-card:hover {
		transform: scale(1.1);
		transition: transform 0.5s ease-in-out;
		}
  
.news-latest-card .headline { 
color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;

}

.news-latest-card .nl-teaser-text {
	padding-top: 0.5rem;
	background: rgb(191,192,192);
	background: linear-gradient(0deg, rgba(191,192,192,0.5019141445640756) 0%, rgba(61,61,61,0.5215219877013305) 100%);
	/*transform:translate(0px,0%);*/
	transition: transform 1s ease;
	transform:translateY(55%);
	transition: transform 1s ease;

}
	

.news-latest-card:hover .nl-teaser-text {
	transform:translateY(0%);
	transition: transform 1s ease;
}
	
/*ginge auch so
@media (hover) {
	.news-latest-card .nl-teaser-text { 
		transform:translateY(55%);
		transition: transform 1s ease;
	}	


	.news-latest-card:hover .nl-teaser-text {
		transform:translateY(0%);
		transition: transform 1s ease;
	}

}




/* https://www.youtube.com/watch?v=b6iVByCOx8A*/
/*.nl-teaser-text {
	
	display: -webkit-box;
	-webkit-line-clamp: 10;
	-webkit-box-orient: vertical;
}
*/


.news-latest-more a {
	color: white;
	transition: color 1s ease;
	text-decoration: none;
}
	
.news-latest-more:hover a {
	color: red;
	transition: color 1s ease;
}





/*  ------------news mit verschiebe teil ------------ */


.news-shift {
/*	border: 1px solid purple;
	overflow:hidden;

elternelement	
flex-wrap: wrap;*/


	position:relative;
	min-height: 200px;
	min-width: 200px;
	margin-bottom: 2rem;
/*    padding-right: 2rem;
    padding-left: 2rem;*/
}



.news-shift .bgImage {
    background-color: antiquewhite;
    position: relative;
	height: 300px;
	background-size:cover; 
	background-repeat: no-repeat; 
	background-position-x: center;  

}





.news-shift .bgImage .news-text {
    background-color: #ffffff80;
    position: absolute;
    height: 2.5rem;
    width: 100%;
    overflow: hidden;
	/*transform: translate(0rem, -0rem);*/
    transition: height 0.5s ease, background-color 0.5s ease-in-out;
    bottom:0;
	padding-top: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.news-shift .bgImage:hover .news-text {
    background-color: white;
    position: absolute;
    height: 100%;
    transition: height 0.5s ease, background-color 0.5s ease-in-out ;
  
}


/*alterntive zu fluid f:format.crop 
s. https://www.mediaevent.de/css/text-overflow.html*/
.news-shift .clampedtext-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
}

.news-shift .clampedtext-1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; 
}





/*--- newslist text auf bild typ 102 ---*/

.news-text-top  {
	background-color: lightgrey;
	position: relative;
	
}


.news-text-top  .bgImage {
    background-color: antiquewhite;
    position: relative;
	height: 400px;
	background-size:cover; 
	background-repeat: no-repeat; 
	background-position-x: center;  

}

.news-text-top-inner {
	background-color: rgba(255, 255, 255, 0.85) !important;
	font-size: 75%;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 50%;
	bottom: 10%;
	/*overflow: hidden;*/
	z-index: 5;
	

	}
	
.news-text-top-inner::before {
	content:"";
	border: 3px solid green;
	position: absolute;
	top: 0%;
	width: 100%;
	background-color: beige;
	height:100%;
	  transform: skew(0, -22deg);  
	  transform-origin: bottom right;
		z-index: -5;
		
		clip-path: polygon(0 0, 33% 0, 75% 100%, 0% 100%);
}







































/*s w3school   für liste  category*/

 #myUL {
  list-style-type: none;
  color: green;
}

#myUL {
  margin: 0;
  padding: 0;
}

.c-caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.c-caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.c-caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.nested {
  display: none;
}

.active {
  display: block;
}