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

html {
	/* scrollbar fix (prevent ugly left pull for lower content sites) */
	overflow-y: scroll;
	width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {

}



/* MEDIA QUERIES
*********************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query -> mobile first strategy */

#wrapper {
	width: 100%;
	padding-inline: 0.5em;
}
header {
	
}
.desktop {
	display: none;
}
#headerbox {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#slogan {
	padding-left: 20px;
	margin-top: 0;
}
#slogan h1 p.text, 
#slogan h1 p.cdu {
	line-height: 100%;
	font-size: 1.6rem;
	margin-bottom: 0.3rem;
	white-space: nowrap;
}
#slogan h1 {
	margin: 0;
}
#logo {
	margin-top: 30px;
    width: auto;
    display: flex;
    flex-direction: row;
	justify-content: flex-end;
}
#headerbox, 
#wrapper {
	max-width: 860px;
	margin: 0 auto 8px auto;
}
#footbar-orange, 
#headbar-orange {
	background: linear-gradient(90deg, #e65c2e 0%, #f1993a 100%);
	height: 16px;
	width: 100%;
	display: block;
}
#footbar-grey, 
#headbar-grey {
	background-color: #E5E5E5;
	width: 100%;
}
#headbar-orange {
	border-bottom: 8px solid #fff;
}
#footbar-orange {
	border-top: 8px solid #fff;
}
#top {
	margin: 0;
}
#top img {
	margin: 0;
}
.date {
	font-size: 0.75em;
	margin-bottom: 0.2em;
	padding: 0 5px;
}
.clearfix {
	clear: both;
}
.servicenavigation, 
#service {
	margin: 0;
}
#service ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	font-size: 0.85em;
	margin: 0;
	padding: 0;
	justify-content: center;
}
#service ul li {
	margin: 0;
}
#service ul li + li {
	margin-left: 10px;
}
#misc_menu, 
.socialmedia {
	display: flex;
	flex-flow: row wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: space-between;
}
#misc_menu li {
	border: 1px solid var(--nc-lk-tx);
	width: calc(50% - 10px);
	margin: 5px;
	padding: 30px;
	text-align: center;
	font-size: 1em;
}
#misc_menu li:nth-child(2n) {
	line-break: initial;
}
#misc_menu a {
	text-decoration: none;
	color: var(--nc-lk-tx);
	display: flex;
	flex-direction: column;
}
#misc_menu img {
	margin: 0 auto;
	margin-bottom: 1em;
	width: 33%;
}

/* Social Media Icons */
.socialmedia h3 {
	color: var(--nc-lk-tx);
	text-align: center;
}
#socialmedia {
	display: flex;
	flex-flow: row;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center
}
#socialmedia li {
	width: 10%;
}
#socialmedia li + li {
	margin-left: 20px;
}

/* Button für die mobile Navigation */

#openbutton {
	position: fixed;
	top: 24px;
	left: 10px;
    z-index: 18;
}
label.menubutton { 
   display: block;
   background: var(--nc-ac-1); 
   width: 40px; 
   height: 40px; 
   position: relative; 
   margin-left: auto; margin-right: auto;
   border-radius: 4px; 
}
.line { 
   position: absolute; 
   left:5px;
   height: 3px; width: 30px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 8px; }
.line:nth-child(2) { top: 18px; }
.line:nth-child(3) { top: 28px; }

input#hamburger, 
input#hamburger-close {
	display: none;
}
#closebutton {
	position: fixed;
	top: 24px;
	left: 10px;
    z-index: 18;
}
#closebutton .line:nth-child(1) { top: 18px; transform: rotate(45deg); transition: 100ms; }
#closebutton .line:nth-child(2) { top: 18px; display: none; transition: 100ms;}
#closebutton .line:nth-child(3) { top: 18px; transform: rotate(-45deg); transition: 100ms;}



/*+ Mobile Navigation */

#mobilemenu {
	position: fixed;
	background-color: var(--nc-bg-1);
	padding: 70px 10px;
	height: 100%;
	margin-left: -420px;
	top: 0;
	color: var(--nc-tx-2);
	box-shadow: 3px 0 5px grey;
    z-index: 16;
}
#mobilemenu ul {
	color: var(--nc-tx-2);
	font-size: 1.5rem;
	list-style: none;
	padding: 0 0 0 5px;
	margin:  0 0 10px 0;
}
#mobilemenu ul li {
	margin-bottom: 15px;
	text-transform: uppercase;
}
#mobilemenu ul li ul{
	padding-left: 10px;
	margin-top: 15px;
}
#mobilemenu ul li li{
	margin-left: 0px;
	font-size: 0.8em;
}
#mobilemenu ul li a {
	text-decoration: none;
	color: var(--nc-tx-2);;
}
#mobilemenu h2 {
	color: var(--nc-tx-2);;
}
#mobilemenu img {
	height: 1.5em;
	margin: 0;
}
#close {
	position: fixed;
	top: 10px;
	left: 10px;
	display: block;
}
.trenner {
	width: 100%;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    flex-direction: row;
	justify-content: flex-start;
	font-size: 0.9rem;
	margin-left: 5px;
}
.breadcrumb h3 {
    font-size: 0.95rem;
}
ul.breadcrumb {
    display: flex;
    flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
}
.breadcrumb li {
	margin-right: 5px;
}
.breadcrumb a {
	text-decoration: none;
}


/* K2 Style */
h2.itemTitle {
	color: var(--nc-tx-1);
}
.k2ItemsBlock ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	
}
.k2ItemsBlock ul li {
	list-style: none;
	margin: 0;
}
div.catItemImageBlock {
    padding: 0;
    margin: 0;
    display: flex;
	align-items: center;
	height: 300px;
	overflow: hidden;
}
div.catItemImageBlock img{
	width: 100%
}
.k2ItemsBlock h3 {
	margin-top: 0;
}
.k2ItemsBlock h3 a {
	text-decoration: none;
}
.moduleItemDateCreated, 
.catItemDateCreated {
	font-size: 0.9rem;
	padding: 0 5px;
}
.itemHeader, 
.itemFullText {
	margin: 0;
}
.itemHeader H2 {
	line-height: 120%;
}
.itemImageBlock {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.itemFullText {
    padding: 0 5px;
}
div.k2Pagination {
    display: flex;
    justify-content: center;
}
.k2Pagination li {
	display: none;
}
.k2Pagination li.pagination-start, 
.k2Pagination li.pagination-next, 
.k2Pagination li.pagination-prev, 
.k2Pagination li.pagination-end {
	display: block;
}
#k2Container {
    padding: 0 0 1em 0;
}
/* Einspaltige Darstellung für die Artikelübersicht beim Wahlprogramm und den Kandidaten*/

.programm #itemListLeading, 
.kandidaten #itemListLeading {
    display: flex;
    flex-direction: column;
}
.kandidaten div.catItemImageBlock {
	justify-content: center;
	height: auto;
	overflow: visible;
}
.kandidaten .itemContainer.itemContainerLast {
    display: flex;
    justify-content: center;
}

/* Übersicht Mandatsträger: Fraktion, Magistrat, Kreistag */
.mandatstraeger h3 {
	font-size: 1.25em;
}
div#k2Container.itemView.mandatstraeger {
	margin: 0;
	padding: 0;
}
.mandatstraeger .itemBody, 
.mandatstraeger .itemLinks {
	display: none;
}
.mandatstraeger ul {
	flex-wrap: wrap;
}

.mandatstraeger ul li {
	display: grid!important;
	width: 100%;
	grid-template-columns: 40% 60%;
	grid-template-rows: max-content auto auto;
	grid-template-areas:
		"bild name"
		"bild text"
		"bild funktion";
}
.mandatstraeger .moduleItemTitle {
	text-decoration: none;
	font-size: 1.1em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--nc-lk-2);
	color: var(--nc-lk-1);
}
.mandatstraeger .moduleItemIntrotext {
	display: flex!important;
	flex-direction: column;
}
.mandatstraeger .moduleItemImage {
	grid-area: bild;
	margin-right: 5px;
}


/* RSS Reader */

div.srfrContainer ul.srfrList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
	flex-direction: column;
	/* font-family: var(--nc-font-sans); */
}
.srfrImageBox {
    width: 100%;
    height: 170px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.srfrImageBox img {
	height: 170px;
    object-fit: cover;
	width: 100%;
}
div.srfrContainer ul.srfrList li {
	padding: 2px;
}
.newsticker h3 {
	/*font-family: CDUKievitWeb-BoldItalic, sans-serif;*/
	padding: 5px;
}
.moduletable > h3 {
	font-family: var(--nc-font-bold);
	color: var(--nc-tx-3);
}

/* Swiper Navigation */

.swiper-button-prev, 
.swiper-button-next,
.swiper-pagination-bullet-active {
	color: var(--nc-ac-1, var(--nc-ac-1));
	opacity: 0.5;
}
/* Kommende Termine */
.moduletable.termine {
    margin-bottom: 20px;
}


.mod_events_latest_table {
	display: flex;
	flex-direction: column;
}
.mod_events_latest, 
.mod_events_latest_first {
	padding: 5px;
	border: 1px solid var(--nc-lk-tx);
	margin: 5px;
	background-color: var(--nc-bg-2);
}

.mod_events_latest_content {
	line-height: 1.2!important;
    margin-top: 0!important;
    font-size: 1em;
}
.mod_events_latest_content a {
    text-decoration: none;
    color: var(--n-lk-tx);
}
.mod_events_latest_date {
    line-height: 1.2!important;
    margin-top: 0!important;
    font-size: 0.8em;
}
a.ev_link_row:visited, 
a.ev_link_row:link  {
    font-weight: normal;
    font-size: 1.03rem;
    color: var(--nc-lk-1);
    text-decoration: none;
}
/* Cookie Hint */
#redim-cookiehint {
    padding: 7px 5%;
    box-sizing: border-box;
    background-color: #000;
    font-size: 0.8rem;
    opacity: 80%;
}
#redim-cookiehint, 
#redim-cookiehint a {
    color: #ffffff;
}
/* Social Media Button */
.shariff .orientation-horizontal {
    padding: 0 5px;
}
.shariff .orientation-horizontal li .share_text {
	margin-top: -35px;
	text-align: center;
	font-size: 1em;
  	font-family: var(--nc-font-sans);
  	text-indent: -2em;
}
@media (max-width:359px) {
  	.shariff .orientation-horizontal li .share_text {
		display: none;
	}
}

/* Ark Editor Squeezebox Vorgaben */
div#sbox-window {
    height: auto!important;
}
.sbox-content-image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Imagevideo */
div#widget_cke_65 {
    width: 100%;
    text-align: center;
}
.moduletable.video {
  padding: 10px;
}
#imagevideo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
#imagevideo video {
  width: 100%;
}

/* AcyMailing */

.acymailing_module_form tr {
	background: none;
}
.acymailing_module_form td {
    padding-bottom: 5px;
    vertical-align: top;
    text-align: left;
}
.acysubbuttons .button {
    margin-top: 1em;
}
/* Phoca Gallery */
/* 1. Modul */
#phocagallery-module-ri {
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	flex-grow: 1;
}
.pg-cv-box-mod-ri.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.3em;
    clear: both;
	padding: 0;
    padding-bottom: 3px;
    border: none;
    box-shadow: none;
}
.pg-cv-box-mod-ri .phocaname {
	margin-top: 0.5em;
}
.pg-cv-box-mod-ri {
    height: auto;
}
.pg-cv-box-img-mod-ri {
    max-height: none;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
	#wrapper {
		display: grid;
  		grid-template-columns: auto auto;
  		grid-template-rows: auto auto auto auto;
  		gap: 10px 0px;
  		grid-template-areas:
    		"mainmenu socialmedia"
    		"user1 user1"
    		"component component"
			"user2 user2";
		padding: 0 5px;
	}
	#wrapper nav {
		margin-bottom: 0;
		align-self: end;
	}
	#user1 { 
		grid-area: user1; 
		width: 100%; 
		overflow: hidden; 
		margin-top: 1em;
	}
	#component { 
		grid-area: 
		component; 
	}
	#user2 { 
		grid-area: user2; 
	}
	#user3 { 
		grid-area: socialmedia; 
		justify-self: end; 
	}
	#hauptmenu { 
		grid-area: mainmenu; 
	}
	#slogan h1 p.text, 
	#slogan h1 p.cdu {
	line-height: 110%;
	font-size: 2.5rem;
	}
	.moduletable {
		margin-bottom: 20px;
	}
	.moduletable.socialmedia {
		margin-bottom: 3px;
	}
	/* K2 Style */
	#k2Container.startseite {
		margin: 0;
		padding: 0;
		height: 0;
	}
	#itemListLeading, 
	.kandidaten #itemListLeading {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
	#itemListLeading div.itemContainer, 
	#itemlistLeading div.itemCContainer {
		flex: 1;
		padding: 5px;
	}
	#itemListLeading div.itemContainer:first-of-type {
		padding-left: 0;
	}
	#itemListLeading div.itemContainerLast {
		padding-right: 0;
	}
	div.k2ItemsBlock ul li div.moduleItemIntrotext {
    display: block;
    padding: 4px 0;
}
	.k2ItemsBlock ul {
		list-style: none;
		margin: 0;
		padding: 4px 0 !important;
		display: flex;
		flex-direction: row;
		justify-content: space-between;	
	}
	.k2ItemsBlock ul li {
		list-style: none;
		margin: 0;
		width: 33%;
	}
	.k2ItemsBlock ul li + li{
		/* flex: 1; */
		margin-left: 5px;
	}

	
	div.catItemImageBlock {
		height: 170px;
	}
	div#itemListPrimary {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	div.itemContainer {
		width: 33%;
	}
	.itemFullText td {
		width: auto!important;
	}
	.kandidaten div.itemContainer {
		width: 32%;
	}
	.kandidaten .clr {
		display: none;
	}
	/* Mandatsträger: Stadtverordnete, Magistrat, Kreistag */

	.mandatstraeger .k2ItemsBlock ul li {
		width: 45%;
	}

	/* RSS Reader */
	div.srfrContainer ul.srfrList {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
	}
	.desktop {
		display: block;
	}
	#hauptmenu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
	}
	#hauptmenu ul {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		justify-items: flex-start;
		flex-wrap: nowrap;
		font-size: 1.3rem;
		color: #333333;
		text-transform: uppercase;
		list-style: none;
		margin: 0;
		padding: 0;
		line-height: 1.6rem;
	}
	#hauptmenu li {
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		height: 1rem;
		word-break: keep-all;
		white-space: nowrap;
	}
	#hauptmenu li + li {
		margin-left: 10px;
	}
	#hauptmenu li:hover > ul {
		top: 120%;
		left: 0%;
		
	}
	#hauptmenu a {
		text-decoration: none;
		color: var(--nc-lk-tx);
	}
	#hauptmenu a:hover {
		color: var(--nc-lk-2);
	}
	#hauptmenu ul.nav-child {
		position: absolute;
		display: block !important;
		top: -9999px;
		left: -9999px;
		background-color: var(--nc-bg-2);
		z-index: 333;
		/* width: 200px; */
		overflow: visible;
		margin: 0;
		padding: 0;
		word-break: keep-all;
		box-shadow:  4px 4px 10px -4px rgba(51,51,51,0.69); ;
	}
	#hauptmenu ul.nav-child li {
		display: block;
		margin: 0 !important;
		padding: 6px 12px;
		font-size: 0.8em;
		height: auto;
		white-space: nowrap
	}
  	#hauptmenu ul.nav-child li:first-of-type {
		padding-top: 12px;
	}
	#hauptmenu ul.nav-child li:hover {
		background-color: var(--nc-ac-1);
		color: var(--nc-ac-tx);
	}
	#hauptmenu ul.nav-child a:hover, 
	#hauptmenu ul.nav-child li:hover a {
		color: var(--nc-ac-tx);
	}
	#hauptmenu ul.nav-child li a{
		color: var(--nc-lk-tx);
	}
	
	#hauptmenu img {
		height: 1.6rem;
		position: relative;
		top: -5px
    }
    #hauptmenu .item-427 img {
        height: 1.2rem;
        position: relative;
        top: 0px;
    }
	#socialmedia {
		justify-content: flex-end;
	}
	#socialmedia li {
		margin-top: -4px;
		width: 25%;
		height: 1.8rem;
	}
	#socialmedia li + li {
		margin-left: 10px;
	}
	#socialmedia li img {
		max-height: 100px;
	}
	#socialmedia h3 {
		display: none;
	}
	
	#misc_menu {
		display: flex;
		flex-direction: row;
		list-style: none;
		margin: 0;
		padding: 0;
		justify-content: space-between;
	}
	#misc_menu li {
		flex: 1;
	}
	
	
	.servicenavigation ul {
		justify-content: flex-end;
		margin-right: 1em;
	}
	
	.itemImageBlock {
		width: 50%;
		margin: 0 5px 5px 0 !important;
		float: left;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}
	.itemImageBlock img {
		width: 100%;
		margin: 0 5px 5px 0;
	}
	.itemIntroText {
		font-size: 1.03rem;
		font-weight: normal;

	}
	.catItemImageBlock img {
		margin: 0;
	}
	#user2 {
		clear: both;
	}
	#openbutton, 
	#closebutton {
		display: none;
	}

	/* Newsticker Bundesverband */
	.newsticker  a {
		text-decoration: none;
		width: 100%;
	}
	.newsticker ul {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	div.srfrContainer ul.srfrList li {
		padding: 0 4px 0 0;
		flex: 1;
	}
	div.srfrContainer ul.srfrList li + li{
		padding: 0 4px 0 4px;
		float: 1;
	}
	/* Kommende Termine */

	.mod_events_latest_table {
		flex-direction: row;
		justify-content: flex-start;
	}
	.mod_events_latest, 
	.mod_events_latest_first {
		width: 33%;
		margin-right: 5px;
	}
	.mod_events_latest {
	}
  /*Imagevideo*/
  div#widget_cke_65 {
    width: 350%;
}
  #imagevideo {
  flex-direction: row;
  align-items: flex-start
}
  #imagevideo video {
  width: 100%;
}
	
}
@media (min-width: 600px) and (max-width:767px) {
	.kandidaten div#itemListPrimary {
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.kandidaten div.itemContainer {
		width: 30%;
	}
	.kandidaten .clr {
		display: none;
	}
}

/* Medium devices (desktops, 860px and up) */
@media (min-width: 861px) {
	#wrapper {
		padding: 0;
	}
	.k2Pagination li {
		display: block;
	}
	div.itemFullText {
		padding: 0;
	}
	.breadcrumb {
		margin-left: 0px;
	}

}

/* 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) {
  
}