/* ============================== VARIABLES ============================== */
@import 'Variables.css';

/* ============================== ACCORDION ============================== */
@import './Component/Accordion/Accordion.css';
@import './Component/Accordion/AccordionItem.css';
@import './Component/Accordion/AccordionItemText.css';

/* ============================== FORM ============================== */
@import './Component/Form/Form.css';
@import './Component/Form/VhsRegisterForm.css';

/* ============================== DISPLAY OPTIONS AND DISTANCES ============================== */
@import 'DisplayOptions.css';
@import 'Distances.css';

/* ============================== FIGURE ============================== */
figure.neos-alignment-center {
  text-align: center;
}

.Accordion-wrapper figure.neos-alignment-center {
  display: block;
}

figure.neos-alignment-right {
  display: flex;
  justify-content: flex-end;
}

/* ============================== VISIBILITY ============================== */
.d-none {
  display: none !important;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.SkipToMainContent-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}
.SkipToMainContent-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

/* ============================== BREADCRUMB ============================== */
.BreadCrumb {
  display: flex;
  background-color: var(--clr-blue);
}

.BreadCrumb-firstItem {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  color: #ffffff;
}

.BreadCrumb-inner {
  display: flex;
  width: 100%;
  margin-top: 0;
}

@media screen and (width >= 991px) {
  .BreadCrumb-inner {
    width: 100%;
    margin: 0 auto;
  }
}

.BreadCrumb-firstItem {
  margin-right: 25px;
  padding: 25px 0;
}

.BreadCrumb-actual {
  display: flex;
  margin: 0;
}

.BreadCrumb-actual li {
  display: flex;
  align-items: center;
  margin-right: 15px;
  padding: 25px 0;
  font-size: 18px;
  line-height: 18px;
}

.BreadCrumb-actual li a {
  color: #ffffff;
}

.BreadCrumb-actual li.current {
  color: #ffffff;
}

.BreadCrumb-actual li:not(:last-of-type)::after {
  content: url('../Images/BreadCrumb-arrow.svg');
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  margin-left: 10px;
}

@media screen and (max-width: 992px) {
  .BreadCrumb {
    position: relative;
  }

  .BreadCrumb-firstItem::after {
    content: url('../Images/BreadCrumb-arrowDown.svg');
    position: absolute;
    top: 50%;
    right: 15px;
    width: 14.07px;
    height: 12.01px;
    transform: translateY(-70%);
  }

  .BreadCrumb-actual {
    --paddingX: 18px;
    position: absolute;
    z-index: 11;
    top: 68px;
    left: 0;
    display: none;
    flex-direction: column;
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--paddingX));
    margin: 0 auto;
    padding: 0 var(--paddingX);
    background: var(--clr-blue);
  }

  .BreadCrumb-actual li {
    position: relative;
    display: flex;
    margin-top: 0;
    padding: 20px 0;
    padding-inline: 0;
  }

  .BreadCrumb-actual li:first-of-type {
    padding-top: 10px;
  }

  .BreadCrumb-actual li:not(:last-of-type)::after {
    position: absolute;
    top: unset;
    bottom: 0;
    left: 15px;
    margin-top: 0;
    margin-left: 0;
    transform: translateY(50%) rotate(90deg);
  }

  .BreadCrumb-inner .BreadCrumb-actual {
    display: none;
  }

  .BreadCrumb-inner.is-Active .BreadCrumb-actual {
    display: flex;
  }
}

@media screen and (width > 768px) {
  .BreadCrumb-actual {
    --paddingX: 60px;
  }
}

@media screen and (width > 992px) {
  .BreadCrumb-actual {
    --paddingX: 100px;
  }
}

@media screen and (width > 1366px) {
  .BreadCrumb-actual {
    --paddingX: 160px;
  }
}

@media screen and (width >= 1920px) {
  .BreadCrumb-actual li {
    padding-inline: 0;
  }
}

@media screen and (width >= 991px) {
  .BreadCrumb-firstItem::after {
    right: 45px;
  }

  .BreadCrumb-actual li {
    margin: 0 auto;
    padding: 20px 0;
    padding-inline: 0;
  }

  .BreadCrumb-actual li + li {
    padding-left: 15px;
  }

  .BreadCrumb-actual li:not(:last-of-type)::after {
    left: 45px;
  }
}

.BoxHeadline {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 20px;
}

.BoxHeadline p {
  font-weight: 500;
  color: var(--clr-blue);
  font-size: 20px;
}

/* ============================== SECTION ============================== */

.Section {
  padding: 35px 0;
}

.Section .width-60 {
  width: 60%;
  margin: 0 auto;
}

.Section .width-80 {
  width: 80%;
  margin: 0 auto;
}

.Section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.Section-title {
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--clr-blue);
  text-align: center;
}

.Section-subtitle {
  color: #c90044;
  font-style: italic;
  font-weight: 400;
  text-align: center;
}

.Section-imageX {
  width: 21px;
  margin-top: 5px;
}

.Section--highlight {
  padding: 30px 0;
  background: rgba(0, 83, 155, 0.1);
}

.Section--highlightBlue {
  background-color: #00539b1a;
}

@media screen and (max-width: 992px) {
  .Section .width-60 {
    width: 80%;
  }
  .Section .width-80 {
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  .Section-header {
    padding-left: 15px;
    padding-right: 15px;
  }

  .Section .col {
    margin-top: 15px;
  }

  .Section--highlight {
    padding: 30px 0;
  }
  .Section .width-60,
  .Section .width-80 {
    width: 100%;
  }
}

/* ============================== IMAGESECTION ============================== */

.ImageSection {
  position: relative;
  margin: 35px 0;
}

.ImageSection .Image {
  position: relative;
}

.ImageSection-backgroundImage {
  display: block;
  width: 100%;
  background-size: cover;
}

.ImageSection-overlay {
  position: absolute;
  right: 0;
  bottom: 100px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 25px 35px 0 35px;
  max-width: 640px;
}

.ImageSection-overlay .ImageSection-overlayHeadline {
  display: flex;
  align-items: flex-start;
}

.ImageSection-overlayImage {
  margin-right: 15px;
  width: 80px;
}

@media screen and (max-width: 992px) {
  .ImageSection-overlay {
    max-width: inherit;
  }

  .ImageSection-overlayImage {
    width: 60px;
  }
}

@media screen and (max-width: 768px) {
  .ImageSection-overlayImage {
    width: 40px;
  }
}

.ImageSection-overlayText {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .ImageSection-overlayText {
    justify-content: flex-start;
  }
}

.ImageSection-overlayTitle {
  font-size: 1.85rem;
}

.ImageSection-overlaySubtitle {
  font-style: italic;
  font-weight: 400;
  color: #c90044;
}

.ImageSection-overlayButton {
  padding: 20px 30px !important;
  position: absolute;
  right: 10px;
  bottom: 0;
  transform: translateY(50%);
}

@media screen and (max-width: 1360px) {
  .ImageSection .ImageSection-overlay {
    bottom: 50px;
  }
}

@media screen and (max-width: 992px) {
  .ImageSection .Container {
    padding: 0;
  }

  .ImageSection .Container .ImageSection-overlay {
    background: rgba(0, 83, 155, 0.1);
    position: relative;
    bottom: 0;
    margin-top: -6px;
  }

  .ImageSection .Container .ImageSection-overlay .ImageSection-overlayButton {
    transform: inherit;
    bottom: 15px;
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .ImageSection .Container .ImageSection-overlay .ImageSection-overlayButton {
    padding: 10px 15px;
  }
}

@media screen and (max-width: 576px) {
  .ImageSection .Container .ImageSection-overlay .Button,
  .ImageSection .Container .ImageSection-overlay .Button a {
    width: inherit;
  }
}

/* ============================== BANNER ============================== */

.Banner {
  width: 100%;
  height: 100%;
  background-color: #c90044;

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

a.Banner {
  text-decoration: none;
}

a.Banner .Banner-content i {
  text-decoration: none;
}

a.Banner + .row a.Button {
  height: 100%;
}

.Banner-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 20px;
  color: #ffffff;
}

.Banner-content i {
  font-size: 28px;
  margin-right: 10px;
}

/* ============================== HIGHLIGHT BOX ============================== */

.HighlightBox {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 25px 10px;
}

.HighlightBox.HighlightBox--lightblue {
  background: rgba(0, 83, 155, 0.1);
}

.HighlightBox.FlexLayout .neos-contentcollection {
  flex-flow: column;
}

.HighlightBox.NoPadding {
  padding: 0 10px;
}

.HighlightBox div:not(.BUS-Index) a {
  text-decoration: none;
}

.HighlightBox-imageX {
  width: 21px;
  margin-right: 5px;
}

.HighlightBox-title {
  font-weight: 500;
  font-size: 20px;
  color: var(--clr-blue);
}

.HighlightBox-content .neos-contentcollection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================== DECORATEDLIST ============================== */

.DecoratedList {
  position: relative;
  font-size: 18px;
  font-weight: 400;
  color: var(--clr-blue);
  display: flex;
  align-items: center;

  width: 40%;
  margin: 0 auto;
  margin-top: 40px;
  /* padding-left: 50px; */
}

.DecoratedList.centered {
  justify-content: center;
}

.DecoratedList + .DecoratedList {
  margin-top: 30px;
}

/* .DecoratedList::before,
.DecoratedList::after {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
  background-size: cover;
} */

.DecoratedList .starfish,
.DecoratedList .shell {
  display: none;
  margin-right: 10px;
}

.DecoratedList:nth-of-type(even) .starfish {
  display: block;
  /* background-image: url('../Images/starfish.svg'); */
  /* width: 40px; */
  /* height: 40px; */
}

.DecoratedList:nth-of-type(odd) .shell {
  display: block;
  /* background-image: url('../Images/shell.svg'); */
  /* width: 35px; */
  /* height: 32px; */
}

/* .DecoratedList:last-of-type {
  margin-bottom: 70px;
} */

@media screen and (max-width: 768px) {
  .DecoratedList {
    width: 60%;
  }
}

@media screen and (max-width: 576px) {
  .DecoratedList {
    width: 100%;
  }
}

/* ============================== VIDEO ============================== */

.Video {
  padding-top: 35px;
}

.Video-element {
  max-width: 100%;
}

.Video-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.Video-title {
  font-size: 38px;
  font-weight: 500;
  color: var(--clr-blue);
}

.Video-subtitle {
  color: #c90044;
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
}

.Video-imageX {
  width: 21px;
  margin-top: 5px;
}

.Video-wrapper {
  position: relative;
  max-height: 650px;
}

.Video-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 83, 155, 0.4);

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

.Video-overlayButton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 30px 50px;
  color: var(--clr-blue);
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--clr-blue);
}

.Video-overlayButton i {
  font-size: 100px;
  margin-bottom: 10px;
}

/* ============================== DOCUMENTS ============================== */

.Document-wrapper .neos-contentcollection {
  display: flex;
  flex-wrap: wrap;
}

.Document-list {
  display: flex;
  width: 100%;
  background: rgba(0, 83, 155, 0.1);
  border: 3px solid #fff;
  text-decoration: none;
  flex-flow: column;
  padding: 10px;
}

.Document-wrapper.two-columns .Document-list {
  width: 50%;
}

@media screen and (max-width: 768px) {
  .Document-wrapper.two-columns .Document-list {
    width: 100%;
  }
}

.Document-list .Document {
  width: 100%;
}

.Document-list[href$='.pdf']::before,
.Document-list .Document a[href$='.pdf']::before {
  display: none;
}

.Section--highlight .Document-list {
  background: #ffffff;
  border: 3px solid rgba(0, 83, 155, 0.1);
}

.Document {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
}

.Document::after {
  content: '\f1c1';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  width: 65px;
  min-width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--clr-blue);
  color: #ffffff;
  font-size: 36px;
}

.Document-title,
.Document-detail {
  color: #343434;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
}

/* .Document-title {
  word-break: break-all;
} */

.Document-meta {
  display: none;
}

@media screen and (max-width: 992px) {
  .Document-list {
    max-width: inherit;
  }
}

@media screen and (max-width: 768px) {
  .Document-list {
    min-height: auto;
    width: 100%;
    margin-bottom: 0;
    margin-top: 0;
  }
}

/* ============================== DOCUMENT FILTER ============================== */

.DocumentFilter .Filter {
  background: none;
  padding: 0;
}

.DocumentFilter .Filter label {
  color: var(--clr-blue);
  display: block;
  margin-bottom: 5px;
}

.DocumentFilter .Filter form input {
  border: 1px solid var(--clr-blue);
  padding: 10px;
  width: 100%;
}

.DocumentFilter .Filter ul {
  list-style: none;
}

.DocumentFilter .Filter ul li {
  float: left;
  margin-left: 5px;
}

.DocumentFilter .Filter ul li:first-child {
  margin-left: -10px;
}

.DocumentFilter .Filter ul li button {
  border: 0;
  padding: 10px;
  background: rgba(0, 83, 155, 0.3);
  color: #ffffff;
  margin-left: 10px;
}

.DocumentFilter .Filter ul li button.active {
  background: var(--clr-blue);
}

.DocumentFilter .Filter ul li button.active::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Pro';
  margin-right: 10px;
}

.DocumentFilter .Documents {
  border: 1px solid var(--clr-blue);
  padding: 10px 20px;
}

.DocumentFilter .Documents .Document {
  justify-content: flex-start;
  padding: 10px 0;
  border-top: 2px solid rgba(0, 83, 155, 0.3);
}

.DocumentFilter .Documents .Document.first-result {
  border-top: 0;
}

.DocumentFilter .Documents .Document:first-of-type {
  border-top: 0;
}

.DocumentFilter .Documents .Document:after {
  display: none;
}

.DocumentFilter .Documents .Document .Document-type {
  color: var(--clr-blue);
  margin-right: 15px;
}

.DocumentFilter .Documents .Document .Document-type i {
  font-size: 1.2rem;
}

.DocumentFilter .Documents .Document .Document-type i:before {
  font-weight: 100;
}

.DocumentFilter .Documents .Document .Document-name {
  color: var(--clr-blue);
}

.DocumentFilter .Documents .Document .Document-name a[href$='.pdf']::before {
  display: none;
}

.DocumentFilter .Documents.single-result .Document {
  border: 0;
}

/* ============================== LIST ============================== */

.List--checkmarks .List-element {
  position: relative;
  list-style: none;
  padding-left: 20px;
  font-weight: 500;
}

.List--checkmarks .List-element + .List-element {
  margin-top: 20px;
}

.List--checkmarks .List-element::before {
  position: absolute;
  content: '\f00c';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 700;
  font-size: 13px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-blue);
}

.List--bigInfo .List-element {
  position: relative;
  list-style: none;
  padding-left: 60px;
  font-weight: 400;
  font-size: 18px;
}

.List--bigInfo .List-element:first-of-type {
  margin-top: 20px;
}

.List--bigInfo .List-element::before {
  position: absolute;
  content: '\f30f';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  font-size: 56px;
  left: 0;
  top: 0;
  color: var(--clr-blue);
}

/* ============================== CONTACT LIST MAP============================== */
.ContactList {
  border: 3px solid transparent;
}

.ContactList.marked {
  border: 3px solid var(--clr-blue);
}

/* ============================== CONTACT LIST ============================== */

.Contact--list {
  overflow: hidden;
}

.Contact--list .Contact {
  padding-bottom: 15px;
  float: left;
}

.Contact--list .Contact-address {
  display: flex;
  margin: 10px 0;
}

.Contact--list .Contact-address .map {
  margin-right: 10px;
}

.Contact--withoutImage {
  background: rgba(0, 83, 155, 0.1);
  padding: 15px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.Contact--withoutImage .Contact-name {
  color: var(--clr-blue);
  text-transform: inherit;
}

.Contact--withoutImage > .symbol {
  display: flex;
  align-items: center;
  padding: 7px 0;
}

.Contact--withoutImage > .symbol i {
  font-size: 20px;
  color: var(--clr-blue);
}

.Contact--withoutImage > .symbol > div:first-of-type {
  width: 30px;
}

.Contact--withoutImage .Contact-mail {
  text-transform: inherit;
  font-style: inherit;
  font-weight: 100;
}

.Contact--withoutImage .Contact-mail a {
  text-decoration: none;
}

.Contact--withoutImage .Contact-info {
  align-items: flex-start;
  background: rgba(168, 168, 168, 0.2);
  padding: 15px;
  margin: 0 -10px;
}

/* ============================== CONTACT ============================== */

.Contact {
  display: flex;
  flex-flow: column;
  padding-bottom: 30px;
  width: 100%;
}

.Contact .Contact-data {
  border: 3px solid #000;
  background: #fff;
  padding: 15px;
  width: 100%;
}

.Contact .Contact-data > div {
  width: 50%;
  display: inline-flex;
  flex-flow: row;
  margin-top: 0;
}

.Contact .Contact-data > div.Contact-name {
  text-transform: initial;
}

.Contact:nth-of-type(n + 6) {
  margin-top: 30px;
}

.Contact-image {
  width: 100%;
  height: 390px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.Contact-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  height: 70px;
  width: 70px;
  background: var(--clr-blue);
  border: 2px solid #ffffff;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 38px;
  text-decoration: none;
}

.Contact-name {
  color: #213402;
  text-transform: uppercase;
  margin-top: 10px;
  font-weight: 600;
  font-size: 20px;
}

.Contact-department {
  color: var(--clr-secondary);
}

.Contact-phone span {
  margin-right: 5px;
}

.Contact-mail {
  color: #213402;
  text-transform: uppercase;
  margin-top: -2px;
  font-size: 18px;
  font-style: italic;
  text-decoration: none;
}

.Contact.Contact--withImage {
  width: 100%;
}

@media screen and (min-width: 1360px) {
  .Contact:nth-child(5n + 1) {
    margin-left: 0;
  }
}

@media screen and (max-width: 530px) {
  .Contact .Contact-image {
    height: 235px;
  }
}

.Contact-text a {
  color: var(--clr-blue);
  text-decoration: underline;
}

/* ============================== BUTTON ============================== */

.Button {
  display: inline-block;
  margin-bottom: 5px;
  text-decoration: none;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.Button:not(.Button--big) a,
div[data-neos-node-type$='Content.Button'] span {
  display: inline-block;
  font-size: 20px;
  padding: 12px 22px;
}

.Section--highlight .Button a[href$='.pdf']::before {
  background-image: url(../Images/pdf_line.svg);
  content: '';
  height: 20px;
  width: 20px;
  display: inline-flex;
  margin-right: 5px;
}

.Button--fullsize {
  width: 100%;
  height: 100%;
  align-items: center;
  display: inline-flex;
  padding-bottom: 10px;
}

.Button--fullsize a {
  width: 100%;
}

.Button--big {
  padding: 0;
  width: calc(50% - 20px);
  height: 140px;
  display: inline-flex;
  margin: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  background: #ffffff;
  border: 2px solid var(--clr-blue);
  color: var(--clr-blue);
}

.Button--big:nth-of-type(-n + 2) {
  margin-top: 0;
}

.Button--big i {
  color: var(--clr-blue);
  font-size: 65px;
}

.Button--center {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

/* ============================== BUS INDEX ============================== */
.BUS-Overview {
  margin-top: 30px;
}

.BUS-Index {
  display: flex;
  margin: -3px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
}

.BUS-Index a,
.BUS-Index button {
  border: 0;
  height: 50px;
  width: 50px;
  background: var(--clr-blue);
  display: inline-flex;
  justify-content: center;
  margin: 3px;
  align-items: center;
  color: #ffffff;
}

/* .BUS-Index.back-to-overview {
  display: none;
} */

.HighlightBox .BUS-Overview {
  display: none;
}

.HighlightBox .BUS-Index.back-to-overview {
  display: flex;
  margin-top: 15px;
}

.BUS-Index a:last-of-type {
  margin-right: 6px;
}

/* ============================== BUS OVERVIEW ============================== */
.BUS-OverviewFilter-Button {
  align-items: center;
  border: 0;
  background: #365a00;
  color: #ffffff;
  display: inline-flex;
  height: 50px;
  justify-content: center;
  margin: 0 2.5px 5px;
  width: 50px;
}

.BUS-OverviewFilter-Button.active {
  background: var(--clr-secondary);
}

.BUS-OverviewFilter-Button:disabled {
  filter: grayscale(100%);
}

.BUS-OverviewFilter-Button:disabled:hover {
  cursor: not-allowed;
}

.BUS-Overview .BUS-OverviewItem:nth-child(even) {
  background: white;
}

.BUS-Overview .BUS-OverviewItem:nth-child(odd) {
  background: rgba(0, 83, 155, 0.1);
}

.BUS-Overview .BUS-OverviewItem {
  padding: 20px;
}

.BUS-Overview .BUS-OverviewItem {
  display: block;
  position: relative;
  text-decoration: none;
}

.BUS-Overview .BUS-OverviewItem:after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  position: absolute;
  right: 20px;
}

/* ============================== BUS DETAIL ============================== */

.BUS-detailBase .BUS-detailBase-header {
  background: var(--clr-blue);
  margin: 10px 0 0 45px;
  position: relative;
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.BUS-detailBase .BUS-detailBase-header::before {
  background-image: linear-gradient(
    to right,
    rgba(0, 83, 155, 0.1),
    rgba(0, 83, 155, 0.1) 33%,
    rgba(0, 83, 155, 0.3) 33%,
    rgba(0, 83, 155, 0.3) 66%,
    rgba(0, 83, 155, 0.6) 66%
  );
  content: '';
  height: 100%;
  position: absolute;
  width: 45px;
  left: -45px;
}

.BUS-detailBase .BUS-detailBase-header a {
  color: #ffffff;
  position: relative;
  padding-left: 15px;
  text-decoration: none;
}

.BUS-detailBase .BUS-detailBase-header a > i {
  margin-right: 10px;
}

.BUS-detailBase .BUS-detailBase-data {
  border: 1px solid var(--clr-blue);
  padding: 20px;
}

.BUS-detailBase .BUS-detailBase-data ul {
  margin-left: 20px;
}

.BUS-detailBase .Accordion-wrapper ul {
  margin-left: 20px;
}

.BUS-detailRight select {
  border: 0;
  padding: 10px;
  width: 100%;
  font-size: 0.8rem;
  outline: none;
}

.BUS-detailRight .BUS-detailRight-box {
  background: rgba(0, 83, 155, 0.1);
  padding: 20px;
}

.BUS-detailRight .BUS-detailRight-box .BUS-detailRight-boxTitle {
  text-align: center;
  margin-bottom: 10px;
  display: block;
  justify-content: center;
}

.BUS-detailRight .BUS-detailRight-box .BUS-detailRight-boxTitle > img {
  width: 21px;
  margin-right: 5px;
}

.BUS-detailRight .BUS-detailRight-box.hasMarginBottom {
  margin-bottom: 20px;
}

.BUS-detailRight .BUS-detailRight-box:last-of-type {
  margin-top: 20px;
}

.BUS-detailRight .BUS-detailRight-box .BUS-detailRight-point strong {
  display: block;
  margin: 20px 0 5px;
}

/* ============================== BUS LIST ============================== */
.BUS-List {
  display: grid;
  grid-template-columns: 25% 25% 50%;
  grid-template-areas:
    'search search more-information'
    'frequently-forms a-z more-information'
    'projects-in-city frequently-performances life-situations';
}

.BUS-List .grid-item {
  height: auto;
  margin: 5px;
}

.BUS-List .grid-item:not(.HighlightBox) > div {
  height: 100%;
}

.BUS-List .grid-item ul {
  list-style: none;
}

.BUS-List .grid-item ul > li {
  line-height: 2rem;
  text-align: center;
}
.BUS-List .grid-item ul > li > a {
  text-decoration: none;
}

.BUS-List-searchForm {
  position: relative;
}

.BUS-List-searchForm h3 {
  text-align: center;
  margin-bottom: 15px !important;
}

.BUS-List-searchLabel {
  color: var(--clr-blue);
  display: inline-block;
  margin-bottom: 5px;
}

.BUS-List-searchInput:focus,
.BUS-List-searchButton:focus {
  outline: none;
}

.BUS-List-searchInput {
  border: 2px solid var(--clr-blue);
  border-radius: 0;
  font-family: 'ClassicGrotesque', sans-serif;
  font-size: 18px;
  padding: 16px 20px;
  transition: width 0.5s;
  width: 100%;
}

.BUS-List-searchButton {
  background-color: transparent;
  border: 0;
  bottom: 0;
  color: var(--clr-blue);
  display: block;
  font-size: 26px;
  height: 60px;
  line-height: 60px;
  padding: 0 17px;
  position: absolute;
  right: 0;
  text-align: center;
}

.BUS-List h3 {
  color: var(--clr-blue);
  margin-bottom: 30px;
}

.BUS-List > .search {
  grid-area: search;
}
.BUS-List > .more-information {
  grid-area: more-information;
}

.BUS-List > .frequently-forms {
  grid-area: frequently-forms;
}

.BUS-List > .a-z {
  grid-area: a-z;
}

.BUS-List > .projects-in-city {
  grid-area: projects-in-city;
}

.BUS-List > .frequently-performances {
  grid-area: frequently-performances;
}

.BUS-List > .life-situations {
  grid-area: life-situations;
}

.BUS-List .two-columns {
  display: flex;
  padding: 0 60px;
  transition: all 0.5s;
}

.BUS-List .two-columns > div {
  flex: 50%;
}

.BUS-List .grid-item .two-columns ul > li {
  text-align: left;
}

.BUS-List .image-text-overlay {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
  position: relative;
}

.BUS-List .image-text-overlay > div {
  background: rgba(255, 255, 255, 0.8);
  bottom: 0;
  color: var(--clr-blue);
  left: 0;
  padding: 20px;
  position: absolute;
  width: 100%;
}

@media screen and (max-width: 1400px) {
  .BUS-List .two-columns {
    padding: 0;
  }
}
@media screen and (max-width: 1024px) {
  .BUS-List .grid-item .two-columns {
    flex-flow: column;
  }
  .BUS-List .grid-item .two-columns ul > li {
    text-align: center;
  }
  .BUS-List {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
      'search search'
      'a-z more-information'
      'frequently-forms projects-in-city'
      'frequently-performances life-situations';
  }
}

@media screen and (max-width: 768px) {
  .BUS-List {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      'search'
      'a-z'
      'more-information'
      'frequently-forms'
      'projects-in-city'
      'frequently-performances'
      'life-situations';
  }
}

/* ============================== BUS und Filter INDEX ============================== */

.Filter-Index {
  display: flex;
  margin: -6px;
  flex-wrap: wrap;
  justify-content: center;
}

.Filter-Index.back-to-overview span {
  margin-top: 30px;
  padding: 0 30px;
  width: inherit;
}

.BUS-Index.back-to-overview a {
  width: inherit;
}

.Filter-Index span,
.BUS-Index a {
  align-items: center;
  height: 50px;
  background: var(--clr-blue);
  color: #ffffff;
  display: inline-flex;
  font-size: 1rem;
  margin: 6px;
  justify-content: center;
  width: 50px;
}

/* ============================== BUS SEARCH ============================== */

.BUS-search {
  padding: 20px 0;
  color: var(--clr-blue);

  background: #00539b1a;
}

.BUS-searchInner {
  text-align: left;
  max-width: 550px;
  margin: 0 auto;
  padding: 0 15px;
}

.BUS-searchLabel {
  font-size: 18px;
}

.BUS-searchWrapper {
  margin-top: 5px;
  position: relative;
  background: #ffffff;
  border: 2px solid var(--clr-blue);
  /* border-radius: 60px; */
}

.BUS-searchInput {
  padding: 15px 20px;
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 18px;
  outline: none;
}

.BUS-searchButton {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 29px;
  color: var(--clr-blue);
}

/* ============================== BUS SEARCH NEW ============================== */

/* ============================== FILTER DEPARTMENT ============================== */
.Filter {
  height: 100%;
  margin: 30px 0;
  padding: 30px 30px 0 30px;
}

.Filter-Department {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
}

.Filter-Department .item {
  width: 33%;
}

.Filter-Department .item span {
  color: var(--clr-blue);
  cursor: pointer;
}

.Filter-Department .item span.active {
  font-weight: bold;
}

@media screen and (max-width: 1360px) {
  .Filter-Department .item {
    width: 50%;
  }
}

@media screen and (max-width: 1024px) {
  .Filter-Department .item {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .Filter-Department .item {
    width: 50%;
  }
}

@media screen and (max-width: 576px) {
  .Filter-Department .item {
    width: 100%;
  }
}

/* ============================== FILTER INDEX ============================== */

.Filter-Index {
  margin: 15px 0;
}

.Filter-Index span {
  cursor: pointer;
}
.Filter-Index span.active {
  font-weight: bold;
}

/* ============================== NEWS ============================== */

.News,
.NewsDisplayItem {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 100%;
}

.News + .News,
.NewsDisplayItem + .NewsDisplayItem {
  padding-top: 10px;
  border-top: 3px solid rgba(0, 83, 155, 0.4);
}

.News-date {
  color: #343434;
  font-size: 14px;
}

.News-title {
  color: var(--clr-blue);
  font-size: 17px;
}

/* ============================== LinkboxWithIconAndText ============================== */

.row.equal-height .LinkboxWithIconAndText .LinkboxWithIconAndText-data {
  height: 100%;
}

.LinkboxWithIconAndText {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 60px;
  padding-bottom: 30px;
  height: 100%;
}

.LinkboxWithIconAndText-icon {
  width: 100%;
}

.LinkboxWithIconAndText-iconWrapper {
  position: absolute;
  top: 60px;
  width: 120px;
  height: 120px;
  background: var(--clr-blue);
  padding: 30px;
  border-radius: 50%;

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

  transform: translateY(-50%);
}

.LinkboxWithIconAndText-data {
  width: 100%;
  padding: 60px 20px 20px 20px;
  border-radius: 10px;

  transition: box-shadow 250ms ease-in-out;
}

.LinkboxWithIconAndText--white .LinkboxWithIconAndText-data {
  background: #ffffff;
}

.LinkboxWithIconAndText--blue .LinkboxWithIconAndText-data {
  background: rgba(0, 83, 155, 0.1);
  height: 100%;
}

a.LinkboxWithIconAndText:hover .LinkboxWithIconAndText-data {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.LinkboxWithIconAndText-dataTitle {
  text-align: center;
  font-size: 22px;
  margin: 10px 0 5px 0;
  color: var(--clr-blue);
  font-weight: 500;
  word-break: break-word;
}

/* ============================== LINKBOXWITHIMAGE ============================== */

.LinkboxWithImage {
  position: relative;
  /* min-height: 280px;
  max-height: 400px;
  max-width: 320px;
  max-width: min(320px, 100%); */

  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.LinkboxWithImage .Image {
  position: relative;
}

.LinkboxWithImage-image {
  display: block;
  object-fit: cover;
  width: 100%;
}

.LinkboxWithImage-title {
  background: var(--clr-blue);
  display: block;
  margin: 0;
  padding: 15px 12px;
  color: #ffffff;
  font-weight: 600;
  height: 100%;
}

@media screen and (max-width: 1024px) {
  .LinkboxWithImage {
    margin-bottom: 30px;
  }
}

/* ============================== LINKBOXWITHIMAGEANTEXT ============================== */

.LinkboxWithImageAndText {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 100%;
}

.LinkboxWithImageAndText-image {
  position: relative;
  flex: 1;
}

.LinkboxWithImageAndText-image img {
  height: 100%;
  object-fit: cover;
}

.LinkboxWithImageAndText-data {
  flex: 1;
  background: #004988;
  position: relative;
  min-height: 275px;
}

.LinkboxWithImageAndText-dataTitle,
.LinkboxWithImageAndText-dataText {
  padding: 0 20px;
  color: #ffffff;
}

.LinkboxWithImageAndText-dataTitle {
  position: relative;
  padding-top: 15px;
  margin-bottom: 30px;
  font-size: 23px;
  font-weight: 500;
  line-height: 100%;
}

.LinkboxWithImageAndText-dataTitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -17px;

  width: 130px;
  height: 6px;

  background: #0093e8;
}

.LinkboxWithImageAndText-dataText {
  font-size: 16px;
  padding-bottom: 30px;
}

.LinkboxWithImageAndText-dataButton {
  background: #0093e8;
  color: #ffffff;
  font-weight: 500;
  padding: 15px 20px;
  text-decoration: none;

  display: flex;
  align-items: center;

  position: absolute;
  bottom: 0;
  width: 100%;
}

.LinkboxWithImageAndText-dataButton:hover {
  background: var(--clr-secondary);
  color: #ffffff;
}

.LinkboxWithImageAndText-dataButton::before {
  background-image: url(../Images/pdf_line.svg) !important;
  background-repeat: no-repeat;
  content: '' !important;
  height: 20px !important;
  width: 30px !important;
  margin-right: 5px;
}

.LinkboxWithImageAndText-dataButton i {
  padding-left: 15px;
}

@media screen and (max-width: 1023px) {
  .LinkboxWithImageAndText {
    height: calc(100% - 17px);
    overflow: hidden;
  }

  .LinkboxWithImageAndText .LinkboxWithImageAndText-dataButton {
    bottom: 17px;
  }
}

@media screen and (max-width: 992px) {
  .LinkboxWithImageAndText {
    flex-flow: column;
  }
}

@media screen and (max-width: 768px) {
  .LinkboxWithImageAndText-data {
    min-height: inherit;
  }

  .LinkboxWithImageAndText-image img {
    height: inherit;
  }

  .LinkboxWithImageAndText-dataButton {
    bottom: 0;
    position: relative;
  }

  .LinkboxWithImageAndText-dataButton::before {
    margin-right: 15px;
  }
}

/* ============================== HIGHLIGHTBOXWITHIMAGE ============================== */

.row.equal-height .HighlightBoxWithImage {
  height: 100%;
  justify-content: space-between;
}

.HighlightBoxWithImage {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.HighlightBoxWithImage-image img {
  height: inherit;
}

.HighlightBoxWithImage-image {
  border-radius: 15px 15px 0 0;
  object-fit: cover;
  height: 100%;
}

.HighlightBoxWithImage-data {
  position: relative;
  background: var(--clr-blue);
  color: #ffffff;
  font-size: 16px;
  padding: 40px 25px 25px 25px;
  text-align: center;
  border-radius: 0 0 15px 15px;
}

.HighlightBoxWithImage-data::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  height: 5px;
  width: 100%;
  background: #ffffff;
}

.HighlightBoxWithImage-data .Button a {
  margin-top: 20px;
  background: #009fe3;
}

.HighlightBoxWithImage-data .Button a[href$='.pdf']::before {
  background-image: url('../Images/pdf_line.svg');
}

.HighlightBoxWithImage-data .ReadSpeaker {
  display: flex;
  justify-content: center;
}

.HighlightBoxWithImage-data .ReadSpeaker span {
  color: #ffffff;
}

/* ============================== LIST ============================== */

.List-item {
  background-color: rgba(0, 83, 155, 0.1);
  border-radius: 10px;
  padding: 40px;
  margin-bottom: 30px;
  display: flex;
  align-items: flex-start;
}

.List-item figure {
  border-radius: 10px;
  margin-right: 30px;
  max-width: 440px;
  width: 100%;
}

.List-item figure img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.List-item .List-data {
  max-width: 925px;
  width: 100%;
}

.Section--highlight .List-item {
  background-color: #ffffff;
}

.List-title {
  font-size: 18px;
  color: #006086;
  margin-bottom: 5px;
}

.List-detail {
  font-size: 18px;
}

.List-link {
  position: relative;
  font-size: 18px;
  color: var(--clr-blue);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
  text-decoration: none;
}

.List-link::after {
  margin-left: 5px;
  content: '\f105';
  font-family: 'Font Awesome 5 Pro';
  height: 28px;
  width: 28px;
  border-radius: 5px;
  background-color: #006086;
  color: #ffffff;
  text-align: center;
  line-height: 28px;
}

/* .List-link[href$='.pdf']::after {
  background-image: url('../Images/pdf_line.svg');
  background-size: 18px;
} */

@media screen and (max-width: 1024px) {
  .List-item {
    padding: 10px;
  }
}

@media screen and (max-width: 600px) {
  .List-title {
    font-size: 24px;
  }
}

@media screen and (max-width: 576px) {
  .List-item {
    flex-flow: column;
  }

  .List-item figure {
    margin-right: 0;
  }
}

/* ============================== IFRAME ============================== */

.iFrame {
  border: 0;
  width: 100%;
  min-height: 350px;
  display: none;
}

/* ============================== CONTACTLIST ============================== */

.row.equal-height.Contact--List .col > div {
  padding-bottom: 20px;
}

.row.equal-height.Contact--List .col > div .ContactList {
  height: 100%;
}

.ContactList {
  padding: 15px 5px;
  background-color: rgba(0, 83, 155, 0.1);
  display: inline-flex;
  flex-flow: column;
  margin: 10px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .ContactList .ContactList-address {
    flex-flow: column;
    align-items: flex-start;
  }

  .col .ContactList {
    margin: 10px 0;
  }

  .col .ContactList + .ContactList {
    margin: 10px;
  }
}

@media screen and (max-width: 576px) {
  .ContactList {
    margin: 15px 0;
    width: 100%;
  }

  .ContactList .ContactList-address {
    flex-flow: row;
  }
}

.Section--highlight .ContactList {
  background: #ffffff;
}

.ContactList-name,
.ContactList-role {
  padding: 0 15px;
  font-size: 18px;
}

.ContactList-address,
.ContactList-dataEntry {
  padding: 15px 15px 0 15px;
  font-size: 18px;
}

.ContactList-name {
  color: var(--clr-blue);
  font-weight: 600;
  margin-top: 15px;
}

.ContactList-role {
  color: #c90044;
}

.ContactList-address {
  display: flex;
  align-items: center;
  line-height: 140%;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .ContactList-address .ContactList-addressLink {
    margin-bottom: 10px;
  }
}

.ContactList-addressLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 105px;
  max-width: 105px;
  min-height: 85px;
  max-height: 85px;
  margin-right: 15px;
  padding: 12px;
  text-decoration: none;
  background-color: #ffffff;
  color: var(--clr-blue);
}

.Section--highlight .ContactList-addressLink {
  background-color: rgba(0, 83, 155, 0.1);
}

.ContactList-addressLink i {
  font-size: 35px;
}

.ContactList-addressLink-text {
  font-size: 12px;
}

.ContactList-dataEntry {
  display: flex;
  flex-direction: row;
}

.ContactList-dataEntry i {
  font-size: 28px;
  color: var(--clr-blue);
  margin-right: 10px;
}

.ContactList-dataEntry-text {
  font-size: 18px;
  color: #343434;
}

.ContactList-info {
  display: flex;
  flex-direction: row;

  width: 100%;
  background: rgba(168, 168, 168, 0.2);
  padding: 15px;
  margin-top: 20px;
}

.ContactList-info i {
  margin-right: 15px;
  font-size: 28px;
  color: var(--clr-blue);
}

.ContactList-infoText {
  display: block;
  width: 100%;
  font-size: 18px;
  color: #343434;
}

.ContactList-infoText a {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================== CONTACTLISTDETAIL ============================== */

.ContactListDetail {
  padding: 50px;
  line-height: 140%;
  background: rgba(0, 83, 155, 0.1);
}

.Section--highlight .ContactListDetail {
  background: #ffffff;
}

.ContactListDetail-headerTitle {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 500;
  color: var(--clr-blue);
}

.ContactListDetail-headerSub {
  display: flex;

  /* TODO: Maybe fix, was row before but looked not good on one Page */
  flex-direction: column;
}

.ContactListDetail-headerSub-text {
  /* min-width: 350px; */
  font-size: 18px;
  color: var(--clr-blue);
}

@media screen and (max-width: 768px) {
  .ContactListDetail-headerSub-text {
    min-width: inherit;
  }
}

.ContactListDetail-text {
  margin-top: 30px;
  font-size: 18px;
  color: var(--clr-blue);
}

.ContactListDetail-map {
  margin-top: 20px;
  overflow: inherit !important;
}

.ContactListDetail-map .mapboxgl-canvas {
  position: relative !important;
}

/* ============================== OPENING HOURS ============================== */
.OpeningHours .days {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.OpeningHours .days .hour {
  text-align: end;
}

@media screen and (max-width: 1024px) {
  .OpeningHours {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 576px) {
  .OpeningHours .days {
    display: block;
  }

  .OpeningHours .days .hour {
    text-align: left;
  }
}

/* ============================== ACCORDION ============================== */

.Accordion-wrapper {
  position: relative;
  border-bottom: 1px solid var(--clr-blue);
  border-top: 1px solid var(--clr-blue);
  margin-top: 30px;
}

.Accordion-wrapper + .Accordion-wrapper {
  border-top: 0;
  margin-top: 0;
}

.Accordion-wrapper:last-of-type {
  margin-bottom: 30px;
}

.Accordion-wrapper .Article-wrapper {
  padding: 12px 25px;
  margin: 0;
}

.Accordion-wrapper .Accordion-specialTitle {
  font-weight: 700;
  margin: 20px 0 5px;
}

.Accordion-wrapper .Document-list {
  background: #ffffff;
  margin-bottom: 5px;
}

.Accordion-wrapper .Document-list::before,
.Accordion-wrapper .Document-list a::before {
  display: none;
}

.Accordion-wrapper ul {
  margin-left: 20px;
}

.Accordion-header {
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 40px;
}

@media screen and (max-width: 1024px) {
  /* .row .col:first-of-type .Accordion-wrapper {
    margin-bottom: 0;
  } */
  .row .col:last-of-type .Accordion-wrapper {
    margin-top: 15px;
  }
}
@media screen and (max-width: 992px) {
  .Accordion-header {
    padding: 10px;
  }
}

.Accordion-header:hover .Accordion-button,
.Accordion-header:hover .Accordion-title {
  color: #c90044;
}

.Section--highlight .Accordion-header {
  background: #ffffff;
}

.Accordion-title {
  color: var(--clr-blue);
  position: relative;
}

.Accordion-wrapper .neos-contentcollection {
  display: none;
}

.Accordion-wrapper.is-active .neos-contentcollection {
  display: block;
  padding: 15px 85px;
  background: rgba(0, 83, 155, 0.1);
  margin-top: 2px;
  transition: all 0.3s;
}

@media screen and (max-width: 992px) {
  .Accordion-wrapper.is-active .neos-contentcollection {
    padding: 15px 35px;
  }
}

.Section--highlight .Accordion-wrapper.is-active .neos-contentcollection {
  background: #ffffff;
}

.Accordion-button {
  color: var(--clr-blue) !important;
  position: relative;
  height: 30px;
  border: none;
  background: transparent;
  margin-right: 45px;
}

.Accordion-button:hover {
  color: var(--clr-secondary) !important;
}

.Accordion-wrapper.is-active .Accordion-button::before,
.Accordion-wrapper.is-active .Accordion-title {
  color: #c90044;
}

.Accordion-button::before {
  content: '\f055';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 30px;
  height: 30px;
  width: 30px;
}

.Accordion-wrapper.is-active .Accordion-button::before {
  content: '\f056';
}

/* ============================== BIGBUTTON ============================== */

.BigButton {
  position: relative;
  display: flex;
  align-items: center;

  height: 100%;
  min-width: calc(100% - 60px);
  max-width: calc(100% - 60px);
  background: var(--clr-blue);
  color: #ffffff;
  padding: 25px;
  text-decoration: none;
  font-size: 1.85rem;
  font-weight: 500;
  margin-left: 60px;
  line-height: 100%;
}

.BigButton::before {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateX(-100%);

  content: '';
  height: 100%;
  width: 60px;
  background-image: linear-gradient(
    to right,
    rgba(0, 83, 155, 0.1),
    rgba(0, 83, 155, 0.1) 33%,
    rgba(0, 83, 155, 0.3) 33%,
    rgba(0, 83, 155, 0.3) 66%,
    rgba(0, 83, 155, 0.6) 66%
  );
}

.BigButton:hover {
  background: rgb(201, 0, 68);
  color: #ffffff;
}

.BigButton:hover::before {
  background-image: linear-gradient(
    to right,
    rgba(201, 0, 68, 0.1),
    rgba(201, 0, 68, 0.1) 33%,
    rgba(201, 0, 68, 0.3) 33%,
    rgba(201, 0, 68, 0.3) 66%,
    rgba(201, 0, 68, 0.6) 66%
  );
}

.BigButton-icon {
  font-size: 88px;
  margin-right: 5px;
}

/* ============================== MAP ============================== */

#map {
  width: 100%;
  height: 300px;
  margin-bottom: 30px;
}

/* ============================== BRANDCARD ============================== */

.BrandList .neos-contentcollection {
  display: block;
}
.BrandList .neos-contentcollection > * {
  border-bottom: 1px solid #778f98;
}

.BrandList.Four .neos-contentcollection > * {
  border: 0;
}

@media screen and (min-width: 768px) {
  .BrandList .neos-contentcollection {
    display: flex;
    flex-wrap: wrap;
  }

  .BrandList .neos-contentcollection > * {
    width: calc(100% / 3);
    margin: 0;
    border-bottom: 1px solid #778f98;
    border-right: 1px solid #778f98;
  }

  .BrandList.Three .neos-contentcollection > * {
    width: calc(100% / 3);
  }

  .BrandList.Four .neos-contentcollection > * {
    width: calc(100% / 4);
  }

  .BrandList .neos-contentcollection > *:nth-child(3n) {
    border-right: 0;
  }
}

.BrandCard {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 50px;
  flex-flow: column;
}

.BrandCard img {
  max-height: 250px;
}

@media screen and (min-width: 768px) {
  .BrandCard {
    padding: 30px;
  }
}

/* ============================== ImageGalleryBig ============================== */

.ImageGalleryBig {
  margin-top: 40px;
}

.ImageGalleryBig-sliderSlide {
  list-style: none;
  /* max-height: 500px; */
  position: relative;
  width: 100%;
}

.ImageGalleryBig-sliderSlideImage {
  object-fit: cover;
  font-family: 'object-fit: cover;';
  width: 100%;
}

.lSGallery {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 25px !important;
}

.lSGallery li {
  height: 140px;
  width: 220px !important;
}

.lSGallery li + li {
  margin-left: 15px;
}

.lSSlideOuter .lSPager.lSGallery img {
  height: 100% !important;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.ImageGalleryBig-sliderSlide.textAfterImage {
  max-height: inherit;
}

.ImageGalleryBig-sliderSlide.textAfterImage > div {
  position: relative;
  background: rgb(0, 83, 155);
}

.ImageGalleryBig-sliderSlideOverlay {
  position: absolute;
  left: 0;
  bottom: 6px;
  background: rgba(0, 83, 155, 0.6);
  color: #ffffff;
  padding: 20px 25px;
  min-width: 25%;
}

.ImageGalleryBig-sliderSlideOverlay a {
  color: #fff;
  text-decoration: underline;
}

.ImageGalleryBig-sliderSlideOverlay a:hover {
  color: #fff;
  text-decoration: none;
}

.lSAction > a {
  width: 50px;
  height: auto;
  font-size: 116px;
  color: #ffffff;
  margin-top: 0;
  transform: translateY(-50%);
  text-shadow: 0px 0px 9px var(--clr-blue);
}

/* ============================== MASONRY ============================== */

.Masonry-article {
  width: 100%;
  border-radius: 5px;
  display: inline-flex;
  flex-flow: column;
}

.row.equal-height.masonry .Masonry-article {
  height: 100%;
}

.row.equal-height.masonry .Masonry-article .Masonry-articleData {
  height: calc(100% - 280px);
}

.Masonry-articleImage {
  width: 100%;
  height: 280px;
  border-radius: 5px 5px 0 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.Masonry-articleData {
  background: rgba(0, 83, 155, 0.1);
  padding: 40px 30px 50px 30px;
  height: 100%;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .Masonry-articleData {
    height: auto;
  }
}

.Masonry-articleData-title {
  font-weight: 500;
  color: var(--clr-blue);
  margin-bottom: 15px;
  font-size: 22px;
}

/* .Masonry-articleData-text {
  font-weight: 400;
  color: #000;
  margin-bottom: 15px;
  font-size: 22px;
} */

.Masonry-articleData-link {
  color: var(--clr-blue);
  margin-left: auto;

  display: inline-flex;
  align-items: center;
  margin-top: 20px;
}

.Masonry-articleData-link i {
  background: var(--clr-blue);
  color: #ffffff;
  width: 25px;
  height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  border-radius: 3px;
}

/* ============================== IMAGE POPUP ============================== */

.ImagePopUp-wrapper {
  display: inline-block;
}

.ImagePopUp {
  border: 0;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ImagePopUp-image {
  max-width: 100%;
}

.ImagePopUp-popup {
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 80%;
  max-width: 80%;
  max-height: 80%;
  background: #ffffff;
  padding: 50px;
  z-index: 10;
  border-radius: 10px;
}

.ImagePopUp-popup.is-Active + .ImagePopUp-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 83, 155, 0.3);
}

.ImagePopUp-popupClose {
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--clr-blue);
  border: 0;
  background-color: transparent;
  font-size: 24px;
}

.ImagePopUp-popupImage {
  border-radius: 5px;
  max-height: 100%;
}

.ImagePopUp-copyright {
  margin-top: 5px;
  opacity: 0.6;
}

.ImagePopUp-popupCopyright {
  float: right;
}

/* ============================== NEWSFILTER ============================== */
.NewsFilter-select {
  /* width: 100%; */

  border-radius: 5px;
  padding: 10px;
  font-size: 18px;
  border: 1.5px solid rgba(0, 83, 155, 0.1);
}

/* ============================== MAPFILTER ============================== */

.Map {
  max-height: 400px !important;
}

.MapFilter {
  display: flex;
  flex-direction: row;

  background: rgba(0, 83, 155, 0.1);
  padding: 40px;
  height: 550px;
  margin: 40px 0;
}

.MapFilter .MapFilter-map {
  width: 100% !important;
}

.Section--highlight .MapFilter {
  background: #ffffff;
}

.MapFilter-left {
  width: 350px;

  margin-right: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.MapFilter-headline {
  display: flex;
  width: 100%;
}

/* .MapFilter-heading {
  font-size: 38px;
  color: var(--clr-blue);
  font-weight: 500;
  width: 100%;
  margin-bottom: 20px;
} */

.MapFilter-label {
  color: var(--clr-blue);
  width: 100%;
}

.MapFilter-map#map {
  margin-bottom: 0;
  height: 100%;
  border: 1px solid var(--clr-blue);
}

.MapFilter-select,
.MapFilter-input {
  width: 100%;

  border-radius: 5px;
  padding: 10px;
  font-size: 18px;
  border: 1.5px solid rgba(0, 83, 155, 0.1);
}

.MapFilter-input {
  margin-bottom: 20px;
}

.MapFilter-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

.MapFilter-selectWrapper {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.MapFilter-selectWrapper::after {
  content: '\f0d7';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 600;
  pointer-events: none;

  position: absolute;
  right: 10px;
  top: 50%;
  color: var(--clr-blue);
  transform: translateY(-50%);
}

.MapFilter-selectWrapper:has(.MapFilter-dropdown)::after {
  display: none;
}

.MapFilter-selectWrapper .MapFilter-dropdown > div {
  border-radius: 3px;
  display: block;
  background: #ffffff;
  width: 100%;
  min-height: 45px;
}

.MapFilter-selectWrapper .MapFilter-dropdown > div > span {
  display: inline-block;
  margin: 2px 3px;
  background: rgba(0, 83, 155, 0.1);
  padding: 0 2px;
}

.MapFilter-selectWrapper .MapFilter-dropdown .MapFilter-select {
  display: none;
  position: absolute;
  z-index: 1;
}

.MapFilter-submit {
  font-size: 18px;
  background: var(--clr-blue);
  padding: 12px 20px;
  color: #ffffff;
  border: 0;
}

.Map-companies {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.Map-companies .ContactList {
  width: inherit;
}

@media screen and (max-width: 1200px) {
  .Map-companies {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 991px) {
  .Map-companies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .MapFilter {
    flex-flow: column;
    height: inherit;
  }
  .MapFilter-left {
    width: 100%;
    margin-bottom: 15px;
  }
  .MapFilter-map#map {
    height: 300px;
  }
}

@media screen and (max-width: 576px) {
  .Map-companies {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .MapFilter-submit {
    width: 100%;
  }
}

/* ============================== MAP POI ============================== */
.MapPoi #mappoi {
  height: 300px;
}

/* ============================== FOOTER ============================== */

.Footer {
  position: relative;
  background-color: var(--clr-blue);
  color: #ffffff;

  margin-top: 130px;
}

.Footer::before {
  position: absolute;
  top: 0;
  transform: translateY(-100%);

  content: '';
  height: 90px;
  width: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 83, 155, 0.1),
    rgba(0, 83, 155, 0.1) 33%,
    rgba(0, 83, 155, 0.3) 33%,
    rgba(0, 83, 155, 0.3) 66%,
    rgba(0, 83, 155, 0.6) 66%
  );
}

.Footer-social {
  margin-bottom: 60px;
  display: flex;
  align-items: center;
}

.Footer-social a + a {
  margin-left: 15px;
}

.Footer-container > .Container {
  padding: 30px 20px 40px 20px;
}

@media screen and (max-width: 1024px) {
  .Footer-container > .Container .row .col h4 {
    margin-top: 30px;
    margin-bottom: 10px;
  }
}

.Footer-container .Container h4 {
  position: relative;
  font-weight: 500;
  font-size: 22px;
  padding-left: 30px;
}

.Footer-container .Container h4::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  content: '';
  background-image: url('../Images/X-footer.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 21px;
  height: 27px;
}

.Footer a {
  color: #ffffff;
}

.Footer a:hover {
  color: #b2cbe1;
  text-decoration: none;
}

.Footer .Subfooter {
  background-color: #004988;
}

.Footer-navigation {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.Footer-navigation li {
  list-style: none;
}

.Footer-navigation li + li {
  margin-left: 20px;
}

.Footer-navigation li a {
  font-weight: 400;
  font-size: 18px;
}

.Footer-social a {
  color: #ffffff;
  display: flex;
}

.Footer-social svg {
  width: 42px;
}

.Footer-social i {
  font-size: 48px;
}

.Footer-container .row .col:last-of-type .col {
  margin-top: 0;
}

.Footer-container .OpeningHours > div:first-of-type strong {
  display: none;
}

@media screen and (max-width: 576px) {
  .Footer-navigation {
    display: block;
  }

  .Footer-navigation li {
    text-align: center;
  }

  .Footer-navigation li + li {
    margin-left: 0;
  }

  .Footer-navigation li a {
    line-height: 2;
  }
}

.Twitter-XLogo,
.WhatsApp-Logo {
  width: 42px;
  height: 48px;

  &:hover {
    opacity: 0.5;
  }
}

/* ============================== TOWNHALL CONTACT LIST ============================== */

.TownhallContactList {
  display: flex;
  flex-flow: column;
  /* margin-left: -20px; */
  /* margin-right: -20px; */
}

.TownhallContactList h3 {
  text-align: center;
  font-weight: 100;
  margin: 50px 0 10px;
  color: var(--clr-blue);
}

.TownhallContactList > div {
  display: flex;
  flex-flow: column;
}

.TownhallContactList .TownhallContactListMain {
  height: 300px;
}

.TownhallContactList .TownhallContactListMain .MainPerson {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

.TownhallContactList .TownhallContactListMain .MainPerson::before,
.TownhallContactList .TownhallContactListMain .MainPerson::after {
  height: 100%;
  position: absolute;
  width: 20%;
}

.TownhallContactList .TownhallContactListMain .MainPerson::before {
  content: '';
  background-image: linear-gradient(
    to right,
    rgba(0, 83, 155, 0.1),
    rgba(0, 83, 155, 0.1) 33%,
    rgba(0, 83, 155, 0.3) 33%,
    rgba(0, 83, 155, 0.3) 66%,
    rgba(0, 83, 155, 0.6) 66%
  );
  left: 0;
}

.TownhallContactList .TownhallContactListMain .MainPerson::after {
  content: '';
  background-image: linear-gradient(
    to left,
    rgba(0, 83, 155, 0.1),
    rgba(0, 83, 155, 0.1) 33%,
    rgba(0, 83, 155, 0.3) 33%,
    rgba(0, 83, 155, 0.3) 66%,
    rgba(0, 83, 155, 0.6) 66%
  );
  right: 0;
}

.TownhallContactList .ContactListMain {
  display: flex;
  flex-flow: row;
  width: 60%;
}

.TownhallContactListStandIn .StandInPerson {
  display: flex;
  justify-content: center;
  width: 100%;
}

.TownhallContactListStandIn .StandInPerson .ContactListStandIn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .TownhallContactList .TownhallContactListMain .ContactListMain {
    width: 100%;
  }

  .TownhallContactList .TownhallContactListMain .MainPerson::before,
  .TownhallContactList .TownhallContactListMain .MainPerson::after {
    display: none;
  }

  .TownhallContactList .shutter {
    display: none;
  }

  .TownhallContactList .TownhallContactListMain .MainPerson {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .TownhallContactList .TownhallContactListMain {
    height: inherit;
  }

  .TownhallContactList .StandInPerson {
    justify-content: inherit;
  }
}

@media screen and (max-width: 576px) {
  .TownhallContactList .ContactListMain {
    flex-flow: column;
  }
}

/* ============================== TOWNHALL CONTACT  ============================== */

.TownhallContactList .MainPerson .TownhallContact .Name,
.TownhallContactList .StandInPerson .TownhallContact .Overlay {
  display: none;
}

.TownhallContactList .MainPerson .TownhallContact {
  border: 4px solid var(--clr-blue);
}

.TownhallContactList .MainPerson .TownhallContact:first-of-type {
  border-right: 2px solid var(--clr-blue);
}

.TownhallContactList .MainPerson .TownhallContact:last-of-type {
  border-left: 2px solid var(--clr-blue);
}

.TownhallContactList .StandInPerson .TownhallContact {
  margin: 2px;
  display: flex;
  flex-flow: column;
}

.TownhallContactList .TownhallContact {
  position: relative;
}

.TownhallContactList .TownhallContact .Image {
  position: relative;
  height: 100%;
}

.TownhallContactList .TownhallContact .Info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.TownhallContactList .TownhallContact .Info > img {
  background: var(--clr-blue);
  padding: 7px;
  margin: 5px;
  margin-bottom: 0;
  width: 45px;
}

.TownhallContactList .TownhallContact .Info .Info--icon {
  width: 45px;
  height: 45px;
  padding: 15px;
  cursor: pointer;
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center;
  margin: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.TownhallContactList .MainPerson .TownhallContact .Info .Info--icon {
  background-image: url('../Images/info-circle-light.svg');
  background-color: var(--clr-blue);
}

.TownhallContactList .StandInPerson .TownhallContact .Info .Info--icon {
  background-image: url('../Images/info-circle-dark.svg');
  background-color: rgba(255, 255, 255, 0.8);
}

.TownhallContactList .TownhallContact .Info .Info--details {
  opacity: 0;
  z-index: -1;
  padding: 10px;
  transition: opacity 0.5s;
  position: absolute;
  width: 100%;
  height: 100%;
}

.TownhallContactList .TownhallContact .Info .Info--details.show {
  opacity: 1;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  z-index: 1;
}

.TownhallContactList .TownhallContact img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.TownhallContactList .MainPerson .TownhallContact {
  position: relative;
  width: 50%;
}

.TownhallContactList .MainPerson .TownhallContact .Overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px;
  padding-left: 60px;
  background-image: url('../Images/X.svg');
  background-color: rgba(255, 255, 255, 0.8);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: 15px center;
  width: 80%;
  z-index: 1;
}

.TownhallContactList .MainPerson .TownhallContact .Overlay p:first-of-type {
  color: var(--clr-blue);
  font-size: 1.2rem;
}

.TownhallContactList .MainPerson .TownhallContact .Overlay p:last-of-type {
  color: #c90044;
  font-size: 1rem;
}

.TownhallContactList .StandInPerson .TownhallContact .Name {
  text-align: center;
  color: var(--clr-blue);
  min-height: 45px;
}

@media screen and (max-width: 992px) {
  .TownhallContactList .TownhallContact > img {
    width: 100%;
    order: 2;
  }
}

@media screen and (max-width: 768px) {
  .TownhallContactList .MainPerson .TownhallContact {
    width: 100%;
  }

  .TownhallContactList .MainPerson .TownhallContact > img {
    height: inherit;
  }

  .TownhallContactListStandIn .StandInPerson .TownhallContact {
    margin-top: 30px;
  }
}

@media screen and (max-width: 576px) {
  .TownhallContactList .MainPerson .TownhallContact .Overlay {
    position: relative;
    background-color: rgba(0, 83, 155, 0.1);
    width: 100%;
  }

  .TownhallContactList .MainPerson .TownhallContact {
    display: inline-grid;
    border: 0 !important;
    margin-bottom: 15px;
  }

  .TownhallContactListStandIn .StandInPerson {
    justify-content: inherit;
  }
}

/* @media screen and (max-width: 360px) {
  .TownhallContactListStandIn .StandInPerson .ContactListStandIn {
    display: block;
    width: 100%;
  }
} */

/* ============================== ADMINISTRATIVE STRUCTURE ============================== */
.AdministrativeStructure.ColumnsThree {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-areas:
    'Numbers--top-left LordMayor Numbers--top-right'
    'ColumnConnector ColumnConnector ColumnConnector'
    'ColumnOne ColumnTwo ColumnThree';
}

.AdministrativeStructure.ColumnsFour {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-areas:
    'Numbers--top-left LordMayor LordMayor Numbers--top-right'
    'ColumnConnector ColumnConnector ColumnConnector ColumnConnector'
    'ColumnOne ColumnTwo ColumnThree ColumnFour';
}

@media screen and (max-width: 900px) {
  .AdministrativeStructure.ColumnsThree {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-areas:
      'Numbers--top-left Numbers--top-left Numbers--top-left'
      'LordMayor LordMayor LordMayor'
      'Numbers--top-right Numbers--top-right Numbers--top-right'
      'ColumnConnector ColumnConnector ColumnConnector'
      'ColumnOne ColumnOne ColumnOne'
      'ColumnTwo ColumnTwo ColumnTwo'
      'ColumnThree ColumnThree ColumnThree';
  }

  .AdministrativeStructure.ColumnsThree .LordMayor {
    margin: 0 0 15px 0;
  }
}

@media screen and (max-width: 992px) {
  .AdministrativeStructure.ColumnsFour {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas:
      'Numbers--top-left LordMayor LordMayor Numbers--top-right'
      'ColumnConnector ColumnConnector ColumnConnector ColumnConnector'
      'ColumnOne ColumnOne ColumnTwo ColumnTwo'
      'ColumnThree ColumnThree ColumnFour ColumnFour';
  }

  .AdministrativeStructure.ColumnsFour .ColumnThree,
  .AdministrativeStructure.ColumnsFour .ColumnFour {
    margin-top: 50px;
  }
}

@media screen and (max-width: 768px) {
  .AdministrativeStructure.ColumnsFour {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas:
      'Numbers--top-left Numbers--top-left Numbers--top-left Numbers--top-left'
      'LordMayor LordMayor LordMayor LordMayor'
      'Numbers--top-right Numbers--top-right Numbers--top-right Numbers--top-right'
      'ColumnConnector ColumnConnector ColumnConnector ColumnConnector'
      'ColumnOne ColumnOne ColumnOne ColumnOne'
      'ColumnTwo ColumnTwo ColumnTwo ColumnTwo'
      'ColumnThree ColumnThree ColumnThree ColumnThree'
      'ColumnFour ColumnFour ColumnFour ColumnFour';
  }

  .AdministrativeStructure.ColumnsFour .Columns {
    margin-top: 0;
  }

  .AdministrativeStructure.ColumnsFour .LordMayor {
    margin: 0 0 15px 0;
  }
}

.Numbers--top-left {
  grid-area: Numbers--top-left;
  position: relative;
}

.LordMayor {
  grid-area: LordMayor;
}

.Numbers--top-right {
  grid-area: Numbers--top-right;
  position: relative;
}

.Numbers--top-right .AdministrativeStructureNumbers:nth-child(2n + 1)::before {
  content: '';
  border: 1px solid;
  position: absolute;
  margin-top: 28px;
  left: -50px;
  width: 0px;
  height: 0px;
  transform: rotate(180deg);
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent rgba(0, 83, 155, 0.1);
}

.Numbers--top-right .AdministrativeStructureNumbers:nth-child(4n + 1)::before {
  transform: rotate(360deg);
}

.ColumnConnector {
  grid-area: ColumnConnector;
  margin-bottom: -6px;
}

.ColumnConnector svg {
  overflow: inherit;
}

.ColumnConnector svg .Line2.desktop,
.ColumnConnector svg .Line4.desktop {
  display: block;
}

.ColumnConnector svg .Line2.mobile,
.ColumnConnector svg .Line4.mobile {
  display: none;
}

@media screen and (max-width: 992px) {
  .ColumnConnector svg .Line2.desktop,
  .ColumnConnector svg .Line4.desktop {
    display: none;
  }

  .ColumnConnector svg .Line2.mobile,
  .ColumnConnector svg .Line4.mobile {
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .AdministrativeStructure.ColumnsThree .ColumnConnector {
    height: 50px;
  }

  .AdministrativeStructure.ColumnsThree .ColumnConnector svg {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .AdministrativeStructure.ColumnsFour .ColumnConnector {
    height: 50px;
  }

  .AdministrativeStructure.ColumnsFour .ColumnConnector svg {
    display: none;
  }
}

.ColumnOne {
  grid-area: ColumnOne;
}

.ColumnTwo {
  grid-area: ColumnTwo;
}

.ColumnThree {
  grid-area: ColumnThree;
}

.ColumnFour {
  grid-area: ColumnFour;
}

.AdministrativeStructure.ColumnsThree .ColumnFour {
  display: none;
}

.AdministrativeStructure.ColumnsThree .ColumnConnector .Four,
.AdministrativeStructure.ColumnsFour .ColumnConnector .Three {
  display: none;
}

.AdministrativeStructure .Numbers .AdministrativeStructureNumbers {
  background: #ffffff;
  border: 1px solid var(--clr-blue);
  padding: 5px;
  margin-bottom: 0;
  border: 1px solid var(--clr-blue);
  border-bottom: 0;
}

.AdministrativeStructure .Numbers .AdministrativeStructureNumbers > p:first-of-type {
  color: var(--clr-blue);
}

.AdministrativeStructure .Numbers .AdministrativeStructureNumbers.marginBottom {
  margin-bottom: 5px;
  border-bottom: 1px solid var(--clr-blue);
}

.AdministrativeStructure .LordMayor {
  align-items: center;
  background-color: rgba(0, 83, 155, 0.1);
  display: flex;
  justify-content: center;
  margin: 0 50px;
  padding: 5px;
  text-align: center;
}

.AdministrativeStructure .Columns .neos-nodetypes-text {
  background: var(--clr-blue);
  color: #fff;
  padding: 10px;
  text-align: center;
}

.AdministrativeStructure .Columns .neos-nodetypes-text {
  font-size: 0.8rem;
  min-height: 68px;
}

.AdministrativeStructure .Columns {
  background: #ffffff;
  border: 1px solid var(--clr-blue);
  margin: 0 2px;
}

.AdministrativeStructure .Columns .neos-nodetypes-text:first-of-type {
  font-size: 1rem;
  margin-bottom: 0;
}

.AdministrativeStructure .Columns .AccordionItem-title {
  color: var(--clr-blue);
  font-size: 0.9rem;
  font-weight: 100;
  text-transform: initial;
}

.AdministrativeStructure .Columns .AccordionItem-title .AccordionItem-icon {
  font-size: 1.5rem;
}

.AdministrativeStructure .Columns .AccordionItem-title > div span {
  display: block;
}

.AdministrativeStructure .Columns .AccordionItem-title > div span.subTitle {
  color: #000000;
}

/* ============================== TABLE ============================== */

figure.table table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px double #b3b3b3;
}

figure.table table td,
figure.table table th {
  min-width: 2em;
  padding: 0.4em;
  border: 1px solid #d9d9d9;
}

figure.table table th {
  font-weight: 700;
  background: #fafafa;
}

@media screen and (max-width: 992px) {
  figure.table {
    overflow-x: auto;
  }

  figure.table table {
    width: 100%;
  }

  figure.table table thead tr th:first-of-type {
    width: 130px;
  }
}

/* ============================== SITEMAP ============================== */
.Sitemap-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

.Sitemap-nodeItem {
  position: relative;
  flex-basis: 33%;
  list-style-type: none;
  list-style-position: inside;
  padding-left: 50px;
}

.Sitemap-nodeItem:nth-of-type(n + 4) {
  margin-top: 40px;
}

.Sitemap-nodeSecondLevelItem {
  list-style-type: none;
  list-style-position: inside;
}

.Sitemap-nodeItem > a {
  position: relative;
  font-size: 38px;
  text-decoration: none;
}

.Sitemap-nodeItem > a::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 1px;
  background-color: #365a00;
  pointer-events: none;
  left: -50px;
  top: 50%;
}

.Sitemap-nodeSecondLevel {
  position: relative;
}

.Sitemap-nodeSecondLevel::before {
  content: '';
  position: absolute;
  height: calc(100% + 10px);
  width: 1px;
  left: -50px;
  pointer-events: none;
  top: -25px;
  background-color: #365a00;
}

.Sitemap-nodeSecondLevelItem {
  position: relative;
  padding-left: 20px;
}

.Sitemap-nodeSecondLevelItem + .Sitemap-nodeSecondLevelItem {
  margin-top: 10px;
}

.Sitemap-nodeSecondLevelItem > a::before {
  content: '';
  position: absolute;
  width: 60px;
  pointer-events: none;
  height: 1px;
  background-color: #365a00;
  left: -50px;
  top: 14px;
}

.Sitemap-nodeSecondLevelItem > a {
  text-decoration: none;
  font-size: 22px;
}

.Sitemap-nodeThirdLevelItem {
  padding-left: 20px;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 10px;
}

.Sitemap-nodeThirdLevelItem > a {
  text-decoration: none;
}

/* ============================== ICON LIST ============================== */
.IconList.IconList--centered {
  display: flex;
  justify-content: center;
}

.IconList.IconList--grid > div {
  display: flex;
  flex-wrap: inherit;
}

.IconList.IconList--grid > div > div {
  width: 25%;
}

.IconList .Button + .Button {
  margin-left: 10px;
}

@media screen and (max-width: 768px) {
  .IconList.IconList--grid > div > div {
    width: 50%;
    padding: 30px;
  }
}

@media screen and (max-width: 576px) {
  .IconList.IconList--grid > div > div {
    padding: 10px;
  }
}

/* ============================== MAP BUTTON ============================== */
.MapButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 104px;
  min-width: 104px;
  height: 85px;
  border-radius: 10px;
  font-size: 12px;
  background: #ffffff;
  color: var(--clr-primary) !important;
  margin: 15px 0;
}

.MapButton svg {
  margin-bottom: 10px;
  font-size: 32px;
}

/* ============================== PRESS RELEASES ============================== */

.is-Hidden {
  display: none;
}

.CurrentPressReleases-filterWrapper {
  margin-bottom: 40px;
}

.CurrentPressReleases-filterTitle {
  font-size: 26px;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--clr-blue);
}

.CurrentPressReleases-filterOption,
.CurrentPressReleases-filterOption-all {
  background: rgba(0, 83, 155, 0.1) !important;
  border: 0;
  padding: 10px 12px;
  display: inline-flex;
  justify-content: center;
  margin: 3px;
  align-items: center;
  color: var(--clr-blue) !important;
}

.CurrentPressReleases-filterOption.is-Active,
.CurrentPressReleases-filterOption-all.is-Active {
  background: var(--clr-blue) !important;
  color: #ffffff !important;
}

.CurrentPressReleases-resultsWrapper .Masonry-article {
  height: 100%;
}

/* ============================== ACCESSIBILITY ============================== */

.Header-containerTop-accessibility {
  position: relative;
  width: 100%;
}

@media screen and (max-width: 992px) {
  .HeaderWeatherContainer,
  .Header-containerTop-accessibility {
    display: none;
  }
}

.Header-containerTop-accessibility ul {
  background: #fff;
  border: 1px solid;
  /* display: none; */
  left: -70px;
  list-style: none;
  opacity: 0;
  padding: 15px;
  padding-top: 85px;
  position: absolute;
  top: -15px;
  transition: all 0.3s;
  width: 270px;
  z-index: -1;
}
.Header-containerTop-accessibility ul.active {
  opacity: 1;
  z-index: 10;
}

.Header-containerTop-accessibility ul li {
  margin-top: 15px;
}

.Header-containerTop-accessibility ul li:first-child {
  margin-top: 0;
}

.Header-containerTop-accessibility ul li > .icon {
  float: left;
}

.Header-containerTop-accessibility ul li > div {
  margin-left: 45px;
}

.Header-containerTop-accessibility ul li > div span {
  cursor: pointer;
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
}

@media screen and (max-width: 992px) {
  .Header-containerTop-accessibility ul {
    left: inherit;
    right: -15px;
    width: 240px;
  }
}

@media screen and (max-width: 850px) {
  .Header-containerTop-accessibility {
    display: none;
  }
}

.zoom-0 {
  zoom: 1;
  -moz-transform: scale(1);
  -moz-transform-origin: 0 0;
}
.zoom-1 {
  zoom: 1.1;
  -moz-transform: scale(1.1);
  -moz-transform-origin: 0 0;
}

.zoom-2 {
  zoom: 1.2;
  -moz-transform: scale(1.2);
  -moz-transform-origin: 0 0;
}

.zoom-3 {
  zoom: 1.3;
  -moz-transform: scale(1.3);
  -moz-transform-origin: 0 0;
}

/* ============================== OVERRIDES ============================== */
.neos-nodetypes-text h1 {
  font-size: 38px;
  font-weight: 500;
  color: var(--clr-blue);
}

.neos-nodetypes-text h2 {
  position: relative;
  color: #c90044;
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 35px;
}

.neos-nodetypes-text h2::after {
  content: '';
  background-image: url('../Images/X.svg');
  background-size: cover;

  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translate(-50%, 100%);

  width: 21px;
  height: 27px;
}

.neos-nodetypes-text h3 {
  position: relative;
  color: var(--clr-blue);
  font-size: 22px;
  font-weight: 500;
  padding-left: 30px;
  margin-bottom: 5px;
}

.neos-nodetypes-text h3::before {
  content: '';
  background-image: url('../Images/X.svg');
  background-size: cover;

  position: absolute;
  top: 50%;
  transform: translate(-150%, -50%);

  width: 21px;
  height: 27px;
}

.neos-nodetypes-text ul {
  list-style: none;
}

.neos-nodetypes-text ul li {
  margin-left: 25px;
  margin-bottom: 5px;
}

.neos-nodetypes-text ul li::before {
  content: '';
  background-image: url('../Images/X.svg');
  width: 16px;
  height: 25px;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  float: left;
  margin-right: 10px;
  margin-left: -25px;
}

.neos-nodetypes-text p a {
  text-decoration: underline;
}

.row {
  margin-right: -5px;
  margin-left: -5px;
}

.row.equal-height .col > div,
.row.equal-height .col > div > div:only-child,
.row.equal-height .col > div > a:only-child {
  height: 100%;
}

.row.equal-height .col > div .Button:not(.Button--big) a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.col-xs,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9 {
  padding-right: 5px;
  padding-left: 5px;
}

.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-offset-0,
.col-sm-offset-1,
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12,
.col-sm-offset-2,
.col-sm-offset-3,
.col-sm-offset-4,
.col-sm-offset-5,
.col-sm-offset-6,
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9 {
  padding-right: 5px;
  padding-left: 5px;
}

.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-offset-0,
.col-md-offset-1,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9 {
  padding-right: 5px;
  padding-left: 5px;
}

.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-offset-0,
.col-lg-offset-1,
.col-lg-offset-10,
.col-lg-offset-11,
.col-lg-offset-12,
.col-lg-offset-2,
.col-lg-offset-3,
.col-lg-offset-4,
.col-lg-offset-5,
.col-lg-offset-6,
.col-lg-offset-7,
.col-lg-offset-8,
.col-lg-offset-9 {
  padding-right: 5px;
  padding-left: 5px;
}

/* ============================== WEB SPEAKER ============================== */
.ReadSpeaker {
  max-width: 1480px;
  padding: 0 20px;
  margin: 0 auto;
}

.ReadSpeaker .rsbtn_play {
  background: rgba(0, 83, 155, 0.1) !important;
  border: 0 !important;
}

/* ============================== FORM SPEAKER ============================== */
.fr_button {
  background: rgba(0, 83, 155, 0.1) !important;
  border: 0 !important;
}

.fr_button #fr_listenicon {
  margin-right: 10px;
}

/* ============================== RSS FEED ============================== */
.RssFeed .RssFeed-item {
  display: flex;
}

.RssFeed .RssFeed-item .image {
  padding-right: 15px;
  max-width: 300px;
}

@media screen and (max-width: 768px) {
  .RssFeed .RssFeed-item {
    display: block;
  }
}

/* ============================== COPYRIGHT ============================== */

.copyright {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: #fff;
  font-size: 10px;
  padding: 2px;
  padding-bottom: 0;
  max-width: 150px;
}

/* ============================== FONTS ============================== */

@import url('http://fast.fonts.net/t/1.css?apiType=css&projectid=0acc0077-5b3f-4f09-8a97-e4be6c0615fd');
@font-face {
  font-family: 'ClassicGrotesque';
  font-weight: 400;
  src: url('../Fonts/83601842-9564-4341-9d95-1742ee7f146f.woff2') format('woff2'),
    url('../Fonts/c6b0c4e7-468c-4416-bf4f-c8254e52ec05.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'ClassicGrotesque';
  font-weight: 500;
  src: url('../Fonts/a4fbdcf6-b3f0-4135-b590-aea03d0ec6af.woff2') format('woff2'),
    url('../Fonts/f94b2377-9dc9-4479-9f47-fe1c6c0f8bb8.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'ClassicGrotesque';
  font-weight: 500;
  font-style: italic;
  src: url('../Fonts/1f8cb354-202c-457a-9dff-001104ed06f3.woff2') format('woff2'),
    url('../Fonts/c460b776-24e2-47f4-a932-3ee0ae1057f5.woff') format('woff');
  font-display: swap;
}

/* ============================== PICTURE ============================== */

.Picture {
  display: block;
  width: 100%;
}

.Picture img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ============================== SVG ============================== */
.icon {
  /* Setze das Icon auf die Text-Grundlinie */
  position: relative;
  top: 0.125rem;

  /* Verhindere, dass das Icon schrumpft in einem Flex-Container */
  flex-shrink: 0;

  /* Skaliere das Icon auf die Schriftgröße des Elternelements */
  height: 1em;
  width: 1em;

  /* Lass das Icon die Farbe des Elternelements erben */
  fill: currentColor;

  /* Wird das Icon in einem Link verwendet, welcher die Textfarben-Transition hat,
	dann verwende diese Transition auch für den Fall-Wert */
  transition: fill 0.3s;
}

/* Themenseiten Header */
.HeaderSmallTopic-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  & > * {
    flex: 1;
  }

  @media (--tablet) {
    flex-direction: row;
    justify-content: space-between;
    min-height: 200px;
  }
}

.Header-optionsFlags {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;

  & .HeaderSmallTopic-flagsTitle {
    display: block;
  }

  @media (--tablet) {
    & .HeaderSmallTopic-flagsTitle {
      display: none;
      margin-right: 10px;
    }
  }
}

.HeaderSmallTopic-flags {
  display: none;

  & a {
    display: block;
    width: 30px;

    & img {
      min-width: 30px;
      max-width: 30px;
      min-height: 20px;
      max-height: 20px;
    }
  }

  & a + a {
    margin-left: 10px;
  }

  @media (--tablet) {
    display: flex;
  }
}

.HeaderSmallTopic-claim {
  display: flex;
  align-items: center;

  & img {
    display: inline-block;
    margin: 0 auto;
  }
}

.HeaderSmallTopic-logoWrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40px;

  @media (--tablet) {
    margin-top: 0;
  }
}

#page .Header-top::before {
  background: var(--clr-primary);
}

#page .Header-top {
  display: flex;
  padding: 20px 0 15px;
}

#page .Header-bottom {
  display: none;
}

@media screen and (max-width: 767px) {
  .Header-optionsFlags:hover .HeaderSmallTopic-flags,
  .Header-optionsFlags:active .HeaderSmallTopic-flags {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: white;

    & a {
      display: inline-flex;
      width: 105%;
    }

    & a + a {
      margin-top: 30px;
      margin-left: 0;
    }
  }
}

.HeaderSmallTopic-flagsLabel {
  display: flex;
  margin-left: 5px;

  @media (--tablet) {
    display: none;
  }
}

a.HeaderSmallTopic-logo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 30px 0;
  text-align: center;
  text-decoration: none;
  color: var(--clr-primary);
  transition: all 0.5s;
}

a.HeaderSmallTopic-logo > span {
  font-family: var(--font-headline);
  font-size: 18px;
}

.HeaderSmallTopic-logo img.HeaderSmallTopic-logo {
  width: 150px;
}

@media (--tablet) {
  /* .HeaderSmallTopic-logo img.HeaderSmallTopic-logo {
    width: inherit;
  } */

  a.HeaderSmallTopic-logo > span {
    font-size: 23px;
  }
}

#page .HeaderSmallTopic-logo.Page img.HeaderSmallTopic-logo {
  width: 258px;
}

.HeaderSmallTopic-options {
  position: absolute;
  z-index: 2;
  right: 15px;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  box-sizing: border-box;
  width: 50%;
  height: 100%;

  @media (--tablet) {
    width: unset;
  }
}

.Header-bottom {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 200px;
  background-color: var(--clr-greyLight);
}

.Header-search {
  position: absolute;
  bottom: 72px;
  text-align: center;
}

.Header-image::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 7px;
  background: linear-gradient(to right, #004576 0, #0c63a1 50%, #0c63a1 100%);
}

.HeaderSmallTopic-logo span {
  font-size: 18px;
}

.HeaderSmallTopic-logoImg {
  max-width: 80%;
}

/* Image Parallax */
.parallax-active {
  position: relative;
  overflow: hidden;
}

.parallax-active img {
  transform: scale(1.5);
  transition: transform 1.75s ease-in-out !important;
}

.parallax-active.is--scale img {
  transform: scale(1);
}

.Button-icon {
  display: flex;
  flex-direction: column;
  align-items: center;

  & img,
  i {
    max-width: 60px;
  }
}

/* Counter */

.Counter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 250px;
  font-size: 50px;
  font-weight: 900;
  background: none;
  color: var(--clr-blue);
}

.Counter-background {
  background: var(--clr-middleBlue);
}

.Counter-down {
  flex-direction: column;
}

/* Libary */

.row.equal-height.libary .col {
  margin-top: 15px !important;
}