/* WEBFONTS ####################################### */

@font-face {
    font-family:'Gotham Book';
    src: url('fonts/Gotham Book.eot');
	src: url('fonts/Gotham Book.eot?#iefix') format('embedded-opentype'),
		url('fonts/Gotham Book.woff2') format('woff2'),
		url('fonts/Gotham Book.woff') format('woff'),
		url('fonts/Gotham Book.svg#Gotham Black') format('svg');
    font-weight: 450;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Gotham Black';
    src: url('fonts/Gotham Black.eot');
	src: url('fonts/Gotham Black.eot?#iefix') format('embedded-opentype'),
		url('fonts/Gotham Black.woff2') format('woff2'),
		url('fonts/Gotham Black.woff') format('woff'),
		url('fonts/Gotham Black.svg#Gotham Black') format('svg');
    font-weight: 325;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

/* END WEBFONTS ################################### */

/* VARIABLEN ####################################### */

:root {

/* TYPO */

--font-normal: 'Gotham Book';
--font-bold: 'Gotham Black';

--font14: 14px;
--font16: 16px;
--font18: 18px;
--font20: 20px;


/* COLOR */

--transparent: rgba(255,255,255,.8);
--dunkel: #252525;
--disableGrau: #cecece;
--hellgrau: #E9ECEF;
--weiss: #fff;
--hellblau: #66aee6;
--blau: #1A529A;
--gelb: rgb(254, 204, 0);
--navBorder: rgba(80, 80, 80, 0.12);

/* SCHATTEN */

--boxshadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}


/* END VARIABLEN ################################### */

/* GLOBALE KLASSEN & IDs ####################################### */

body {
    font-family: var(--font-normal);
	font-size: var(--font16);
	background-color: var(--hellgrau);
}

body.login-site {
    background-image: url(images/background.jpg);
    background-size: cover;
    background-position: right;
}

h1, h2, h3 {
  line-height: 100%!important;
  font-family: var(--font-bold);
}

.icons {
  display: none;
}

section#sp-udg-logobar {
  background-color: var(--weiss);
  padding: 15px 0;
}

section#sp-udg-logobar .logo{
  text-align: center;
}

section#sp-section-1 {
  margin: 0;
  padding: 0;
}

div.page-header > h1,
h1.ic-header-title {
  font-family: var(--font-bold);
}

#sp-section-1 {
	margin: 20px 0;
}

#sp-breadcrumb {
	padding: 0;
}

.breadcrumb,
.breadcrumb-item.active {
	border-radius: 0;
  font-size: var(--font14);
  background-color: var(--dunkel);
  color: var(--weiss);
}

.breadcrumb a,
#sp-component > div > div.com-content-article.item-page > div.article-info > span.category-name > a {
  color: var(--weiss);
}

#sp-main-body,
.col-lg-9 {
	padding: 0 0 30px 0;
}

.col-lg-12 {
	padding-left: 0;
}

.article-list .article {
	background-color: var(--weiss);
}

#sp-component > div > div.com-content-article.item-page > div.article-full-image.float-left > figcaption {
  background-color: var(--gelb);
  color: var(--dunkel);
  padding: 8px 10px;
  font-size: var(--font14);
}

/* END GLOBALE KLASSEN & IDs ################################### */

/* FOOTER ####################################### */

/* LOGIN SITE */

body.login-site #sp-main-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 89.3vh; /* Damit der Inhalt den gesamten Bildschirm vertikal ausfüllt */
}

body.login-site footer#sp-footer {
    background-color: var(--transparent);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
	text-align: center;
}

#sp-footer .container-inner {
	padding: 10px 0;
}

#sp-footer .container-inner li {
	border-right: 1px solid var(--dunkel);
	padding: 0 10px 0 0;
	margin: 0 0 0 10px!important;
}

#sp-footer .container-inner li:last-child {
	border-right: 0;
	padding: 0;
}

#sp-footer .container-inner li a {
  color: var(--dunkel);
  text-transform: uppercase;
  font-size: var(--font14);
}

#sp-footer .container-inner li a:hover {
  text-decoration: underline;
}

/* END FOOTER ################################### */

/* LOGINSEITE ####################################### */

.com-users-login.login,
.field-entry.UDGlogin {
	padding: 25px;
	color: var(--dunkel);
	border-radius: 6px 6px 0 0;
	background-color: var(--gelb);
	box-shadow: var(--boxshadow);
	max-width: 50%;
    list-style: none;
	position: relative;
	z-index: 900;
    margin: auto;
}

#login-form > div.pretext {
	margin-bottom: 20px;
}

#login-form > div.pretext::before {
	font-family:'Gotham Black';
	content: 'BENUTZERANMELDUNG';
	display: block;
	font-size: 25px;
}

body.login-site .fields-container {
	padding-left: 0;
	margin: 0;
}

body.login-site .input-group-text,
.login .password-group button.input-password-toggle {
	color: var(--weiss);
	background: var(--dunkel);
	border: 0;
	border-radius: 0;
}

body.login-site .form-control {
	border: 0;
	border-radius: 0;
}


body.login-site #login-form > div.userdata > ul,
#form-login-remember,
#sp-component > div > div.com-users-login.login > div,
#com-users-login__form > fieldset > div.com-users-login__remember,
#com-users-login__form > fieldset > div:nth-child(4) {
	display: none;
}

.form-horizontal .controls {
  margin: 0;
}

#login-form > div.userdata > ul {
	margin-top: 10px;
}

body.login-site #login-form > div.userdata > ul > li {
	display: inline;
	margin-right: 15px;
	}

body.login-site #login-form > div.userdata > ul > li a {
	color: var(--dunkel);
	text-decoration: underline;
}

body.login-site .btn.btn-primary {
	padding: 10px;
	border-radius: 0;
	width: 100%;
	display: block;
	color: var(--weiss);
	background-color: var(--dunkel);
	border: 0;
}

body.login-site .btn.btn-primary:hover {
	background: var(--blau);
}

#login-form > ul {
    display: none;
}

/* ZULETZT AKTUALISIERT */

body.login-site #sp-component > div > div.sp-module-content-bottom.clearfix {
	padding: 10px;
	text-align: center;
	color: var(--weiss);
	border-radius: 0 0 6px 6px;
	background-color: var(--dunkel);
	box-shadow: var(--boxshadow);
	max-width: 50%;
    list-style: none;
	position: relative;
	z-index: 0;
    margin: auto;
}

/* END LOGINSEITE ################################### */

/* HEADER ####################################### */

header#sp-header {
	background-color: var(--hellgrau);
  min-height: 80px;
}

.logo-image {
  margin-top: 15px;
}

#sp-menu > div > nav > ul > li:last-child {
	border: 0;
}

#sp-menu > div > nav > ul > li > a {
	text-transform: uppercase;
	font-size: var(--font16);
  line-height: 80px;
}

#sp-menu > div > nav > ul > li:last-child > a {
	padding: 0 15px;
}

#sp-menu > div > nav > ul > li > a:hover,
#sp-menu > div > nav > ul > li.sp-menu-item.current-item.active > a {
	background-color: var(--dunkel);
	color: #fff;
}

/* END HEADER ################################### */

/* SIDEBAR ####################################### */

#sp-left .sp-module, #sp-right .sp-module.loginBereich {
    margin-bottom: 30px;
    border: 0;
    padding: 30px;
    border-radius: 0;
	background-color: var(--gelb);
}

#sp-right {
	padding-right: 0;
}

/* USERABMELDUNG */


body.itemid-114 div.mod-login-logout__login-greeting.login-greeting {
  font-size: var(--font20);
}


#login-form-16 > div.mod-login-logout__login-greeting.login-greeting {
	margin-bottom: 20px;
  text-align: center;
}

#login-form-16 > div.mod-login-logout__button.logout-button > button {
	padding: 10px;
	border-radius: 0;
	width: 100%;
	display: block;
	color: var(--weiss);
	background-color: var(--dunkel);
	border: 0;
}

#sp-left .sp-module, #sp-right .sp-module {
    margin-top: 50px;
    border: 0;
    box-shadow: var(--boxshadow);
    background-color: var(--weiss);
    padding: 30px;
    border-radius: 0;
}

/* END SIDEBAR ################################### */

/* KATEGORIEANSICHTEN ####################################### */

/* Media Query für mobile Geräte */

@media (max-width: 767px) {
  .blog-item {
    display: flex;
    flex-direction: column;
  }

  .article-intro-image {
    /*order: 2;  Ändert die Reihenfolge des Bildes auf Platz 2 (nach dem Text) */
    width: 100%; /* Bild auf volle Container-Breite erweitern */
  }

  .item-content {
    width: 100%; /* Text auf volle Container-Breite erweitern */
  }
}

/* Standard-Styling für größere Bildschirme */

.blog-items.udg__blogEintrag .blog-item, 
.com-content-category-blog__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  border-radius:0;
  box-shadow: var(--boxshadow);
  overflow: hidden;
  margin-bottom: 50px;
  padding: 20px 10px 20px 20px;
  transform: translateX(0px);
  transition: .3s;
  background-color: var(--weiss);
}

.article-intro-image {
  flex: 35%;
}

.item-content {
  flex: 65%;
  padding: 0 15px;
}

/* Wenn .article-intro-image leer ist, .item-content auf 100% setzen */
  .article-intro-image:empty + .item-content {
    flex: 100%;
  }

#sp-component > div > div.blog-featured > div.blog-items.udg__blogEintrag > div > div.item-content > h2 {
  line-height: 70%!important;
}

.blog-items h2 > a,
#sp-component > div > div.blog-featured > div.blog-items.udg__blogEintrag > div > div.item-content > h2 > a {
  font-size: 22px;
  line-height: 130%;
  font-family: var(--font-bold);
  color: var(--dunkel)!important;
  text-decoration: none;
}
.blog-items h2 a:hover,
.item-content h2 a:hover {
  font-size: 22px;
  color: var(--hellblau);
}

.udg__blogEintrag .article-intro-image img {
    width: 100%;
    min-width: 100%;
   /* max-height: 350px;
    height: 350px;
    object-fit: cover;*/
}


.udg__blogEintrag > div > div.item-content > ul > li > a,
.item-content > div > ul > li > a,
.item-content > ul > li > a {
  color: var(--dunkel);
  text-decoration: underline;
}

.udg__blogEintrag > div > div.item-content a:hover,
.item-content > div > ul > li > a:hover,
.item-content > ul > li > a:hover,
.udg__blogEintrag p a:hover  {
  text-decoration: none;
}

a.download,
a.weiterlesenBild,
a.weiterlesenPDF {
  padding: 10px;
  text-decoration: none;
  background-color: var(--dunkel);
  color: var(--weiss);
  font-size: var(--font14);
}

a.download:hover,
a.weiterlesenBild:hover,
a.weiterlesenPDF:hover {
  background: var(--blau);
}

.weiterlesenBild:after {
  content: ' als Bild';
}

.weiterlesenPDF:after {
  content: ' als PDF';
}

#sp-component > div > div.com-content-article.item-page > div.article-info {
  background-color: var(--blau);
  color: var(--weiss);
  padding:10px;
}


/* Link in der Artikelinfo deaktivieren */

div.blog-featured div.blog-items.udg__blogEintrag .article-info > span.category-name > a,
#sp-component > div > div.com-content-article.item-page > div.article-info > span.category-name > a {
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

.udg__blogEintrag .article-info,
.blog-items .article-info {
  background-color: var(--hellgrau);
  color: var(--dunkel);
  padding: 5px;
}

.blog-item a:hover,
.blog-items .article-info a {
  text-decoration: none;
}

.article-info>span+span::before {
  padding: 0 2px 0 5px;
  content: '|';
}

.blog-items .readmore a,
.udg__blogEintrag .readmore a {
  background-color: var(--dunkel);
  color: var(--weiss)!important;
  padding: 10px;
  width: 100%;
  display: block;
}

.blog-items .readmore a:hover,
.udg__blogEintrag .readmore a:hover,
.udg__blogEintrag a.download:hover,
.udg__blogEintrag .weiterlesenBild:hover,
.udg__blogEintrag .weiterlesenPDF:hover {
	background-color: var(--blau);
}


/* END AKTUELLES ARCHIVSEITE ################ */

/* END KATEGORIEANSICHTEN ################################### */



/* EINZELNER BEITRAG ####################################### */

.page-header {
  padding: 0;
}

.page-header h1,
.com-content-article__body {
  padding: 20px;
  background-color: var(--weiss);
  margin-bottom: 0;
}

body.login-site .com-content-article__body {
  padding: 0;
}

/* END EINZELNER BEITRAG ################################### */

/* DROPDOWN NAVIGATION ####################################### */

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  padding: 0;
  background-color: var(--gelb);
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a {
  display: block;
  width: 100%;
  padding: 15px;
  font-size: var(--font16);
  line-height: 120%;
}

#sp-menu > div > nav > ul > li.sp-menu-item.sp-has-child.active > a,
#sp-menu > div > nav > ul > li.sp-menu-item.sp-has-child.active > div > div > ul > li.sp-menu-item.current-item.active > a,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a:hover {
  background-color: var(--dunkel);
  color: var(--weiss);
}

/* END DROPDOWN NAVIGATION ################################### */

/* TABELLEN EVEN/ODD ####################################### */

#sp-component > div > div.com-content-article.item-page > div.com-content-article__body > table {
  width: 100%;
  margin: 20px 0;
}

#sp-component > div > div.com-content-article.item-page > div.com-content-article__body > table > tbody > tr > td {
  padding: 10px;
}

#sp-component > div > div.com-content-article.item-page > div.com-content-article__body > table > tbody > tr:nth-child(odd) {
    background-color: var(--hellgrau);
}

/* END TABELLEN EVEN/ODD ################################### */

/* PHOCA DOWNLOADS ####################################### */

#phoca-dl-category-box > div.pd-category > div.ph-top {
  display: none;
}


#phoca-dl-category-box .pd-category h3.pd-ctitle, #phoca-dl-file-box .pd-file h3.pd-ctitle, #phoca-dl-download-box .pd-file h3.pd-ctitle {
    margin: 0;
    padding: 20px;
    border: 0;
    color: var(--dunkel);
    background-color: var(--gelb);
    margin-bottom: 0;
}

.row.pd-row2-bp {
  display: none;
}

.pd-float {
  line-height: 150%;
}

#phoca-dl-category-box .row {
  margin: 0!important;
  padding: 10px 0;
}

#phoca-dl-category-box .row:nth-child(odd) {
  background-color: var(--weiss);
}

#phoca-dl-category-box .row:nth-child(even) {
  background-color: var(--hellgrau);
}

.pd-button-box-bt a.btn {
  background-color: var(--dunkel);
  color: var(--weiss);
  border-radius: 0;
  border:0;
}

#phoca-dl-category-box > div.pd-category > form {
  background-color: var(--dunkel);
  color: var(-weiss);
  margin-top: 20px;
}

.com_phocadownload .pagination {
  justify-content: center;
}


#phoca-dl-category-box > div.pd-category > form > div > div.pagination.pagination-centered > ul {
  margin: 20px 0!important;
}

.pagination.pagination-centered {
  color: var(--weiss);
  justify-content: space-evenly;
}





h3.ph-subheader.pd-ctitle {
  margin-bottom: 30px!important;
}

.pd__subcategory.sb__editButton {
  display: inline-block;
  width: 33%;
  margin-bottom: 5px;
}

.pd__subcategory.sb__editButton a {
  width: 100%;
  display: block;
  padding: 20px;
  background-color: var(--gelb);
  color: var(--dunkel);
}

.pd__subcategory.sb__editButton a:hover {
  background-color: var(--dunkel);
  color: var(--weiss);
}

/* Handy: Eine Spalte */
@media (max-width: 768px) {
  .pd__subcategory.sb__editButton {
    width: 100%;
  }
}


@media (min-width: 769px) and (max-width: 1399px) {
  .pd__subcategory.sb__editButton {
    width: 49.6%;
  }
}






/* END PHOCA DOWNLOADS ################################### */

/* ICAGENDA ####################################### */

#icagenda-list > div:nth-child(1) > div > h1 {
  padding: 30px;
  background-color: var(--weiss);
}

#icagenda-list > div.ic-list-events.ic-clearfix > div.ic-list-event.ic-clearfix > div.ic-content > div.ic-event-title > div.ic-title-header.ic-margin-0.ic-padding-0 > h2 > a {
  font-family: var(--font-bold);
  color: var(--dunkel);
}

#icagenda-list > div.ic-list-events.ic-clearfix > div.ic-list-event.ic-clearfix > div.ic-content > div.moreinfos.ic-more-info > a {
  padding: 15px;
  color: var(--weiss);
  background-color: var(--dunkel);
  font-size: var(--font16);
}

#icagenda-list > div.ic-list-events.ic-clearfix > div.ic-list-event.ic-clearfix > div.ic-content > div.moreinfos.ic-more-info > a:hover {
  background-color: var(--hellblau);
  color: var(--dunkel);
}

#icagenda-list > div.ic-list-events.ic-clearfix > div.ic-list-event.ic-clearfix > div.ic-content > div.moreinfos.ic-more-info > a:after {
  content: 'ansehen';
}

#icagenda-list > div.ic-list-events.ic-clearfix > div.ic-list-event.ic-clearfix:nth-child(odd) {
  padding: 30px;
  background-color: var(--hellgrau);
}

#icagenda-list > div.ic-list-events.ic-clearfix > div.ic-list-event.ic-clearfix:nth-child(even) {
  padding: 30px;
  background-color: var(--weiss);
}

.ic-info {
  margin: 0;
  padding: 0;
  background: var(--transparent);
  border: 0;
  border-radius: 0;
}

.ic-info .ic-details {
    text-align: left;
    padding: 30px;
    margin: 0;
    color: var(--weiss);
    background-color: var(--dunkel);
}

.ic-full-description {
  padding: 15px 30px;
}

#ic-detail-desc > div.ic-full-description > p > a {
  color: var(--dunkel);
  text-decoration: underline;
}

#ic-detail-desc > div.ic-full-description > p > a:hover {
  text-decoration: none;
}

.ic-detail-desc {
  margin: 0;
  padding: 0;
}

.ic-back {
  display: none;
}

.ic-event-header {
    font-family: var(--font-bold);
    border: 0;
    margin-bottom: 0;
    background: var(--transparent);
    border-radius: 0;
    padding: 30px;
}

#icagenda > div.event-header.ic-event-header.ic-clearfix > div.title-cat.ic-title-cat.ic-float-right.ic-details-cat {
  font-family: var(--font-normal);
}

.ic-short-description {
    font-weight: bold;
    margin: 15px 30px 0 30px;
    font-size: var(--font20);
}

.ic-info-box-header {
  background: var(--dunkel);
  border-radius: 0;
  text-align: left;
  padding-left:30px;
}

#ic-detail-desc > div.ic-info-box > div.ic-info-box-content.ic-divTable.ic-align-left.ic-clearfix {
  background: var(--gelb);
  margin: 0;
  padding: 0 25px;
}

.ic-divCell {
  padding: 0;
}

#ic-detail-desc > p,
#ic-detail-map > br,
#detail-date-list > br {
  display: none;
  }

#ic-detail-map > h3,
#detail-date-list > h3 {
  font-family: var(--font-bold);
  color: var(--dunkel);
  background: var(--weiss);
  padding: 30px;
  margin: 0;
}

.datesList {
  background: var(--gelb);
  padding: 30px;
}

.ic-map-wrapper {
  border-radius: 0;
}


/* KALENDERMODULE */

#ictip {
    font-family: var(--font-normal)!important;
    box-shadow: var(--boxshadow);
    text-align: left;
    width: auto;
    min-width: 350px;
    border-radius: 0;
    z-index: 10000;
    max-height: 100%;
    overflow-y: auto;
}

/* END IGAGENDA ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

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

@media only screen and (min-width: 992px) and (max-width: 1399px) {

#sp-menu > div > nav > ul > li > a,
#sp-menu > div > nav > ul > li:last-child > a {
  font-size: var(--font14);
  padding: 0 10px;
}

.logo-image {
    max-height: 35px;
}

#phoca-dl-category-box > div.pd-category > form {
  background-color: var(--hellgrau);
}


  .counter.pull-right {
    padding: 10px 0;
    color: var(--dunkel);
  }

.disabled>.page-link, .page-link.disabled {
    color: var(--disableGrau);
    pointer-events: none;
    background-color: var(--hellgrau);
    border-color: var(--disableGrau);
}

.com_phocadownload .form-select {
  margin: auto;
}

ul.pagination.ms-0.mb-4 li.active.page-item a { 
  background-color: var(--gelb);
  border-color: var(--gelb);
  color: var(--dunkel);
}

#sp-component > div > div:nth-child(4) {
  text-align: center!important;
}

#phoca-dl-category-box > div.pd-category > form > div > div.pagination.pagination-centered > nav {
  margin-top: 20px;
}

}

@media only screen and (max-width: 991px) {
/*@media (769px <= width <= 991px) {*/

/* NAVIGATION im Protraitview */

#offcanvas-toggler {
    background-color: var(--dunkel);
    transform: translateY(-25%);
    top: 29%;
    width: 49px;
    height: 49px;
    margin-top: 26px;
    margin-left: 0!important;
}

#offcanvas-toggler:hover {
    background-color: var(--dunkel);
}

.burger-icon {
    width: 25px;
    cursor: pointer;
    top: 12px;
    position: absolute;
    left: 13px;
}




body.ltr .close-offcanvas {
    width: 49px;
    height: 49px;
    background-color: var(--gelb);
}

.offcanvas-active .burger-icon>span {
    background-color: var(--var(--dunkel));
}

#offcanvas-toggler > div > span,
#offcanvas-toggler.active .burger-icon>span {
    background-color: var(--weiss);
}

#offcanvas-toggler > div > span:nth-child(2) {
    max-width: 100%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(2) {
    max-width: 70%;
    transition: .3s;
}

#offcanvas-toggler > div > span:nth-child(3) {
    max-width: 70%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(3) {
    max-width: 50%;
    transition: .3s;
}

.offcanvas-menu {
    background-color: var(--dunkel);
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a, 
.offcanvas-menu .offcanvas-inner ul.menu>li>span {
    color: #fff!important;
    opacity: 1!important;
    text-transform: uppercase;
    padding-bottom: 15px;
    font-size: var(--font20);
    text-decoration: none;
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
  color: var(--weiss);
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent.menu-parent-open>a>.menu-toggler:after,
.offcanvas-menu ul.menu li.active.menu-deeper.menu-parent a {
  color: var(--gelb);
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a,
body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li.current.active > a {
  color: var(--gelb)!important;
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.menu-deeper.menu-parent.menu-parent-open > ul > li > a,
body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li > a {
  padding: 10px;
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--gelb);
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li.current.active a {
  background-color: var(--gelb);
  color: var(--dunkel)!important;

}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li > a {
  color: var(--weiss)!important;
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.menu-deeper.menu-parent.menu-parent-open > ul > li > a {
  color: var(--weiss);
}

section#sp-udg-logobar {
  background-color: var(--weiss);
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.current.active > a {
  color: var(--gelb)!important;
}

body > div.offcanvas-menu.border-menu > div.d-flex.align-items-center.p-3.pt-4 > div > a > img.logo-image-phone.d-inline-block.d-lg-none.ls-is-cached.lazyloaded {
  display: none!important;
}

/* PHOCA DOWNLOAD */


  /* Die Breite auf 100% setzen, damit die Elemente vollständig angezeigt werden */

#phoca-dl-category-box > div.pd-category > form {
  background-color: var(--hellgrau);
}

  .counter.pull-right,
  .pagination-centered {
    text-align: center;
    max-width: 100%;
    display: flow-root;
  }

  .counter.pull-right {
    padding: 10px 0;
    color: var(--dunkel);
  }

.disabled>.page-link, .page-link.disabled {
    color: var(--disableGrau);
    pointer-events: none;
    background-color: var(--hellgrau);
    border-color: var(--disableGrau);
}

.com_phocadownload .form-select {
  margin: auto;
}

ul.pagination.ms-0.mb-4 li.active.page-item a { 
  background-color: var(--gelb);
  border-color: var(--gelb);
  color: var(--dunkel);
}

#sp-component > div > div:nth-child(4) {
  text-align: center!important;
}

}

@media (300px <= width <= 768px) {

/* NAVIGATION */


#offcanvas-toggler {
    background-color: var(--dunkel);
    transform: translateY(-25%);
    top: 29%;
    width: 49px;
    height: 49px;
    margin-top: 26px;
    margin-left: 0!important;
}

#offcanvas-toggler:hover {
    background-color: var(--dunkel);
}

.burger-icon {
    width: 25px;
    cursor: pointer;
    top: 12px;
    position: absolute;
    left: 13px;
}




body.ltr .close-offcanvas {
    width: 49px;
    height: 49px;
    background-color: var(--gelb);
}

.offcanvas-active .burger-icon>span {
    background-color: var(--var(--dunkel));
}

#offcanvas-toggler > div > span,
#offcanvas-toggler.active .burger-icon>span {
    background-color: var(--weiss);
}

#offcanvas-toggler > div > span:nth-child(2) {
    max-width: 100%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(2) {
    max-width: 70%;
    transition: .3s;
}

#offcanvas-toggler > div > span:nth-child(3) {
    max-width: 70%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(3) {
    max-width: 50%;
    transition: .3s;
}

.offcanvas-menu {
    background-color: var(--dunkel);
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a, 
.offcanvas-menu .offcanvas-inner ul.menu>li>span {
    color: #fff!important;
    opacity: 1!important;
    text-transform: uppercase;
    padding-bottom: 15px;
    font-size: var(--font20);
    text-decoration: none;
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
  color: var(--weiss);
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent.menu-parent-open>a>.menu-toggler:after,
.offcanvas-menu ul.menu li.active.menu-deeper.menu-parent a {
  color: var(--gelb);
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a,
body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li.current.active > a {
  color: var(--gelb)!important;
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.menu-deeper.menu-parent.menu-parent-open > ul > li > a,
body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li > a {
  padding: 10px;
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--gelb);
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li.current.active a {
  background-color: var(--gelb);
  color: var(--dunkel)!important;

}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.active.menu-deeper.menu-parent.menu-parent-open > ul > li > a {
  color: var(--weiss)!important;
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.menu-deeper.menu-parent.menu-parent-open > ul > li > a {
  color: var(--weiss);
}

section#sp-udg-logobar {
  background-color: var(--weiss);
}

body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.current.active > a {
  color: var(--gelb)!important;
}

body > div.offcanvas-menu.border-menu > div.d-flex.align-items-center.p-3.pt-4 > div > a > img.logo-image-phone.d-inline-block.d-lg-none.ls-is-cached.lazyloaded {
  display: none!important;
}


/* LOGIN */

.com-users-login.login,
.field-entry.UDGlogin,
body.login-site #sp-component > div > div.sp-module-content-bottom.clearfix {
  max-width: 90%;
}

#login-form > div.pretext::before {
  font-size: var(--font20);
}

.pretext.mb-2 {
  font-size: var(--font16);
}

.blog-items.udg__blogEintrag .blog-item, 
.com-content-category-blog__item {
  padding: 20px 20px 20px 20px;
}

.article-intro-image {
  margin-bottom: 20px;
}

#phoca-dl-category-box .row {
  padding: 20px 0;
}

.pd-float {
  line-height: 130%;
}

.pd-float a {
  color: var(--dunkel);
}

.pd-button-box-bt a.btn {
  display: block;
  width: 100%;
  background-color: var(--dunkel);
  border: 0;
  border-radius: 0;
}

/* Zentriere die Elemente */
  #phoca-dl-category-box > div.pd-category > form {
    background-color: var(--hellgrau);
    margin: 0!important
  }
  
  /* Die Breite auf 100% setzen, damit die Elemente vollständig angezeigt werden */
  .counter.pull-right,
  .pagination-centered {
    text-align: center;
    max-width: 100%;
    display: flow-root;
  }

  .counter.pull-right {
    padding: 10px 0;
    color: var(--dunkel);
  }

.disabled>.page-link, .page-link.disabled {
    color: var(--disableGrau);
    pointer-events: none;
    background-color: var(--hellgrau);
    border-color: var(--disableGrau);
}

.com_phocadownload .form-select {
  margin: auto;
}

ul.pagination.ms-0.mb-4 li.active.page-item a { 
  background-color: var(--gelb);
  border-color: var(--gelb);
  color: var(--dunkel);
}

#sp-component > div > div:nth-child(4) {
  text-align: center!important;
}

}

/* END GLOBAL ################################### */