@import url("https://fonts.verwaltungsportal.de/import/?family=Noto+Sans:400,400i,700,700i");

html {
   max-width: 1930px;
   margin-left: auto;
   margin-right: auto;
   background: #c7e4f0;
}

body {
   font-family: "Noto Sans", sans-serif;
   font-weight: 400;
   color: #17336b;
   background: #fff;
   font-size: 1rem;
   /* 1rem = 16px */
   line-height: 1.5;
   box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
   body {
      font-size: 1.125rem;
   }
}

@media (min-width: 1200px) {
   body {
      font-size: 1.25rem;
   }
}

a {
   color: #006f94;
}

a:hover,
a:focus {
   color: #006f94;
   text-decoration: underline;
}

b,
strong {
   font-weight: 700;
}

main a {
   text-decoration: underline;
}

#overflow {
   overflow: clip;
}

/* #region --------------------------------------- logo ----------------------------------------- */

#logo {
   display: inline-block;
   background: #ffffff;
   width: 100%;
   width: calc(100% + 15px);
   padding: 6px 13px 35px 13px;
   border-bottom-right-radius: 75px;
   border-bottom-left-radius: 75px;
   transition: border-radius 300ms;
}

.is-sticky #logo {
   border-bottom-right-radius: 75px;
   border-bottom-left-radius: 75px;
}

#logo img {
   display: block;
   margin: 0 auto;
}

@media (max-width: 991px) {
   #logo {
      margin-bottom: 25px;
   }

   #logo img {
      max-width: 100%;
   }

   #logo .row {
      margin-left: -30px;
      margin-right: -30px;
   }
}

/* #endregion ----------------------------------- logo ------------------------------------------ */

/* #region ------------------------------------ navigation -------------------------------------- */

/* burgermenu for tablet */

#burgerButton {
   color: #1a1a1a;
}

@media (max-width: 991px) {
   .dropdown-toggle-button-wrapper, .dropdown-toggle-button-wrapper2 {
      color: #17336b;
   }

   #menu {
      background: #006f94;
      position: static !important;
   }

   #burgerButton {
      font-size: 0;
      display: block;
      height: 50px;
      width: 60px;
      border-radius: 2px;
      padding: 6px 8px;
      cursor: pointer;
      background: #fff;
      border: none !important;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
   }

   #burgerButtonInner2,
   #burgerButton:after,
   #burgerButtonInner {
      background-color: #006f94;
      color: #ffffff;
      border-radius: 2px;
      position: absolute;
      width: 40px;
      height: 3px;
      left: 10px;
      -webkit-transition: transform 200ms linear, opacity 200ms linear;
      -moz-transition: transform 200ms linear, opacity 200ms linear;
      -ms-transition: transform 200ms linear, opacity 200ms linear;
      -o-transition: transform 200ms linear, opacity 200ms linear;
      transition: transform 200ms linear, opacity 200ms linear;
   }

   #burgerButton[aria-expanded="true"] #burgerButtonInner {
      -webkit-transform: rotate(-45deg) translate(-6px, 6px);
      transform: rotate(-45deg) translate(-6px, 6px);
   }

   #burgerButton[aria-expanded="true"] #burgerButtonInner2 {
      opacity: 0;
   }

   #burgerButton[aria-expanded="true"]:after {
      -webkit-transform: rotate(45deg) translate(-4px, -6px);
      transform: rotate(45deg) translate(-4px, -6px);
   }

   #burgerButtonInner {
      top: 16px;
   }

   #burgerButtonInner2 {
      top: 24px;
   }

   #burgerButton:after {
      top: 32px;
      content: "";
      display: block;
   }

   .navbar-nav {
      padding: 20px 10px;
   }

   .navbar-collapse {
      top: 0;
      background: #006f94;
      position: fixed;
      left: -100%;
      bottom: 0;
      z-index: 100;
      height: auto !important;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      overflow-y: auto;
      -webkit-transition: left 300ms linear, opacity 300ms linear;
      -moz-transition: left 300ms linear, opacity 300ms linear;
      -ms-transition: left 300ms linear, opacity 300ms linear;
      -o-transition: left 300ms linear, opacity 300ms linear;
      transition: left 300ms linear, opacity 300ms linear;
   }

   .navbar-collapse[aria-expanded="true"],
   .navbar-collapse.in {
      left: 0;
      opacity: 1;
      pointer-events: auto;
   }

   .navbar-header {
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 101;
   }

   .navbar-toggle::before {
      content: "";
      opacity: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 0;
      z-index: -1;
      display: block;
      background-color: rgba(0, 0, 0, 0.5);
      -webkit-transition: width 300ms linear, opacity 300ms linear;
      -moz-transition: width 300ms linear, opacity 300ms linear;
      -ms-transition: width 300ms linear, opacity 300ms linear;
      -o-transition: width 300ms linear, opacity 300ms linear;
      transition: width 300ms linear, opacity 300ms linear;
   }

   .navbar-toggle[aria-expanded="true"]::before {
      opacity: 1;
      width: 90px;
   }

   .dropdown-toggle-button-wrapper {
      top: 11px;
   }

   .dropdown-toggle-button-wrapper2 {
      top: 1px;
   }
}

@media (min-width: 575px) and (max-width: 991px) {
   .navbar-collapse {
      width: 60%;
   }

   .navbar-collapse.collapse.in:after,
   .navbar-toggle[aria-expanded="true"]::before {
      width: 40%;
   }
}

/* menu desktop */

@media (min-width: 992px) {
   #menu {
      -webkit-transition: background 300ms linear, padding 300ms linear;
      -moz-transition: background 300ms linear, padding 300ms linear;
      -ms-transition: background 300ms linear, padding 300ms linear;
      -o-transition: background 300ms linear, padding 300ms linear;
      transition: background 300ms linear, padding 300ms linear;
   }

   .is-sticky #menu {
      background: #006f94;
      border-bottom: 2px solid #fff;
      box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);

      left: auto !important;
   }

   #menu-sticky-wrapper {
      z-index: auto;
   }

   .is-sticky#menu-sticky-wrapper {
      z-index: 101;
   }

   nav.horizontally .navbar-nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
      justify-content: space-between !important;
      -webkit-box-align: center !important;
      -ms-flex-align: center !important;
      align-items: center !important;
      flex-wrap: wrap;
   }

   nav.horizontally li[class*="toplevel"]>.dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
   }

   nav.horizontally li[class*="secondlevel"]>.dropdown-menu {
      position: absolute;
      left: 100%;
      top: 0;
   }

   nav.horizontally :is([class*="toplevel"], [class*="secondlevel"]) {
      position: relative;
   }

   .navbar-default .navbar-nav li :is([class*="toplevel"] > ul, [class*="secondlevel"] > ul) {
      display: block !important;
      pointer-events: none;
      opacity: 0;
      -webkit-transition: opacity 300ms linear;
      -moz-transition: opacity 300ms linear;
      -ms-transition: opacity 300ms linear;
      -o-transition: opacity 300ms linear;
      transition: opacity 300ms linear;
   }

   .navbar-default :is(.open > .dropdown-menu, .navbar-nav li[class*="toplevel"]:hover > ul, .navbar-nav li[class*="secondlevel"]:hover > ul, .navbar-nav li[class*="secondlevel"] > ul[style*="block"]) {
      pointer-events: auto !important;
      opacity: 1 !important;
   }

   .navbar-default .navbar-nav :is(li[class*="toplevel"]:focus-within > ul, li[class*="secondlevel"]:focus-within > ul) {
      pointer-events: auto !important;
      opacity: 1 !important;
   }

   .navbar-default .nav .open>.dropdown-menu {
      pointer-events: none !important;
      opacity: 0 !important;
   }

   .navbar-default .navbar-nav :is(li[class*="toplevel"]:hover > ul, li[class*="secondlevel"]:hover > ul) {
      z-index: 1003;
   }
}

/* ---------------------------------------------- toplevel ---------------------------------------------- */

.navbar-default li[class*="toplevel"]>a {
   color: #fff;
   font-weight: 700;
   text-align: left;
   padding: 12px 15px;
   position: relative;
   font-size: clamp(1rem, 1.25vw, 1.125rem);
   line-height: 1.2;
   text-decoration: none;
   border: 2px solid transparent;
   border-radius: 10px;
   transition: border 300ms, border-radius 200ms;
}

@media (max-width: 991px) {
   nav.horizontally li[class*="toplevel"]+li {
      margin-top: 4px;
   }

   nav.horizontally li[class*="toplevel"]>a.dropdown-toggle {
      padding-right: 35px;
   }
}

@media (min-width: 992px) {
   .navbar-default li[class*="toplevel"]+li {
      margin-left: 1px;
   }

   .navbar-default li[class*="toplevel"]>a {
      padding: 8px 15px 6px 15px;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 100%;
   }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 992px) {
   .navbar-default li[class*="toplevel"]>a {
      display: block;
   }
}

/* -------------------------------------------- toplevel-over ------------------------------------------- */

.navbar-default li[class*="toplevel"]:hover>a,
.navbar-default li[class*="toplevel"]>a:hover,
.navbar-default li[class*="toplevel"]>a:focus,
.navbar-default li[class*="toplevel"].open>a,
.navbar-default li[class*="toplevel"].open>a:hover,
.navbar-default li[class*="toplevel"].open>a:focus,
.navbar-default li[class*="toplevel"][class*="_over"]>a,
.navbar-default li[class*="toplevel"][class*="_over"]>a:hover,
.navbar-default li[class*="toplevel"][class*="_over"]>a:focus {
   border-color: #c7e4f0;
   border-radius: 100px;
}

.navbar-default li[class*="toplevel"]:focus-within>a {
   border-color: #c7e4f0;
   border-radius: 100px;
}

@media (max-width: 991px) {

   .navbar-default li[class*="toplevel"]:hover>a,
   .navbar-default li[class*="toplevel"]>a:hover,
   .navbar-default li[class*="toplevel"]>a:focus,
   .navbar-default li[class*="toplevel"].open>a,
   .navbar-default li[class*="toplevel"].open>a:hover,
   .navbar-default li[class*="toplevel"].open>a:focus,
   .navbar-default li[class*="toplevel"][class*="_over"]>a,
   .navbar-default li[class*="toplevel"][class*="_over"]>a:hover,
   .navbar-default li[class*="toplevel"][class*="_over"]>a:focus {
      border-radius: 15px;
   }

   .navbar-default li[class*="toplevel"]:focus-within>a {
      border-radius: 15px;
   }
}

/* -------------------------------------- secondlevel + thirdlevel dropdown-box -------------------------------------- */

.navbar-default :is([class*="toplevel"] > ul, [class*="secondlevel"] > ul) {
   background-color: #ffffff;
   border: 2px solid #17336b;
   border-radius: 30px;
}

@media (max-width: 991px) {
   .navbar-default li[class*="toplevel"]>ul {
      padding: 10px 0;
   }

   .navbar-default li[class*="secondlevel"]>ul {
      margin: 10px;
   }

   .navbar-default :is([class*="toplevel"] > ul, [class*="secondlevel"] > ul) {
      border-radius: 15px;
   }
}

@media (min-width: 992px) {
   .navbar-default :is(li[class*="toplevel"] > ul, li[class*="secondlevel"] > ul) {
      padding-top: 18px;
      padding-bottom: 18px;
   }

   .navbar-default li[class*="toplevel"]>ul {
      margin-top: 20px;
   }

   .navbar-default li[class*="secondlevel"]>ul {
      margin-top: -20px;
      margin-left: 20px;
   }

   .navbar-default li[class*="toplevel"]>ul::before,
   .navbar-default li[class*="secondlevel"]>ul::before {
      content: "";
      position: absolute;
      display: block;
   }

   .navbar-default li[class*="toplevel"]>ul::before {
      height: 22px;
      left: 0;
      right: 0;
      top: -22px;
   }

   .navbar-default li[class*="secondlevel"]>ul::before {
      width: 22px;
      top: 0;
      bottom: 0;
      left: -22px;
   }
}

/* --------------------------------------------- secondlevel + thirdlevel -------------------------------------------- */

.navbar-default :is(li[class*="secondlevel"] > a, li[class*="thirdlevel"] > a) {
   padding: 8px 15px;
   color: #17336b;
   text-align: left;
   font-size: 1rem;
   line-height: 1.2;
   text-decoration: none;
   position: relative;
   font-weight: 400;
}

@media (min-width: 992px) {
   .navbar-default :is(li[class*="secondlevel"] > a, li[class*="thirdlevel"] > a) {
      padding: 8px 30px;
   }
}

@media (max-width: 991px) {
   nav.horizontally li[class*="secondlevel"]>a.dropdown-toggle2 {
      padding-right: 35px;
   }
}

/* ------------------------------------------ secondlevel + thirdlevel over ------------------------------------------ */

.navbar-default li[class*="secondlevel"]:hover>a,
.navbar-default li[class*="secondlevel"]>a:hover,
.navbar-default li[class*="secondlevel"]>a:focus,
.navbar-default li[class*="secondlevel"].open>a,
.navbar-default li[class*="secondlevel"].open>a:hover,
.navbar-default li[class*="secondlevel"].open>a:focus,
.navbar-default li[class*="secondlevel"][class*="_over"]>a,
.navbar-default li[class*="secondlevel"][class*="_over"]>a:hover,
.navbar-default li[class*="secondlevel"][class*="_over"]>a:focus,
.navbar-default li[class*="thirdlevel"]:hover>a,
.navbar-default li[class*="thirdlevel"]>a:hover,
.navbar-default li[class*="thirdlevel"]>a:focus,
.navbar-default li[class*="thirdlevel"].open>a,
.navbar-default li[class*="thirdlevel"].open>a:hover,
.navbar-default li[class*="thirdlevel"].open>a:focus,
.navbar-default li[class*="thirdlevel"][class*="_over"]>a,
.navbar-default li[class*="thirdlevel"][class*="_over"]>a:hover,
.navbar-default li[class*="thirdlevel"][class*="_over"]>a:focus {
   color: #006f94;
}

.navbar-default li[class*="secondlevel"]:focus-within>a,
.navbar-default li[class*="thirdlevel"]:focus-within>a {
   color: #006f94;
}

/* #endregion -------------------------------- navigation --------------------------------------- */

/* #region -------------------------------------- search ---------------------------------------- */

#search {
   display: block;
   position: relative;
   color: #17336b;
   line-height: 1;
   overflow: hidden;
}

.is-sticky #search {
   color: #c7e4f0;
}

@media (min-width: 992px) {
   #search {
      z-index: 101;
      max-width: 260px;
      -webkit-transition: margin 300ms linear, width 300ms linear;
      -moz-transition: margin 300ms linear, width 300ms linear;
      -ms-transition: margin 300ms linear, width 300ms linear;
      -o-transition: margin 300ms linear, width 300ms linear;
      transition: margin 300ms linear, width 300ms linear;
   }
}

@media (max-width: 991px) {
   #search {
      color: #c7e4f0;
   }
}

#search label {
   font-weight: 700;
   padding: 8px 15px 6px 0;
   line-height: 1.2;
   font-size: 1.25rem;
}

#search_input {
   color: #fff;
   background: #006f94;
   border: 0;
   border-radius: 100px;
   font-style: normal;
   padding: 11px 36px 12px 12px;
   width: 100%;
   font-size: 1rem;
}

#search_submit {
   width: 36px;
   background: #006f94 url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='M39.75 43.35 26.3 29.95q-1.45 1.15-3.425 1.8-1.975.65-4.275.65-5.75 0-9.75-4t-4-9.65q0-5.65 4-9.65t9.7-4q5.65 0 9.625 4 3.975 4 3.975 9.65 0 2.25-.625 4.175-.625 1.925-1.875 3.625l13.5 13.4ZM18.55 27.7q3.75 0 6.325-2.625t2.575-6.325q0-3.75-2.575-6.35Q22.3 9.8 18.55 9.8t-6.375 2.6Q9.55 15 9.55 18.75q0 3.7 2.625 6.325T18.55 27.7Z' fill='%23fff'/%3E%3C/svg%3E") center / 22px auto no-repeat;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
   padding: 0;
   cursor: pointer;
   border: none;
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   font-size: 0;
   -webkit-transition: background-color 300ms linear;
   -moz-transition: background-color 300ms linear;
   -ms-transition: background-color 300ms linear;
   -o-transition: background-color 300ms linear;
   transition: background-color 300ms linear;
}

.is-sticky #search_input,
.is-sticky #search_submit {
   border: 2px solid #c7e4f0;
}

@media (max-width: 991px) {

   #search_input,
   #search_submit {
      border: 2px solid #c7e4f0;
   }
}

#search_submit:hover,
#search_submit:focus,
#search_input:hover,
#search_input:focus {
   background-color: #06608a;
}

#search_input::-ms-input-placeholder {
   color: #fff !important;
   opacity: 1;
}

#search_input::-webkit-input-placeholder {
   color: #fff !important;
   opacity: 1;
}

#search_input::-moz-placeholder {
   opacity: 1;
}

#search_input:-moz-placeholder {
   opacity: 1;
}

/* #endregion ----------------------------------- search --------------------------------------- */

/* #region -------------------------------------- header ---------------------------------------- */

header::before {
   content: "";
   display: block;
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   bottom: 99px;
   background: #006f94 url("../img/logo-wasserzeichen-gross.png") top 10px left -5px no-repeat;
   border-bottom-right-radius: 400px;
   pointer-events: none;
   width: 100%;
}

@media (min-width: 992px) {
   header::before {
      bottom: -40px;
   }
}

.index header::before {
   bottom: 99px;
}

@media (max-width: 991px) {
   header::before {
      border-bottom-right-radius: 20.8333vw;
   }
}

@media (min-width: 992px) {
   header::before {
      width: calc((992px + (100vw - 992px) / 2) - 83px);
   }
}

@media (min-width: 1200px) {
   header::before {
      width: calc((1200px + (100vw - 1200px) / 2) - 100px);
      max-width: 1452px;
   }
}

#menu>.row>*:first-child,
#headerpic>.row>*:first-child {
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
}

#menu>.row>*:first-child>* {
   position: relative;
   z-index: 101;
}

#headerpic>.row>*:first-child>* {
   position: relative;
   z-index: 3;
}

#menu>.row>*>.row>*:last-child {
   padding-right: 35px;
}

header,
header :is(h1, h2, h3, h4, h5, h6, a) {
   color: #fff;
}

#headerpic {
   padding: 4px 0 0px 0;
}

@media (max-width: 991px) {
   #headerpic {
      padding: 4px 0 30px 0;
   }
}

#social-media {
   font-size: 1rem;
   position: absolute;
   color: #17336b;
   text-align: center;
   isolation: isolate;
   padding-top: 35px;
   padding: 0 30px;
   margin-top: 40px;
}

#social-media .cleaner {
   display: none;
}

#social-media::before {
   content: "";
   position: absolute;
   z-index: -1;
   bottom: -50px;
   left: 50%;
   transform: translateX(-50%);
   background: #c7e4f0;
   width: 260px;
   height: 260px;
   border-radius: 1000px;
}

#social-media::after {
   content: "";
   position: absolute;
   z-index: -1;
   bottom: -50px;
   left: 50%;
   transform: translateX(-48%);
   width: 260px;
   height: 260px;
   outline: solid 1px #006f94;
   border-radius: 1000px;
}

@media (max-width: 991px) {
   #social-media {
      position: relative;
      z-index: 10;
      margin-top: -50px;
      padding: 0 30px;
      height: fit-content;
   }

   #social-media::before,
   #social-media::after {
      bottom: 50%;
      transform: translate(-50%, 50%);
      width: 150px;
      height: 150px;
   }

   #social-media::after {
      transform: translate(-48%, 50%);
   }
}

@media (max-width: 767px) {
   #social-media {
      margin-top: 30px;
   }
}

#social-media a {
   color: #17336b;
}

#social-media a {
   text-decoration: underline;
}

#social-media img+img,
#social-media a.has-image+a.has-image {
   margin-left: 8px;
}

/* header text */

#header-text {
   padding-top: clamp(30px, 3vw, 55px);
   padding-bottom: clamp(30px, 3vw, 55px);
   height: fit-content;
}

#header-text :is(h1, h2, h3, h4, h5, h6) {
   font-size: clamp(2.25rem, 5vw, 3.125rem);
   margin: 0;
   hyphens: auto;
   margin-right: 30px;
}

@media (min-width: 576px) {
   #header-text :is(h1, h2, h3, h4, h5, h6) {
      line-height: 0.9;
   }
}

@media (min-width: 768px) {
   #header-text :is(h1, h2, h3, h4, h5, h6) {
      line-height: 0.8;
   }
}

#header-text :is(h1, h2, h3, h4, h5, h6) {
   font-size: clamp(1.875rem, 4vw, 2.1875rem);
   font-style: normal;
   text-transform: none;
   display: inline-block;
}

#header-text :is(h4, h5, h6) {
   font-size: clamp(1.25rem, 4vw, 1.625rem);
}

.index #header-text :is(h1, h2, h3, h4, h5, h6) {
   padding-bottom: 15px;
}

body:not(.index) #header-text p {
   display: none;
   font-size: clamp(1rem, 1.9vw, 1.25rem);
}

#header-text :is(b, strong) {
   font-size: clamp(1rem, 1.9vw, 1.25rem);
}

@media (max-width: 992px) {
   #headerpic>.row> :first-child>.row {
      padding-top: clamp(50px, 6vw, 62px);
   }
}

/* #endregion ----------------------------------- header ---------------------------------------- */

/* #region -------------------------------------- banner ---------------------------------------- */

#slider {
   height: 300px;
   overflow: hidden;
   position: relative;
   border-radius: 1000px;
}

#slider>div>div {
   border-radius: 1000px;
}

.slider-wrapper .nivo-controlNav {
   bottom: auto !important;
   top: 15px;
}

@media (min-width: 768px) {
   #slider {
      overflow: visible;
      height: auto;
      width: 400px;
      height: 400px;
      margin: 0 auto;
   }

   #slider>div>div {
      border-radius: 1000px;
   }

   .slider-wrapper .nivo-controlNav {
      max-width: 400px;
      margin: 0 auto;
      bottom: auto;
      top: 15px;
   }

   .slider-wrapper {
      display: flex;
      justify-content: center;
   }
}

@media (min-width: 992px) {
   #slider {
      width: 400px;
      height: 400px;
   }

   .slider-wrapper .nivo-controlNav {
      max-width: 400px;
   }
}

#slider {
   overflow: visible;
}

#slider::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 1000px;
   outline: 2px solid #c7e4f0;
   transform: translate(-12px, 10px);
   z-index: 10;
   pointer-events: none;
}

@media (min-width: 992px) {
   #headerpic a.nivo-prevNav {
      left: 30px;
   }

   #headerpic a.nivo-nextNav {
      right: 30px;
   }
}

#headerpic {
   margin: 0 auto;
   position: relative;
   width: 100%;
}

.slider-mask {
   display: none;
}

.slider-wrapper {
   height: auto !important;
}

@media (min-width: 1200px) {
   .slider-wrapper {
      max-width: 600px;
      margin-left: auto;
      margin-right: -100px;
   }
}

.nivo-directionNav {
   pointer-events: none;
}

.nivo-directionNav>* {
   pointer-events: all;
}

/* #endregion ------------------------------------ banner --------------------------------------- */

/* #region ----------------------------------- news + events ------------------------------------ */

#events {
   position: relative;
   padding: clamp(30px, 3vw, 40px) 0 clamp(30px, 10vw, 100px) 0;
}

@media (min-width: 1200px) {
   #events {
      margin-top: -160px;
   }
}

#news {
   position: relative;
   isolation: isolate;
   padding-top: clamp(30px, 6vw, 100px);
   padding-bottom: clamp(30px, 3vw, 45px);
   background: linear-gradient(to bottom, #c7e4f0, #c7e4f0 60%, rgba(255, 255, 255, 0) 60%);
}

#news::after {
   content: "";
   position: absolute;
   top: 40px;
   right: 40px;
   background: url(../img/logo-wasserzeichen.png);
   width: 242px;
   height: 285px;
   z-index: -1;
}

#news2 {
   position: relative;
   isolation: isolate;
   padding-top: clamp(30px, 6vw, 100px);
   padding-bottom: clamp(30px, 10vw, 185px);
   background: linear-gradient(to top, #c7e4f0, #c7e4f0 60%, rgba(255, 255, 255, 0) 60%);
}

#news2::after {
   content: "";
   position: absolute;
   bottom: 25px;
   left: 40px;
   background: url(../img/logo-wasserzeichen.png);
   width: 242px;
   height: 285px;
   z-index: -1;
}

/* tab */

:is(#news, #news2, #events) .tab {
   font-size: 1rem;
   position: relative;
   z-index: 2;
   background: #006f94;
   padding: clamp(15px, 3vw, 35px) clamp(15px, 3vw, 40px) clamp(15px, 3vw, 30px) clamp(15px, 3vw, 40px);
   border-radius: 1000px;
}

@media (max-width: 991px) {
   :is(#news, #news2, #events) .tab {
      margin-bottom: 30px;
      text-align: center;
   }
}

:is(#news, #news2, #events) .tab,
:is(#news, #news2, #events) .tab :is(h1, h2, h3, h4, h5, h6, a) {
   color: #fff;
}

@media (min-width: 576px) {
   #events .tab {
      margin-left: -30px;
   }
}

@media (min-width: 992px) {
   :is(#news, #news2, #events) .tab {
      display: inline-block;
   }

   #news2 .tab {
      margin: -165px 0 0 15px;
      position: absolute;
   }

   #news .tab {
      margin: -165px 0 0 260px;
      position: absolute;
   }

   #events .tab {
      margin: 0 30px 0 60px;
   }
}

:is(#news, #news2, #events) .tab :is(h1, h2, h3, h4, h5, h6) {
   font-size: clamp(1.5rem, 2.5vw, 2.5rem);
   margin-bottom: 0;
}

#events .tabExtraHell {
   margin: auto;
   font-size: 1.125rem;
   color: #17336b;
   border-radius: 85px;
   padding: 120px 30px 100px 30px;
   background: #c7e4f0;
   position: relative;
   z-index: 1;
}

#events .tabExtraHell::before {
   content: '';
   position: absolute;
   pointer-events: none;
   top: 10px;
   left: -10px;
   right: 10px;
   bottom: -10px;
   border-radius: 85px;
   border: 1px solid #006f94;
}

#events .tabExtraHell a {
   color: #17336b;
   text-decoration: none !important;
}

#events .tabExtraHell .tab_link_entry {
   border: none !important;
}

#events .tabExtraHell .tab_date,
#events .tabExtraHell .tab_link_date {
   font-size: 1rem;
}

#events .tabExtraHell .tab_link_title a {
   font-weight: 700;
   font-size: 1.625rem;
}

#events .tabExtraHell .tab_spacer,
#events .tabExtraHell .tab_preview_picture {
   display: none;
}

/* tabnews/tabevents */

:is(#news, #news2, #events) .tab-container {
   font-size: 1rem;
   border: 5px solid #006f94;
   background-color: #fff;
   border-radius: 85px;
   background-repeat: no-repeat;
   padding: clamp(10px, 5vw, 75px) 30px 50px 0;
}

#news2 .tab-container,
#news .tab-container {
   padding-left: 70px;
   padding-top: 100px;
}

:is(#news, #news2) .tab-container::after {
   content: "";
   position: absolute;
   right: 15px;
   top: -5px;
   left: 15px;
   bottom: 10px;
   transform: translate(15px, 20px);
   outline: 2px solid #006f94;
   border-radius: 85px;
   pointer-events: none;
}

:is(#events) .tab-container::after {
   content: "";
   position: absolute;
   right: -5px;
   top: -5px;
   left: -5px;
   bottom: 5px;
   transform: translate(15px, 20px);
   outline: 2px solid #006f94;
   border-radius: 85px;
   pointer-events: none;
}

@media (min-width: 768px) {

   #news2 .tab-container,
   #news .tab-container {
      padding-left: 70px;
      padding-right: 70px;
   }

   #events .tab-container {
      margin-left: -115px;
      padding-left: 85px;
      margin-top: -59px;
   }
}

@media (min-width: 992px) {
   #events .tab-container {
      padding-left: 105px;
   }
}

@media (min-width: 1200px) {

   #news2 .tab-container,
   #news .tab-container {
      padding-left: 100px;
      padding-right: 100px;
   }

   #events .tab-container {
      margin-left: -215px;
      padding-left: 205px;
      min-height: 400px;
   }
}

#events .tab-container {
   position: relative;
}

#events .tab-container .tab_link {
   padding-left: 30px;
}

:is(#news, #news2, #events) .tab-container .tab_link_entry {
   border-bottom: none !important;
   position: relative;
   padding: clamp(20px, 4vw, 30px) 0;
}

#news2 .tab-container .tab_link_entry,
#news .tab-container .tab_link_entry {
   padding-top: 30px;
}

:is(#news, #news2) .tab-container .tab_link_entry {
   padding-left: 0px;
   position: relative;
   padding-top: 170px;
}

@media (min-width: 768px) {
   :is(#news, #news2) .tab-container .tab_link_entry {
      padding-left: 200px;
      position: relative;
      padding-top: 0;
   }
}

:is(#news, #news2) .tab-container .tab_link_entry .tab_preview_picture {
   background: #ffffff;
}

:is(#news, #news2) .tab-container .tab_link_entry::before,
:is(#news, #news2) .tab-container .tab_link_entry .tab_preview_picture {
   position: absolute;
   display: block;
   left: 0;
   top: 20px;
   margin: auto;
   height: 125px;
   width: 170px;
   overflow: hidden;
   border-radius: 30px;
}

@media (min-width: 768px) {
   :is(#news, #news2) .tab-container .tab_link_entry::before,
:is(#news, #news2) .tab-container .tab_link_entry .tab_preview_picture {
   position: absolute;
   display: block;
   left: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   height: 125px;
   width: 170px;
   overflow: hidden;
   border-radius: 30px;
}
}

:is(#news, #news2) .tab-container .tab_link_entry::before {
   content: '';
   background: center / cover no-repeat, #006f94;
}

:is(#news, #news2) .tab-container .tab_link_entry .tab_preview_picture img {
   position: absolute;
   margin: 0 !important;
   left: 50%;
   top: 50%;
   max-width: none;
   min-width: 100%;
   min-height: 100%;
   max-width: 350px;
   width: auto;
   height: auto;
   -ms-interpolation-mode: bicubic;
   transform: translateX(-50%) translateY(-50%);
}

:is(#news, #news2, #events) .tab-container .tab_link_entry+.tab_link_entry {
   border-top: 1px solid #c7e4f0;
}

:is(#news, #news2, #events) .tab-container .tab_link_entry .tab_link_title a {
   font-size: 1.25rem;
   line-height: 1.2;
   display: block;
   color: #17336b;
   font-weight: 700;
}

#news2 .tab-container .tab_link_entry .tab_link_title,
#news .tab-container .tab_link_entry .tab_link_title {
   margin-bottom: 10px;
}

#news2 .tab-container .tab_link_entry .tab_link_title>*,
#news .tab-container .tab_link_entry .tab_link_title>* {
   margin: 0 !important;
}

#events .tab-container .tab_link_entry .tab_link_title {
   margin-bottom: 10px;
}

:is(#news, #news2, #events) .tab-container .tab_link_entry .tab_link_title a:not(:hover):not(:focus) {
   text-decoration: none;
}

#events .tab-container .tab_link_entry .tab_preview_picture {
   display: none;
}

#events .tab-container .tab_link_mandat a {
   color: inherit;
   font-weight: inherit;
   text-decoration: none;
}

:is(#news, #news2, #events) .tab-container .tab_link :is(.tab_spacer, .tab_link_mehr) {
   display: none;
}

@media (min-width: 992px) {
   :is(#news, #news2, #events) .tab-container .button-design {
      margin-top: 10px;
   }
}

/* #endregion -------------------------------- news + events ------------------------------------ */

/* #region -------------------------------------- about us -------------------------------------- */

#about-us {
   font-size: 1rem;
   padding: 40px 0;
}

@media (min-width: 992px) {
   #about-us {
      padding-right: clamp(15px, 4vw, 40px);
   }
}

#about-us :is(h1, h2, h3, h4, h5, h6) {
   color: #17336b;
   margin-bottom: clamp(15px, 4vw, 40px);
   font-size: clamp(1.375rem, 3vw, 2.75rem);
}

#about-us :is(b, strong) {
   color: #17336b;
   font-size: 1.25rem;
   margin-bottom: 4px;
   display: block;
}

#about-us img {
   display: block;
   margin-bottom: 10px;
}

#about-us .tabContent a {
   padding-right: 20px;
   display: inline-block;
   min-height: 20px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.32' height='13.62' viewBox='0 0 13.32 13.62'%3E%3Cpath d='M6.4-11.92l2.08-1.5q.96,1.56,1.88,2.79a18.355,18.355,0,0,0,1.91,2.19,19.99,19.99,0,0,0,2.11,1.78v.12a17.766,17.766,0,0,0-2.11,1.77,19.94,19.94,0,0,0-1.91,2.18A32.545,32.545,0,0,0,8.48.2L6.4-1.28A16.473,16.473,0,0,1,8.14-3.55a15.233,15.233,0,0,1,1.8-1.67A10.14,10.14,0,0,1,11.7-6.34a7.843,7.843,0,0,1,1.62-.6v.68a7.544,7.544,0,0,1-1.62-.61A10.645,10.645,0,0,1,9.94-8a15.233,15.233,0,0,1-1.8-1.67A17.067,17.067,0,0,1,6.4-11.92ZM1.06-7.98H6.64a25.656,25.656,0,0,1,2.78.14q1.28.14,2.34.36l1.5.88-1.5.86q-1.06.22-2.34.36a25.656,25.656,0,0,1-2.78.14H1.06Z' transform='translate(-1.06 13.42)' fill='%23006f94'/%3E%3C/svg%3E%0A") center right / 11px auto no-repeat;
}

#about-us a:not(.has-image)+a:not(.has-image) {
   margin-left: 10px;
}

#about-us .button-design {
   padding-top: 40px;
}

/* #endregion ----------------------------------- about us -------------------------------------- */

/* #region ------------------------------------ deco words -------------------------------------- */

header {
   position: relative;
}

@media (min-width: 992px) {
   header::after {
      color: rgba(0, 0, 0, 0.1);
      font-weight: 700;
      font-size: clamp(80px, 6vw, 100px);
      line-height: 0;
      transform: rotate(-90deg);
      position: absolute;
      right: 0;
      width: clamp(60px, 7vw, 100px);
   }

   header::after {
      content: "#ssboberhausen";
      bottom: -302px;
   }
}

/* #endregion --------------------------------- deco words -------------------------------------- */

/* #region ------------------------------------- resp gaps -------------------------------------- */

#footer-bg>.row,
#news>.row,
#events>.row,
#footer2-bg>.row {
   row-gap: 30px;
}

#headerpic>.row> :first-child>.row {
   row-gap: clamp(50px, 6vw, 62px);
}

/* #endregion ---------------------------------- resp gaps -------------------------------------- */

/* #region --------------------------------------- buttons -------------------------------------- */

.button-design a:not(.has-image) {
   display: inline-block;
   color: #ffffff;
   font-weight: 700;
   background: #006f94;
   padding: 8px 25px 7px 25px;
   position: relative;
   border-radius: 100px;
   text-decoration: none;
   font-size: 1rem;
}

#header-text.button-design a:not(.has-image) {
   color: #17336b;
   background: #fff;
   margin-top: clamp(5px, 2vw, 20px);
   font-size: 1.125rem;
}

@media (min-width: 1200px) {
   #header-text.button-design a:not(.has-image) {
      padding-left: 35px;
      padding-right: 35px;
   }
}

:is(.button-design, #header-text.button-design) :is(a:not(.has-image):hover, a:not(.has-image):focus) {
   color: #fff;
   background: #17336b;
}

.button-design a:not(.has-image)+a:not(.has-image) {
   margin-left: clamp(10px, 2vw, 25px);
}

/* #endregion ------------------------------------ buttons -------------------------------------- */

/* ----------------------------------------------- content -------------------------------------- */

#content-area {
   text-align: left;
   padding-top: clamp(30px, 10vw, 60px);
   padding-bottom: clamp(30px, 10vw, 100px);
   min-height: 300px;
}

.index #content-area {
   text-align: left;
   padding-top: clamp(30px, 10vw, 60px);
   padding-bottom: clamp(30px, 10vw, 100px);
   min-height: 100px;
}

.index #contenttop_right {
   display: none;
}

/* #region ---------------------------------- h1 - h6, newslink --------------------------------- */

.h4link a:link,
.h4link a:hover,
.h4link a:focus,
.h4link a:visited,
H6,
H5,
H4,
H3,
H2,
H1 {
   color: #17336b;
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 15px;
}

h1,
.h1,
.legacy_h1 {
   font-size: clamp(2.25rem, 7vw, 3.125rem);
   margin-bottom: clamp(15px, 4vw, 25px);
}

h2,
.h2,
.legacy_h2 {
   font-size: clamp(2.0625rem, 7vw, 2.8125rem);
}

h3,
.h3,
.legacy_h3 {
   font-size: clamp(1.875rem, 7vw, 2.5rem);
}

h4,
.h4,
.legacy_h4 {
   font-size: clamp(1.6875rem, 7vw, 2.1875rem);
}

h5,
.h5,
.legacy_h5 {
   font-size: clamp(1.5625rem, 7vw, 1.875rem);
}

h6,
.h6,
.legacy_h6 {
   font-size: clamp(1.4375rem, 7vw, 1.5625rem);
}

/* #endregion ---------------------------------- h1 - h6, newslink ------------------------------ */

/* #region --------------------------------------- footer --------------------------------------- */

footer {
   font-size: 1rem;
   background: #c7e4f0;
}

#footer2 {
   background: #006f94;
}

#footer-bg,
#footer2-bg {
   position: relative;
   z-index: 1;
}

#footer-bg::after {
   background: url(../img/logo-wasserzeichen.png);
   background-repeat: no-repeat;
   background-position: bottom 35px left 40px;
   position: absolute;
   content: '';
   display: block;
   width: 245px;
   height: 285px;
   left: -310px;
   top: 50%;
   transform: translateY(-50%);
}


#footer-bg {
   background: #c7e4f0;
   padding-top: clamp(30px, 6vw, 55px);
   padding-bottom: clamp(30px, 6vw, 55px);
   border-top-right-radius: 185px;
}

#footer2-bg {
   background: #006f94;
   padding-top: 27px;
   padding-bottom: 27px;
}

@media (min-width: 992px) {
   #footer2-bg>.row>*:last-child {
      padding-right: 60px;
   }
}

:is(#footer-bg, #footer2-bg) :is(h1, h2, h3, h4, h5, h6) {
   font-size: clamp(1.5rem, 3vw, 1.875rem);
   font-weight: 700;
}

.footer-headline {
   padding-top: clamp(55px, 8vw, 70px);
   background-position: top left;
   background-repeat: no-repeat;
   background-size: auto;
}

.contact-headline {
   background-image: url(../img/icon-kontakt.png);
}

.link-headline {
   background-image: url(../img/icon-links.png);
}

.link-partner {
   background-image: url(../img/icon-partner.png);
}

@media (max-width: 767px) {
   .footer-headline {
      background-position: top center;
   }
}

#footer-bg a {
   color: #17336b;
   text-decoration: underline;
}

#footer-bg .linktab a,
#footer-bg .partnertab .tabContent a {
   text-decoration: none;
}

@media (max-width: 767px) {
   #footer-bg .linktab ul li {
      width: fit-content;
      margin: 0 auto;
   }
}

#footer-bg .partnertab .tabContent {
   background: #ffffff;
   outline: 3px solid #006f94;
   border-radius: 30px;
   padding: 20px;
}

#footer-bg .partnertab img {
   margin: 15px;
   display: inline-block;
}

#footer2-bg a {
   color: #fff;
}

#footer-bg a {
   padding: 2px 6px;
   margin: 0 -6px;
}

#footer-bg a:hover,
#footer-bg a:focus {
   text-decoration: underline;
}

#innerfooter ul {
   padding: 0;
   line-height: 1.8;
}

#innerfooter li {
   display: inline-block;
}

#innerfooter li+li::before {
   content: "•";
   color: #ffffff;
   padding: 0 7px;
}

/* #endregion ------------------------------------ footer --------------------------------------- */

/* #region -------------------------------------- vernetzt -------------------------------------- */

#vernetzt {
   text-align: left;
   font-size: 0.875rem;
   line-height: 1.3;
   margin: 0;
   font-weight: 400;
   text-decoration: none;
}

#vernetzt span {
   display: block;
}

#vernetzt img {
   margin-right: 22px;
}

/* #endregion -------------------------------- vernetzt ----------------------------------------- */

/* #region ------------------------------------- scroll top ------------------------------------- */

#scroll-top-btn {
   display: inline-block;
   background: #17336b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='M14.15 30.75 12 28.6l12-12 12 11.95-2.15 2.15L24 20.85Z' fill='%23fff'/%3E%3C/svg%3E") center right 9px / 24px auto no-repeat;
   font-size: 0.875rem;
   padding: 5px 38px 7px 20px;
   text-decoration: none;
   border-radius: 100px;
   font-weight: 700;
}

#scroll-top-btn:hover,
#scroll-top-btn:focus {
   background-color: #06608a;
}

/* #endregion ------------------------------- scroll top ---------------------------------------- */