/* FRONTEND CSS
*********************************************/

html {
	/* scrollbar fix (prevent ugly left pull for lower content sites) */
	overflow-y: scroll;
	width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
h3 a {
  text-decoration: none;
}
.visually-hidden {
	display: none;
}
/* MEDIA QUERIES
*********************************************/

/* Extra small devices (phones, less than 768px) */

header {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr auto;
	grid-template-areas: 
	"inheader"
	"mainmenu";
	height: auto;
	padding-top: 2em;
    background: linear-gradient(45deg,rgba(15, 85, 105, 1) 66%, rgba(82, 183, 193, 1) 100%);
	container: header / inline-size;
}

	
	
	

	/* Slogan in der Kopfzeile */

.inheader {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(2,auto);
	grid-template-areas: 
	"logo"
	"slogan";
	width: 100%;
	place-self: center;
	#logo {
		max-width: 300px;
		grid-area: logo;
		justify-self: end;
	}
	#slogan {
		width: 100%;
		display: grid;
		grid-template-columns: 33cqw 1fr;
		align-items: center;
		margin-block-end: 2em;
		padding-inline: 1em;
		color: white;
		grid-area: slogan;
		justify-self: start;
		align-self: center;
		white-space: nowrap;
		container: slogan / inline-size;
	}
	#slogan h1 {
		line-height: 80%;
		text-transform: uppercase;
		font-size: clamp(1.5rem, 8vw, 4.5rem);
		font-weight: 700;
		color: white;
		margin: 0;
		margin-inline-start: -0.5em;
	}
	#wahlkampflogo {
		text-align: end;
		img {
			margin: 0;
		}
	}
}
@container header (min-width: 960px) {
	.inheader {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-template-rows: repeat(2,1fr);
		grid-template-areas: 
		"slogan slogan logo"
		"slogan slogan logo";
		max-width: var(--max-width);
		place-self: center;
		#logo {
			align-content: start;
		}
		#slogan {
			grid-template-columns: minmax(15cqw, 275px) auto;
			margin-block-end: 0;
		}
		#slogan h1 {
			font-size: clamp(3rem, 4.5vw, 4.5rem);
			margin-inline-start: -0.25em;
		}
	}
}
footer {
	display: flex;
    justify-content: space-between;
}
@media (max-width: 768px) {
	footer {
		flex-direction: column;
		align-items: center;
	}
}
@media (max-width: 568px) {
	#service { 
		flex-direction: column;
		align-items: center;
		li.nav-item.divider {
			transform: rotate(90deg);
		}
		.mod-menu {
			flex-direction: column;
			align-items: center;
		}
	}
}
#wrapper {
	width: 100%;
	margin: 0;
	padding: 0 0.5em;
	margin-block: 1em;
	max-width: var(--max-width);
	justify-self: center;
}

#mainmenu.desktop {
	display: none;
}



/* #slogan h1 p.cdu {
	line-height: 110%;
	margin-bottom: 3px;
}
#slogan h1 p.text {
	line-height: 110%;
	margin-bottom: 3px;
} */

#headerbox {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 7px;
}


#top {
	margin: 0;
}
#top img {
	margin: 0;
}
.date {
	font-size: 0.75em;
	margin-bottom: 0.2em;
	padding: 0 5px;
}
.clearfix, 
.clr {
	clear: both;
}
.servicenavigation, #service {
	margin: 0;
	display: flex;
	font-size: 1rem;
	gap: 0.5em
}
#service ul {
	display: flex;
	flex-direction: row;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
	& li {
		margin: 0;
	}
	& a:hover {
		color: var(--acc);
	}
}

.servicenavigation ul li + li {
	margin-left: 10px;
}

#misc_menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: space-between;
}
#socialmedia {
	display: grid;
	grid-template-columns: 50px 50px;
	gap: 0.5em;
	list-style: none;
	.nav-item {
		width: 100%;
	}
	img {
		width: 100%;
		height: auto;
	}
}
#misc_menu li {
	border: 1px solid var(--nc-lk-tx);
	width: 100%;
	margin: 5px;
	padding: 30px;
	text-align: center;
	font-size: 1.1rem;
	background: linear-gradient(45deg,rgba(15, 85, 105, 1) 66%, rgba(82, 183, 193, 1) 100%);
	container: misc-item / inline-size;
}
#misc_menu li:nth-child(2n) {
	line-break: initial;
}
#misc_menu a {
    text-decoration: none;
    color: var(--light);
    display: grid;
    grid-template-columns: 50px auto;
    justify-items: start;
    align-items: center;
	gap: 1.5em;
}
#misc_menu img {
	margin: 0;
}
.pull-left {
  float: left;
  margin-right: 0.5em;
}
.pull-right {
  float: right;
  margin-left: 0.5em;
}
/*Inhalte*/
.items-leading {
    display: flex;
    align-items: start;
    justify-content: space-between;
	flex-direction: column;
	flex-wrap: wrap;
}
.items-leading > div {
    width: 100%;
}
.item-image {
    width: 100%;
	display: grid;
	overflow: hidden;
	margin-bottom: 5px;
    aspect-ratio: 4 / 3;
}
.item-image img {
	width: 100%;
	object-fit: cover;
    height: 100%;
	margin-bottom: 0;
}
.item-page .item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
    height: fit-content;
}
.items-row {
	display: flex;
	flex-direction: column;
}
.items-row > div {
	width: 100%;
}
/* Social Media Icons */
#socialmedia h3 {
	color: var(--nc-lk-tx);
	text-align: center;
}
#socialmedia_menu {
	display: flex;
	flex-flow: row;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center
}
#socialmedia_menu li {
	width: 10%;
}
#socialmedia_menu li + li {
	margin-left: 20px;
}





/* Mobile Navigation */

/* Button für die Navigation */

#menubutton {
    display: none;
}
#burger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background-color: var(--acc);
    padding: 7px;
    border-radius: 10%;
	box-shadow: 0px 0 2px 0px #000;
    position: fixed;
    top: 10px;
    left: 10px;
    box-sizing: content-box;
    z-index: 999;
}
.balken {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: white;
}
#menubutton:checked + label #balken1 {
    /* transform: translateY(112px) rotate(45deg); */
    /* animation: balken1 forwards; */
    animation: balken1 250ms forwards;
    
}
#menubutton:checked + label #balken2 {
    animation: balken2 250ms forwards;
}
#menubutton:checked + label #balken3 {
    /* transform: translateY(-112px) rotate(-45deg); */
    animation: balken3 250ms forwards;
}
#menubutton:not(:checked) + label #balken1 {
    animation: balken1close 250ms forwards;
}
#menubutton:not(:checked) + label #balken2 {
    animation: balken2close 250ms forwards;
}
#menubutton:not(:checked) + label #balken3 {
    animation: balken3close 250ms forwards;
}
@keyframes balken1 {
    0% {   
        transform: translate(0,0);
    }
    50% {   
        transform: translate(0, var(--abstand1));
    }
    100% {
        transform: translate(0, var(--abstand1)) rotate(45deg) scale(1.4, 1.4);     
        border-radius: 7px;
    } 
    
}
@keyframes balken2 {
    0% {   
        transform: translate(0,0);
    }
    50% {   
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0) rotate(45deg) scale(1.4, 1.4);     
        border-radius: 7px;
    } 
    
}
@keyframes balken3 {
    0% {   
        /* transform: translate(0, 0); */
    }
    50% {   
        transform: translate(0, var(--abstand2));
    }
    100% {    
        transform: translate(0, var(--abstand2)) rotate(-45deg) scale(1.4, 1.4);
        border-radius: 7px;
    } 
    
}
@keyframes balken1close {
    0% { 
        transform: translate(0, var(--abstand1)) rotate(45deg) scale(1.4, 1.4);     
        border-radius: 7px;  
    }
    50% {   
        transform: translate(0, var(--abstand1));
    }
    100% {
        transform: translate(0,0);
    } 
    
}
@keyframes balken2close {
    0% { 
        transform: translate(0, 0) rotate(45deg) scale(1.4, 1.4);     
        border-radius: 7px;  
    }
    50% {   
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0,0);
    } 
    
}
@keyframes balken3close {
    0% { 
        transform: translate(0, var(--abstand2)) rotate(-45deg) scale(1.4, 1.4);
        border-radius: 7px;  
    }
    50% {   
        transform: translate(0, var(--abstand2));
    }
    100% {    
        transform: translate(0, 0);
    } 
    
}

/* Menu */
#mobilemenu {
	position: absolute;
	height: auto;
	/* min-height: 95%; */
	width: 100%;
	display: grid;
	background-color: var(--main);
	top: 0;
	left: 0;
	transform: translate(0, -110%);
	transition: 750ms ease-in-out;
	transform-origin: left;
	padding: 10px 0 10px 10px;
	z-index: 998;
	box-shadow: 0 5px 10px rgba(0,0,0, 0.3);
	border-radius: 0 0 8px 8px;
	grid-template-rows: 75px auto;
	grid-template-areas: 
			"logo"
			"menu";
	font-family: var(--nc-font-sans);
	li img {
		display: none;
	}
	li img + span.visually-hidden {
		display: inline;
	}
}
#menubutton:checked ~ #mobilemenu {
	transform: translate(0,0);
	transition-delay: 100ms;
	position: fixed;
}
#menulogo {
	grid-area: logo;
	justify-self: end;
	align-self: center;
	width: 45%;
	max-width: 200px;
}
#menulogo img {
	width: 100%;
	margin: 0;
}
#mobilemenu ul {
	color: white;;
	font-size: 1.55rem;
	text-align: center;
	list-style: none;
	padding: 0 0 0 5px;
	grid-area: menu;
}
#mobilemenu ul li {
	margin-bottom: 1.25rem;
}
#mobilemenu li.deeper.parent {
  position: relative;
}
#mobilemenu .mod-menu__sub {
    margin-top: 0.5em;
	li {
		margin-bottom: 0.75em;
	}
}

#mobilemenu li.deeper.parent .nav-header {
    margin-bottom: 0.75em;
    display: inline-block;
    position: relative;
}
#mobilemenu li.deeper.parent .nav-header:before {
  content: url('../images/arrow-down.svg');
  position: absolute;
  width: 1.25rem;
  left: -2rem;
  top: 0;
}
ul.mod-menu__sub.list-unstyled li {
    font-size: 1.25rem;
}

#mobilemenu ul.nav-child {
	margin-top: 1.25rem;
}
#mobilemenu .nav-child li{
	margin-left: 0px;
	margin-top: 0.5rem;
	font-size: 1rem;
	text-transform: none;
	text-transform: none;
	position: relative;
}
/* #mobilemenu .nav-child li::before {
    content: '';
    position: absolute;
    top: -0.6em;
    left: calc(50% - 7px);
    width: 10px;
    border-top: 1px solid;
    height: 0;
} */
#mobilemenu .nav-child li:first-of-type {
	margin-top: 0.55em;
}
#mobilemenu .nav-child li:first-of-type::before {
    display: none;
}
#mobilemenu ul li a {
	text-decoration: none;
	color: white;
}
#mobilemenu h2 {
	color: white;
}
/* #mobilemenu img {
	height: 1.5em;
	margin: 0;
} */
#close {
	position: fixed;
	top: 10px;
	left: 10px;
	display: block;
}
.trenner {
	width: 100%;
}
/* Slogan in der Kopfzeile */
#slogan h1 {
	font-size: clamp(1.0rem, 7.5cqw, 1.85rem);
}
#slogan h1 p.text, #slogan h1 p.cdu {
	line-height: 110%;
	margin-bottom: 0.25rem;
}
/* Inhalt -> com_content */
.blog-items {
	display: grid;
	gap: 0.5rem;
	& a {
		text-decoration: none;
	}
	.item-content {
		padding: 0.5em;
	}
}
.blog-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}
.itemHeader, .itemFullText {
	margin: 0 5px;
}
.itemHeader H2 {
	line-height: 120%;
}

p.img_caption {
    font-size: 0.9em;
}
.readmore {
	display: flex;
    justify-content: end;
}
a.btn {
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    place-self: flex-end;
    padding: 0.4em 0.6em;
    background-color: var(--main);
    border-radius: 0.3em;
    line-height: 100%;
}
/* RSS Reader */

ul.rss {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5em;
}
li.rss_item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}
.rss_item_image_box {
    aspect-ratio: 4/3;
}
img.rss_item_image {
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rss h4 {
    font-size: 1.25rem;
    margin: 0;
    line-height: 120%;
    padding: 0;
}
.rss a {
  text-decoration: none;
}


.newsticker h3 {
	/*font-family: CDUKievitWeb-BoldItalic, sans-serif;*/
	padding: 5px;
}

#service {
	display: flex;
	font-size: 0.9rem;
}
#bottom .menu, 
#service .menu {
	list-style: none;
	display: flex;
	flex-direction: row;
	gap: 5px;
	margin-left: 0;
	padding: 0;
}
#service .menu li {
	margin: 0 0 0 5px;
	padding: 0 0 0 5px;
	position: relative;
}
#service .menu li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	height: 75%;
	width: 0;
	border-left: 1px solid;
}
/* Pagination */

.com-content-category-blog__navigation.w-100 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.com-content-category-blog__pagination {
    width: fit-content;
	.pagination a {
		color: var(--main);
	}
}
.pagination {
    color: var(--main-60);
    font-family: var(--nc-font-sans);
    font-size: 0.85rem;
    list-style: none;
    display: flex;
    gap: 0.3em;
    justify-content: space-between;
}

.pagination li {
	background-color: var(--acc-25);
	border: 1px solid var(--main-25);
	padding: 0.3em 0.5em;
	margin-right: -1px;
}
.pagination li:has(a):hover {
	background-color: var(--acc-60);
}
.pagination li:first-of-type {
	border-radius: 0.3em 0 0 0.3em;
}
.pagination li:last-of-type {
	border-radius: 0 0.3em 0.3em 0;
}
.pagination a {
	text-decoration: none;
	color: var(--light);
}
@media (max-width: 600px) {
	.com-content-category-blog__navigation.w-100 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.com-content-category-blog__pagination {
		width: 100%;
	}
	.pagination__wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.pagination {
		padding: 0;
		font-size: clamp(0.8rem, 10cqw, 0.9rem);
		gap: 0;
		justify-content: space-between;
	}
}
.counter {
    background-color: var(--acc-25);
    border: 1px solid var(--main-25);
    padding: 3px 6px;
	color: var(--main);
	border-radius: 0.3em;
	width: fit-content;
	line-height: 100%;
    padding: 0.5em 0.7em;
    vertical-align: baseline;
    height: fit-content;
}
/* Darstellung der Mandatsträger */

.mandate {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(400px, 1fr));
	gap: 1em;
	justify-content: center;
}
.mandate__text {
	padding-inline: 0.5em;
}
.module.mandatstraeger .mod-articlesnews.newsflash {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2em;
	h4 {
		font-size: 1rem;
	}
	.item-image {
		aspect-ratio: auto!important;
	}
	
}
.moduletable.mandatstraeger  {
    ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 2em;
	}

	h4 {
		font-size: 1rem;
	}
	.mod-articles-item-content {
		font-size: clamp(0.9rem,1cqw,0.97rem);
	}
}

/* Newsdarstellung auf Geräten ab 500px*/
@media (min-width: 500px) {
	.items-row {
		flex-direction: column;
		justify-content: space-between;
	}
	
	.items-row > div {
		width: 100%;
	}
	
	.srfrRow h3 {
		width: 94%;
	}
	
	.blog-items {
		grid-template-columns: 1fr 1fr;
	}
	.mandate {
		grid-template-columns: repeat(auto-fit,350px);
		justify-content: start;
	}
}

/* Newsletteranmeldung */
.acym_module_form label {
    display: flex!important;
    gap: 1em;
    align-items: center;
    input {
      margin: 0;
    }
}

@media (max-width: 400px) {
	.item-page img {
		width: 100%;
		height: auto;
	}
	.mandate {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1em;
	}
}
@media (max-width: 500px) {
	#logo {
		width: 66%;
		margin-bottom: 1em;
	}
}
/* Spezielle Desktopelemenrte auf mobilen Geräten ausschalten */
@media (max-width: 767px) {
	.desktop {
		display: none;
	}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
	#burger {
		display: none;
	}
	.blog-items {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
		dl.article-info.text-muted {
		font-size: 0.85rem;
	}
	.items-leading {
		flex-direction: row;
	}
    .page-header.category-title, 
    h2.rss-feed {
        font-size: 1.2rem;
        color: var(--main);
        text-transform: uppercase;
        font-weight: 600;
    }
	.item-image {
		width: 100%;
		display: block;
		overflow: hidden;
		margin: 0 0 0 5px;
	}
	.item-image img {
		width: 100%;
		object-fit: cover;
		/* height: fit-content; */
	}
	.item-page .item-image {
		width: 50%;
		object-fit: cover;
		height: fit-content;
	}
    .left.item-image {
        float: left;
        margin: 0 0.5em 0.5em 0;
    }
	.items-row {
		flex-direction: row;
		justify-content: space-between;
	}
	
	.items-row.cols-1 > div {
		width: 100%;
	}
	.items-row.cols-2 > div {
		width: 49%;
	}
	.items-row.cols-3 > div {
		width: 32%;
	}
	.items-row.cols-4 > div {
		width: 24%;
	}


	

	#wrapper {
		display: grid;
  		grid-template-columns: 1fr auto;
  		grid-template-rows: auto auto auto auto;
  		grid-template-areas:
    		"mainmenu mainmenu"
    		"user1 user1"
    		"component component"
    		"user2 user2";
	}
	#user1 { grid-area: user1; }
	#component { grid-area: component; }
	#user2 { grid-area: user2; }
	#user3 { grid-area: socialmedia; justify-self: end; }
	#hauptmenu { grid-area: mainmenu; }
	
	
	#grid-container-nav.desktop {
		display: block;
	}
	#hauptmenu {
		margin: 0;
		img {
			margin: 0;
		}
	}
	#hauptmenu .mod-menu {
		max-width: var(--max-width);
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-wrap: nowrap;
		font-family: var(--nc-font-sans);
		font-size: 1.5rem;
		color: white;
		list-style: none;
		margin: 0 auto;
		padding: 0;
	}
	#hauptmenu li {
		position: relative;
		word-wrap: normal;
		white-space: nowrap;
		padding: 0.5em 0.6em;
	}
	#hauptmenu li:not(:has(img)):hover,
	#hauptmenu li.current:not(.default), 
	#hauptmenu li:has(li.current) {
		background-color: var(--light);
		color: var(--main);
		a {
			color: var(--main);
		}
	}
	#hauptmenu li:hover > ul {
		top: 81%;
		left: 33%;
		box-shadow: 0px 2px 6px 0px var(--main-60);
		
	}
	#hauptmenu a {
		text-decoration: none;
		color: white;
		vertical-align: sub;
	}
	#hauptmenu ul.mod-menu__sub {
		position: absolute;
		display: block !important;
		top: -9999px;
		left: -9999px;
		background-color: var(--light);
		color: var(--main);
		z-index: 333;
		/* width: 200px; */
		overflow: visible;
		margin: 0;
		padding: 0;
		word-break: keep-all;
		a {
			color: var(--main);
		}
		& li {
			display: block;
			margin: 0 !important;
			padding: 12px 16px;
			font-size: 0.8em;
		}
		& li:hover {
			background-color: var(--main);
			color: var(--ligh);
			& a {
				color: var(--light);
			}
		}
	}
	
	
	
	#hauptmenu img {
		height: 1.6rem;
	}
	#socialmedia_menu {
		justify-content: flex-end;
	}
	/* #misc_menu {
		display: flex;
		flex-direction: row;
		list-style: none;
		margin: 0;
		padding: 0;
		justify-content: space-between;
	} */
	
	
	
	.servicenavigation ul {
		justify-content: flex-end;
		margin-right: 1em;
	}
	#socialmedia_menu li + li {
		margin-left: 10px;
	}
	#socialmedia h3 {
		display: none;
	}
	.itemImageBlock {
		width: 50%;
		margin: 0 5px 5px 0;
		float: left;
		border: 1px solid #C0C0C0;
		max-height: 320px;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.itemImageBlock img {
		width: 100%;
	}
	#user2 {
		clear: both;
	}
	#openbutton, #closebutton {
		display: none;
	}
	#bottom .menu {
		list-style: none;
		display: flex;
		flex-direction: row;
		gap: 5px;
	}
	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* for higher resolutions (android and retina) */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {
  
}
/* Frontend Editing */

a div[role="tooltip"] {
    display: none;
}
.icons {
    clear: both;
}
.icons a {
    padding: 0.3em 0.5em;
    background-color: var(--acc);
    color: white;
    border-radius: 0.3em;
    margin-bottom: 0.5em;
}