/* PHPWCMS Spezifische Einstellungen    --------------------------------------------------------*/
/* Button   ------------------------------------------------------------------------------------*/
.line   	{margin-bottom: 10px; border-color: rgba(0,0,0,0.4); }
.link 		{padding: 5px 10px 5px 10px;margin-top: 5px; margin-left: 0;margin-bottom: 5px;}
.link-back	{z-index:-1}
.linklist 	{margin-left: 5px;}
.border 	{width: 100%; border: 2px solid red;}
/* benötigt, wenn abstand spaceBeforeCP oben unten nicht geht vllt ab 1.9.2. nicht mehr --------*/
.link-top{ visibility:hidden;} 
.spaceBeforeCP {clear:both;} div.spaceAfterCP {clear:both;} 

pre {
    height: auto;
    max-height: 350px;
    padding: 15px 15px 15px 15px;
	white-space:pre-line;
	overflow: scroll;
	background-color: rgba(255,255,255,.7);
	border: 1px solid  rgba(0,0,0,0.2);
	font-size: 0.9rem;
	border-radius: var(--border-radius, 4px);
}

/* macht Scroollbar sichtbar --------*/
pre::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 8px;
	background-color: rgba(255,255,255,.2);
}

pre::-webkit-scrollbar-thumb {
	border-radius: var(--border-radius, 4px);
	background-color: rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.7);
	box-shadow: 0 0 1px rgba(255,255,255,.7);
}

.panel{
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: brown;
	box-shadow: 4px -4px 4px rgba(0,0,0,0.2);
	margin-left: -102%;
	z-index:2;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}

.panel:target{
	margin-left: 0%;
	background-color: #b1e583;
}

/* Suche  ---------------------------------------------------------------------------------------*/

.search-item {
	margin-top: 15px;
	margin-bottom: 10px;
	border-radius: var(--border-radius, 6px);
}
.search-item .highlight{
	font-style: normal;
	font-weight: 700;
}

.kein_ergebnis {
    display: flex;
    align-items: center; 
    gap: 0.7em; 
	padding: 15px 10px 10px 10px;
	background-color: rgba(216, 0, 0, 0.35);
	border-radius: var(--border-radius, 6px);
}

.kein_ergebnis:before {
    content: "🤔";
    font-size: 2.5em;
    line-height: 1; 
}

.kein_ergebnis {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: 1.2em;
}



/* Ende Suche  -----------------------------------------------------------------------------------*/
.tab-content img {
	float:left;
    margin-right: 15px;
    margin-bottom: 5px;
    max-width: 100%;
	vertical-align: top;
	border-radius: var(--border-radius-images, 6px);
}
.tabpanel p{
	float:left;
}

/* Sitemap PHPWCMS Spezifisch---------------------------------------------------------------------*/
/*Sitemap Hintergrund*/
.sitemap{
	padding: 20px 20px;
    border-radius: var(--border-radius, 6px);
	background-color: rgba(255,255,255,0.2);
	margin-bottom: 20px;
}

.sitemap.artikel-rahmen {
	padding: 20px;
}

.sitemap .sitemap {
	background-color: rgba(204,204,204,0.0);
	border: 0 solid transparent;
}

.sitemap ul{
    margin-top: 0;
    margin-bottom: 0;
}

.sitemap>li{
	margin-left: 30px;
	list-style:  circle;
}
.sitemap ul li{
	margin-left: 0;
	list-style:  circle;
}

.search-listing {
	margin-top: 15px;
}

/* ENDE Sitemap ----------------------------------------------------------------------------------*/
/*- Standard ------------------------------------------------------------------------------------ */

.news-pagination{ margin-bottom: 10px;}

.newsEntry{
	display: block;
    width: 100%;
    height: auto;
	margin-bottom: 4px;
}

.newsEntry img{
	margin-left: 0;
	margin-bottom: 14px;
}

/* - verhindert die Anzeige der Bildergalerie bereits im Teaser */
.newsEntry .image-gallery {
    display: none;
}

.copyright{display: none;}

.news{
	display: inline-block;
    width: 100%;
    height: auto;
	padding: 10px 20px 10px 20px;
	margin-bottom: 10px;
	background: var(--artikel-bg);
    border-radius: var(--border-radius, 6px);
  	border: 1px solid rgba(0, 0, 0, 0.08);

	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
    backdrop-filter: blur(var(--blur-effekt, 5px));
}

.news-content[class*="col-"], .news-pagination[class*="col-"] {
	padding: 0;
}

.news-meta {
  font-size: 0.8rem;
  color: black;
  text-align: right;
  padding-bottom: 0;
  margin-top: 0;
}

.right-container p.news-author, .left-container p.news-author {
  font-size: 0.8rem;
  margin-bottom: 6px;
}


.news-tag{
    font-size: 0.85em !important;
	font-weight: bold;
	padding: 0.30rem 10px 0.24rem 0;

	margin-bottom: 0;
    white-space: nowrap;
    border: 1px solid #ffffff00;
    border-radius: var(--bs-border-radius-sm, 4px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.news-teaser-right {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1px;
	padding: 15px 15px 10px 15px;
	overflow: hidden;
	background: var(--artikel-bg);
	border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--border-radius, 6px);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
}

p.newsEntry-topic{
	font-size: 0.85em;
	text-align: right;
	margin-bottom: 0;
}

.news-card-01-title-wrapper h2{
    font-size: 1.5em;
}

.news-teaser-right > h3 {
	white-space: nowrap;
	padding-right: 10px;
	overflow: hidden;
	text-overflow: ellipsis;   
  }

#content .news-teaser-right > h1, #content .news-teaser-right > h2 , #content .news-teaser-right > h3{
  	margin-top: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;  
}

#content .news-teaser-right > h1, #content .news-teaser-right > h2 , #content .news-teaser-right > h3{
	font-weight: bold;
}

.horizontal .news-teaser-right h3{
   font-size: 1.2rem;
}

.news-item h2, .news-item h3 {
  	margin-top: 0;
	font-size: 1.2em;
	text-align: left;
}

.news-teaser-right img{
	width: 100%;
	max-width: 100%;
	height: auto;
}

.news-teaser-right-image{
	display: inline-block;
	width: 30%;
	overflow: hidden;
}

.news-teaser-right-content{
	display: inline-block;
}

.news-image {
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--border-color-images);
	border-radius: var(--border-radius-images, 6px);
}

.news-image img{
	width: 100%;
	height: auto;
}

.news-image p{
	font-size: 0.8rem;
	padding: 2px 5px 0px 5px;
	margin: 0;
}

.news-content p{
	margin: 0;
	padding: 0 0 10px 0;
}

.news .link {
    clear: both;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.news .link > * {
    order: 2;
    float: none !important; 
    margin: 0;
}

.news .link > a:last-of-type {
    order: 1;
    flex: 0 0 auto;      
    white-space: nowrap;
}

.news-detail-bilder-anzeigen {
  display: var(--news-detail-bilder, inline-block);
} 


/*- Newsletter ---------------------------------------------------------------------------------- */
.articleText {margin: 0 auto; padding: 10px 0 15px 10px; border: 1px solid blue;}

#newsletterSubscribeForm {
	margin: 0 auto;
	padding: 15px 0 15px 10px; border: 1px solid blue;
}

#newsletterSubscribeForm td{
	padding-bottom: 5px;
	}
#newsletterSubscribeForm .formLabel{
	padding: 0;
	margin: 0;
}

/*- News - File Entry --------------------------------------------------------------------------- */
.fileEntry h2{
	font-size: 1.2em;
	margin		: 0;
	padding-top: 0;
}
.fileEntry p{
	float: left;
	padding: 0 3px 4px 0;
	font-size: 0.85em;
}

.fileEntry a{
	display: inline-block;
	width: 100%;
	font-size: 0.85em;
	padding: 4px 0;
	}

.fileEntry-bildunterzeile {
	text-transform:uppercase;
	padding: 3px 3px 0 3px;
	font-size: 0.85em;
	color: blue;
}

.fileEntry{
	float: left;
	width: 19.80%;
	margin: 1px 0.1% 48px 0.1%;
	padding: 0 10px 0 10px;
	opacity: 0.8;
    border-radius: var(--border-radius, 6px);
	border: 1px solid #ccc;
}

@media(max-width:1024px) { 
	.fileEntry{
		width: 24.80%;
	}
}

@media(max-width:768px) { 
	.fileEntry{
		width: 32.80%;
	}
}

@media(max-width:480px) { 
	.fileEntry{
		width: 49.80%;
	}
}

.right-container .fileEntry, .left-container .fileEntry{
	width: 99.80%;
}

/*- Bilder fileEntry ---------------------------------------------------------------------------- */
.fileEntry-download-images{ 
	display: block;
	overflow: hidden;
	text-align:center;
	border: 1px solid #ccc;
	margin-bottom: 15px;
	}
	
.fileEntry-download-images img{ 
	width: auto;
	max-width:  100%;
	height: 	100%;
	}

.fileEntryDiscription{
	max-width: 100%;
	display: inline-block;
	}
	
@media screen and (device-aspect-ratio: 40/71) and (orientation : landscape) { /* Mobilgerät Iphone */
	.fileEntry{
		width: 49.80%;
	}
	.abstand-navbar{
		padding-top: 52px;	
	}
}

@media screen and (device-aspect-ratio: 40/71) and (orientation : portrait) { /* Mobilgerät Iphone */
	.fileEntry{
		width: 99.80%;
	}
	.abstand-navbar{
		padding-top: 52px;	
	}
}
/*-News Ende ------------------------------------------------------------------------------------ */
hr{
  width: 100%;
  box-sizing: content-box;
  overflow: auto;
  border-color: var(--border-color, #00000030);
  margin: 10px 0;
}
/*- RSS Feed Standard --------------------------------------------------------------------------- */
.feed{
	text-align: justify;
	margin-top: 30px;
}

.feed h2{
	font-size: 1.5rem;
	color: brown;
}
.feed hr {
	display: none;
}

.feed span img  {
    margin-right: 15px;
    max-width: 400px;
    height: 100px;
}

.feed img {
    float: left;
    margin-right: 15px;
    max-width: 400px;
    height: auto;
}

.feed span{
	margin-right: 1%;
}

.feed li{
	display: inline-block;
    width: 100%;
	height: auto;

	list-style: none;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 10px 20px;
	background: rgba(30, 63, 83,0.09);
	border: 1px solid rgba(128,128,128, 0.1);
    border-radius: var(--border-radius, 6px);
	-webkit-backdrop-filter: blur(var(--blur-effekt));
    backdrop-filter: 	     blur(var(--blur-effekt));
}	

.feed ul {
	padding-left: 0;
}

.feed ul li ul li{
	border: 1px solid transparent;
	margin-bottom: 0;
	padding: 0;
}

.feed ul li img{
	display: inline-block;
	width: 250px;
    height: 150px;
	margin-right: 20px;
	margin-bottom: 20px;
    border: 1px solid black;
	border-radius: var(--border-radius, 6px);
}


.feed img, .feed span img{
	margin-bottom: 15px; 
	margin-right: 10px; 
	max-height: 60px;
}

.feed h3 a{
	font-size: 1.3rem;
	color: black;
}

.feed h3 a:hover{
	color: brown;
}
.feed p{
	padding-left: 0;
	letter-spacing: normal;
	text-align: start;
}

/*- Ende RSS Feed Standdard ------------------------------------------------------------------------------------------ */
/* Formulare ind extra Datei ------------------------------------------------------------------------------------------*/

/* Ende - Formulare ------------------------------------------------------------------------------*/	
/* CSS-Klassen für Frontend-Edit -----------------------------------------------------------------*/
/* Ein und Ausschalten frontend-Edit Links Position fest oben rechts */
#fe-link {
	position: fixed;
	top: 3px;
	right: 10px;
	height: 30px;
	width: 30px;
	color: #FFFFFF;
	padding: 3px;
	border: 2px solid #003300;
	border-radius: var(--border-radius);  
	cursor: pointer;
	z-index: 10000;
}

/* Optik der Frontend-Links allgemein ------------------------------------------------------------*/
a.fe-link{
	width: 30px;
	height: 30px;
	border-radius: var(--border-radius, 4px);
	background-size: 100%;
}
/* Artikel-Inhalt (Contentpart) ----------------------------------------------------------------- */
/* Artikel-Struktur ------------------------------------------------------------------------------*/
a.fe-link.fe-article{	
	border: 2px solid black;
	background-color: white;
	z-index: 1000;
}

a.fe-link.fe-CP{
	border: 2px solid red;
	background-color: yellow;
	z-index: 1000;
}
/*- Menü-Struktur --------------------------------------------------------------------------------*/
a.fe-link.fe-structure{
	border: 2px solid red;
	z-index: 1000;
	}
/*- Artikel-Basis-Information Article-Summary ----------------------------------------------------*/
a.fe-link.fe-summary{
	border: 2px solid blue;
	z-index: 1000;
}

a.fe-link.fe-news{
	min-width: 30px;
		min-height: 30px;
	border: 2px solid black;
	background-color: white;
	}

/* verhindern Anzeige Indicator & Controls in Standard-Template images.tmpl bzw. formatiert diese */
.indicators, .controls{
	display:none;
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	}
	
.indicators li, .controls a{
	display: inline-block;
	padding: 5px 10px 5px 10px;
	border: 1px solid grey;
	border-radius: var(--border-radius, 4px);
	}
/* -------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */
.fe-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width:80%;
	padding: 4% 14% 4% 14%;

	background-color:  #ffffff40;

	border-radius: var(--border-radius, 4px);
	border: 1px solid rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
	animation: bg-animation 24s infinite;
}