:root{
    --light-grey:#ededed;
	--mid-grey:#dedede;
	--dark-grey:#4b5563;
	
	--green:#2e9e44;
    --yellow:#ffd54a;
    --orange:#ff8a00;
	--red:#c82828;
	--link-color:#c82828;
    --link-underline-padding: .5em;
}

header, header.smaller, #logo, .mod-articles-grid li, .navigation ul a, .menuIcon, .social-icons i {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

ul {
    list-style-type: none;
}


body {
    margin: 0;
	overflow-x:hidden;
    font-family: "Roboto", Arial, sans-serif;
	background: #f9f9f9;
}

p {font-size: 18pt;}
dd {margin: 0;}
dd.published {font-size: 13pt;}
.visually-hidden {visibility: hidden;}

.com-content-article__body a, .breadcrumbs a, .contact a {
    position: relative;
    color: var(--link-color);
    display: inline-block;
    text-decoration: none;
}
.com-content-article__body a {padding: 0px var(--link-underline-padding);}
.com-content-article__body a:after, .breadcrumbs a:after, .contact a:after {
    position: absolute;
    left: 0px;
    background-color: var(--link-color);
    content: '';
    display: block;
    height: .1em;
    margin-top: 0px;
    transition: width .5s;
    width: 0;
}
.com-content-article__body a:hover:after, .breadcrumbs a:hover:after, .contact a:hover:after {
    width: 100%;
}

.meteo-warning{
display:flex;
gap:15px;
padding:20px;
border-radius:12px;
margin: 20px;
font-weight: bold;
}

.meteo-warning.orange{
border: 1px solid #e2b5b5;
background: #fff5f5;
}

.container_upper_head .mod-custom {background: url(../images/header_bg2.jpg); height: 135px;}


header{
	width: 100%;
  height: 135px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.09);
}
header.smaller {
  height: 65px;
  background: url(../images/header_bg2.jpg);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.7);
}
#logo{
    height: 70px;
    width: 300px;
    float: LEFT;
    margin-top: 31px;
      background: url("../images/logo.png") no-repeat center;
    background-size: 100% auto;
    }

footer{
    background:url(../images/footer.png) no-repeat center #dedede;
	background-size: contain;
    color:var(--dark-grey);
}

.contact {padding: 0;}
.contact li {line-height: 30px;}
.social-icons{padding:0; list-style: none;}
.social-icons li {display: inline; font-size: 25pt;}
.social-icons a {color: var(--dark-grey); text-decoration: none;}
.social-icons i {padding: 20px; margin-left: 10px;}
.fa-facebook-f:hover {background-color: #3d5b99;color: #fff;}
.fa-instagram:hover {background-image: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);color: #fff;}


/* Datum */ 
.ical-date {
    display: inline-block;
	width: 90px;
	text-align: center;
    margin-right: 15px;
    padding: 5px 18px;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50px;
}

.jugend .ical-date {background: var(--green);}

/* Liste */
.list-group {
    margin: 0;
    padding: 0;
	width: calc(100% - 20px);
    list-style: none;
}

/* Termin */
.list-group-item.head {
	display: inline-flex;
	width: 100%;
    padding: 10px 10px !important;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    margin-bottom: 10px;
}
.list-group-item {
    align-items: center;
    background: #fff;
    transition: .25s;
}

/* Titel */
.ical_summary {
    flex: 1 1 100%;
    font-weight: 700;
    color: #222;
}
.ical_details {
    color: var(--dark-grey);
}

.location {
    display: block;
}

img.map-mask{
	width: 100%;
	mask-image : url(../images/map-mask.png);
    mask: url(../images/map-mask.png);
	mask-size: cover;
	mask-repeat: no-repeat;
	mask-position: center;  
}


.mod_footer {
    padding: 20px 0;
}

.breadcrumbs{
	background-color: var(--light-grey);
}
.breadcrumb {
	padding: 20px 0;
    font-size: 18px;
	list-style: none;
	max-width: 1440px;
    margin: 0 auto;
	line-height: 30px;
    padding-inline: clamp(16px, 3vw, 48px);
}
.breadcrumb > li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	text-shadow: 0 1px 0 #fff;
}

.breadcrumb-item + .breadcrumb-item::before {
	float: left;
	color: var(--dark-grey);
	font: var(--fa-font-solid);
	content:  "\f105"; 
	padding: 0 10px;
	line-height: 30px;
    font-size: 14px;
}

.breadcrumb > .active > span {
	background-color: var(--mid-grey);
	padding: 10px 20px;
    border-radius: 25px;
}


/* Container */
.container_top, .mod_footer, .centered-cards .mod-list, .inner-header {
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: clamp(16px, 3vw, 48px);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: clamp(16px, 3vw, 48px);
}

.latest-items, .footer>.container {
	padding: 20px 10%;
}

.centered-cards {
	padding: 35px 0;
	background: linear-gradient(119deg, #ffffff00, #fff), linear-gradient(256deg, #7de2fc, #b9b6e5);
    /*background: linear-gradient(320deg, #f27121, #e94057, #8a2387);*/
	overflow: hidden;
}

.mod-articles-grid li {
	position: relative;
    padding: 20px;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.mod-articles-grid li:hover {
    top: -5px;
	left: -2px;
	box-shadow: 5px 5px 17px rgba(0, 0, 0, 0.1);
}

h4.mod-articles-title {
    text-align: center;
	font-size: 18pt;
    margin: 0;
    padding-top: 15px;
}
a.mod-articles-link, .article-intro-image h1 {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    text-decoration: none;
}

.card-link {
	position: absolute;
    inset: 0;
    z-index: 10;
    text-indent: -9999px;
}

.latest-img {
    
}

.latest-img img {
	width: 100%;
	max-width: 100%;
    height: 260px;
    object-fit: cover;
	object-position: center;
    display: block;
	image-rendering: auto;
	border-radius: 16px;
	clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);
}


.article-intro-image {
	width: 100vw;
	  position: relative;
	  left: 50%;
	  right: 50%;
	  margin-left: -50vw;
	  margin-right: -50vw;
	height: 300px;
	overflow: hidden;
	z-index: 2;
}

.article-intro-image h1 {
	position: absolute;
    height: 150px;
	bottom: 10px;
	margin: 0;
    left: 50%;
    transform: translate(-50%, 0);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
	
    color: #fff;
	font-size: 27pt;
    font-weight: bold;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	text-transform: uppercase;
	z-index: 3;
}

.article-intro-image::before{
	content:"";
    position:absolute;
    inset:0;
    background-image: var(--intro-image-article-src);
    background-size: cover;
    background-position: center;
    filter: blur(10px) brightness(1.05);
    transform: scale(1.05);
    z-index:0;
}

.article-intro-image::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}


html>body>.boxplusx-container {backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);}
.boxplusx-close {position: fixed; top: 10px; right: 10px;}
#boxplusx_sigplus_1001 .boxplusx-dialog, #boxplusx_sigplus_1001 .boxplusx-detail{background: none!important}




.chronik section {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.chronik .section-title {
	position: sticky;
	top: 90px;
	font-size: 16pt;
	font-weight: bold;
	color: var(--dark-grey);
}

.chronik .section-content {
	display: flex;
	flex-direction: column;
}

.chronik article {
	display: flex;
	gap: 30px;
	width: 100%;
}
	
.chronik aside {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.chronik main {
	padding-bottom: 2rem;
	display: inline-flex;
}

.chronik .dot {
	--size: .5rem;
	width: var(--size);
	height: var(--size);
	margin: calc((1rem - var(--size))/2);
	border-radius: 50%;
	background-color: var(--red);
	flex-grow: 0;
}

.chronik .line {
	flex-grow: 1;
	margin: 8px 0;
	width: 3px;
	background-color: var(--red);
}
.chr-img {position:sticky; top: 90px; max-height: 200px;}

.chronik h3{margin:0;}
.chronik p {font-size: 16px; margin:0;}

form.com-content-category__articles {padding: 35px 0;}
.com-content__filter label.visually-hidden, .com-content-category__pagination label.visually-hidden{visibility: visible;}

table.category td {
    padding: 10px;
}
table.category {
    width: 100%;
}

table.category+table.category{margin-top:2em; border-radius: 3px;border-collapse: collapse;}
table.category td,table.category th{padding:10px 15px}
table.category th{text-align:left;}
table.category tr:nth-child(2n) td{background:#fff}
.cat-list-row0{background-color: var(--light-grey);}
.cat-list-row0:hover, .cat-list-row1:hover{background-color: #ffdada}


/* Container */
.pagenavigation {
    height: 110px;
}

.pagenavigation a {
display: inline-flex; align-items: center; /* vertikal */ justify-content: center;
}

.pagenavigation .visually-hidden {
    position: absolute;
	bottom: calc(100% + 10px);
	background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 10px;
	font-size: 10pt;
	text-align: center;
	font-weight: unset;
}
.pagenavigation .visually-hidden::before{
	content: "";
	position: absolute;
	border-radius: 16px;
	inset: 0;
	background: rgba(40, 40, 40, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: -1;
}
/* Place buttons at opposite ends */
.pagenavigation .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	height: 100px;
    gap: 15px;
}


/* Previous button */
.pagenavigation .previous {
    
}

/* Next button */
.pagenavigation .next {
    
}

/* Hover effect */
.pagenavigation .btn:hover {
    transform: translateY(-2px);
	
}
.pagenavigation a:hover .visually-hidden {
	opacity: 1;
	font-size: 16px;
	visibility: visible;
	width: 250px;
}



.counter{
    margin-bottom:28px;
    color:var(--dark-grey);
    font-size:.95rem;
	text-align: center;
    letter-spacing:.03em;
}

.pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex-wrap:wrap;
}

.com-content-article .pagination a{width: 150px; font-size: 20px; padding: 10px;}
.pagination a{
    width:46px;
    height:46px;

    display:flex;
    justify-content:center;
    align-items:center;

    text-decoration:none;
    color:#4b5563;
    font-weight:600;

    background:#fff;
    border:1px solid var(--light-grey);
    border-radius:14px;

    transition:.25s;
}

.pagination a:hover{
    transform:translateY(-4px);
    background:var(--red);
    color:#fff;
    border-color:var(--light-grey);
    box-shadow:0 10px 24px var(--light-grey);
}

.pagination .active a{
    width:52px;
    color:#fff;
    border:none;
    background:linear-gradient(135deg,#d50000,#ff4747);
    box-shadow:0 12px 30px rgba(213,0,0,.35);
}

.pagination .disabled{
    opacity:.35;
    pointer-events:none;
}

.alert{
	padding: 25px;
	background: url(../images/alert-banner.jpg);
	background-size: cover;
	padding: 30px 0;
	color: #fff;
	text-align:center;
}

.alert i {font-size: 40px;}



@media (max-width: 1290px){
	
#logo {width: 100px;margin:0px; height:65px;}

}

@media (max-width: 1090px){
	
	p {font-size: 18pt;}
	.container_upper_head .mod-custom {height: 92px;}
	.article-intro-image {height: 265px;}
	.article-intro-image h1{font-size: 20pt;}
	
	#showplus_images_headers > .showplusx-slideshow {height: 350px!important;}
	
	.mod-articles-grid li{padding: 15px;}
	.latest-img img {height: 150px;}
    h4.mod-articles-title {font-size: 15px;}
	
	.chronik main {display: block;}
	
	.pagination {padding:0;}
	.pagination a{
        width:40px;
        height:40px;
        border-radius:12px;
        font-size:.9rem;
    }


	.breadcrumb {font-size: 10pt;}
	.social-icons li {float: left;}
	
}