@media only screen and (max-width: 1320px) {
  #footer, #breadcrumb {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 1280px) {
  --gap:20px;
  #breadcrumb {
    margin-left: 20px;
  }
  #news {
    --gap:30px;
    column-gap: var(--gap);
    row-gap: var(--gap);
  }
  #news .item {
    width: calc(50%  - var(--gap));
  }
  #news, #veranstaltungen {
    justify-content: left;
  }
  #formular.fl_ct div {
    width: 100%;
  }
  #logo_ct {
    margin-left: 20px;
  }
  #navi_ct .hauptnavigation ul {
    padding: 0 20px;
  }
  #navi_ct .hauptnavigation ul li .sub_ct ul {
    flex-direction: column;
  }
  #navi_ct .hauptnavigation ul li .sub_ct ul li {
    margin-bottom: 10px;
  }
  #navi_ct .hauptnavigation ul li .sub_ct ul li ul li {
    margin-bottom: 0;
  }
  #kopfgrafik #logo_ct {
    width: 11vw;
  }
  .box_ct {
    --gap:20px;
  }
  .box_ct .item {
    margin-bottom: var(--gap);
  }
  .box_ct .item.sp5, .box_ct .item.sp4, .box_ct .item.sp3 {
    width: calc(50% - var(--gap));
  }
  #footer ul {
    flex-direction: column;
  }
  #footer ul li {
    margin-bottom: 20px;
  }
  #footer ul li ul li {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 840px) {
  #kopfgrafik #logo_ct {
    width: 20vw;
    top: 13px;
  }
  #treffs {
    margin-bottom: 30px;
    --gap:20px;
    column-gap: var(--gap);
    row-gap: var(--gap);
  }
  #treffs .item {
    width: calc(50%  - var(--gap));
  }
  #treffs .item .text {
    padding: 5px 3px 5px 10px;
  }
  #content .treff_detail {
    flex-direction: column-reverse;
  }
  #content .treff_detail .li, #content .treff_detail .re {
    width: 100%;
  }
  #content .treff_detail .re {
    margin-top: 20px;
  }
  #content .mitarbeiter_uebersicht .item {
    width: 100%;
  }
  #content .veranstaltungen_detail .flex_ct {
    display: block;
  }
  #content .treff_detail .qt_ct .bild, #content .treff_detail .qt_ct .text {
    width: 100%;
  }
  #content .treff_detail .ma_ct .item {
    width: 100%;
  }
  #content .treff_detail .h2_ct {
    display: block;
  }
  #content .treff_detail .h2_ct div {
    line-height: 2em;
  }
  #veranstaltungen .item {
    width: calc(50% - 30px);
  }
  .box_ct .item .fl_ct .bild, .box_ct .item .fl_ct .text {
    width: 100%;
  }
  #navi_ct {
    display: none;
  }
  #logo_mobil {
    display: block;
  }
  #burger {
    display: block;
  }
  .galerie {
    --gap:20px;
    justify-content: space-between;
  }
  .galerie .item {
    width: calc(50%  - var(--gap));
  }
  .galerie.sp4 .item {
    width: calc(50%  - var(--gap));
  }
  #nebennavigation {
    display: none;
  }
  #nebennavigation_mobil {
    display: block;
  }
  #formular {
    width: 100%;
  }
  #formular.fl_ct div {
    width: 100%;
  }
  #formular.fl_ct div.sb {
    width: 100%;
  }
  #formular.veranstaltungen {
    width: 100%;
  }
  #footer ul {
    padding-left: 10px;
  }
  #footer #footernavigation {
    flex-wrap: wrap;
  }
  #footer #footernavigation .item.sp3, #footer #footernavigation .item.sp4, #footer #footernavigation .item.sp5, #footer #footernavigation .item.plus {
    width: 100% !important;
    margin-bottom: 20px;
  }
  .alleangebote .item {
    /*	padding-left:50px;*/
  }
  #footer #socialmedia {
    top: 0;
  }
  .flexlayout {
    display: block;
  }
  .flexlayout > div {
    margin-right: 0px;
  }
  .flexlayout.s_1_1_1 div, .flexlayout.s_1_2_0 div, .flexlayout.s_1_0_0 div, .flexlayout.s_2_1_0 div {
    flex: none;
    width: 100% !important;
  }
}
@media only screen and (max-width: 610px) {
  #kopfgrafik #logo_ct {
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  #content {
    padding: 30px 10px 30px 10px;
  }
  #content .mitarbeiter_uebersicht .item {
    display: block;
  }
  #content .mitarbeiter_uebersicht .item .bild {
    width: 100%;
  }
  #kopfgrafik img {
    width: 100%;
  }
  .slick-dotted.slick-slider {
    margin-bottom: 0 !important;
  }
  .galerie .item {
    width: 100%;
  }
  .galerie.sp4 .item {
    width: calc(100%);
  }
  #treffs, #news, #veranstaltungen {
    justify-content: space-between;
  }
  #news .item {
    width: 100%;
  }
  #formular input[type="submit"].kl {
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  #formular select {
    width: 100%;
  }
}
@media only screen and (max-width: 500px) {
  #treffs .item, #news .item, #veranstaltungen .item {
    width: 100%;
  }
}