@font-face {
  font-display: swap;font-family: "BSans";font-style: normal;font-weight: 200;
  src: url('assets/webfonts/bsans-extralight-webfont.woff2') format('woff2'), 
       url('assets/webfonts/bsans-extralight-webfont.woff') format('woff'); 
}
@font-face {
  font-display: swap;font-family: "BSans";font-style: normal;font-weight: 300;
  src: url('assets/webfonts/bsans-light-webfont.woff2') format('woff2'), 
       url('assets/webfonts/bsans-light-webfont.woff') format('woff'); 
}
@font-face {
  font-display: swap;font-family: "BSans";font-style: normal;font-weight: 400;
  src: url('assets/webfonts/bsans-book-webfont.woff2') format('woff2'), 
       url('assets/webfonts/bsans-book-webfont.woff') format('woff'); 
}
@font-face {
  font-display: swap;font-family: "BSans";font-style: normal;font-weight: 500;
  src: url('assets/webfonts/bsans-medium-webfont.woff2') format('woff2'), 
       url('assets/webfonts/bsans-medium-webfont.woff') format('woff'); 
}
:root,
[data-bs-theme=light] {
  --wl-blue: #376fa3;
  --wl-blue-rgb: 55, 111, 163;
  --wl-blue-20: #cee1f2;
  --wl-blue-10: #e6f0f8;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-light: #f5f5f7;
  --bs-light-rgb: 245, 245, 247;
  --bs-font-sans-serif: "BSans", -apple-system, "Helvetica Neue", "HelveticaNeue", HelveticaNeueRoman, HelveticaNeue-Roman, Helvetica, Arial, Roboto, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.764706;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
 }
canvas {
  -ms-touch-action: double-tap-zoom;
}
html {
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth
}
@media (min-width: 768px) {
  .container-md, .container {
    max-width: 46rem
  }
}
@media (min-width: 992px) {
  .container-md, .container {
    max-width: 72rem
  }
}
@media (min-width: 1200px) {
  .container-md, .container {
    max-width: 74rem
  }
}
@media (min-width: 1400px) {
  .container-md, .container {
    max-width: 82rem
  }
}
.container, .container-fluid {
  padding-right: calc(var(--bs-gutter-x)* 1);
  padding-left: calc(var(--bs-gutter-x)* 1);
}
.main {
  margin-top: calc(18rem - 5vw)
}
@media (min-width: 992px) {
  .main {
    margin-top: 16rem
  }
}
@media (min-width: 1600px) {
  .main {
    margin-top: 16vw
  }
}
h1, h2, h3, h4, h5 {
  font-family: var(--bs-font-sans-serif);
  font-weight: 400
}
h1 {
  font-size: 4.25rem;
  font-size: clamp(2.75rem, 4vw, 4.25rem);
  line-height: 1;
  margin-bottom:0
}
.section-header h1 {
  font-size: 3.5rem;
  font-size: clamp(2.5rem, 3.5vw, 3.65rem);
  font-weight: 200;
  line-height: 1.05;
  color: var(--wl-blue);
  margin-bottom: -1rem;
  letter-spacing: -1.5px
}
h2 {
  font-size: 1.75rem;
  font-size: clamp(1.625rem, 2.1vw, 2.25rem);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.25px;
  margin-bottom: 1.5rem;
  hyphens: none
}
@media (min-width: 768px) {
  .section-header h1 {
    margin-bottom: 0
  }
}
h3 {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.25px;
  line-height: 1.125;
  margin-bottom: 2.5rem
}
h4 {
  font-weight: 300;
  letter-spacing: -0.4px;
  line-height: 1;
  margin-bottom: 1.5rem

}
h5 {
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom: 1.3rem
}
p {
  letter-spacing: 0.15px;
  margin-bottom: 1.25rem;
  hyphens: none
}
a {
  color: var(--wl-blue);
  letter-spacing: 0;
  text-decoration: none
}
a:hover {
  color: var(--bs-gray-700);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px
}
hr {
  margin: 1rem 0;
  color: var(--wl-blue);
  border: 0;
  border-top: 0.5px solid;
  opacity: .5
}
.wl-link {
 font-size: 1.0625rem
}
.black {
  color: rgb(var(--bs-body-color-rgb))!important
}
a.black:hover {
  color: var(--wl-blue)!important
}
blue, .blue {
  color: var(--wl-blue);
  text-decoration: none
}
.bg-blue {
  background-color: var(--wl-blue-10);
}
gray, .gray {
  color: var(--bs-gray)
}
b, strong {
  font-weight: 700
}
.small, small {
  font-size: .875em;
  letter-spacing: 0
}
@media (min-width: 1600px) {
  .small, small {
    font-size: 1.1875rem!important;
  }
}
.rounded-5 {
  border-radius: 1.5rem!important
}
.section-header {
  margin-top: 6vw
}
.wl-stage {
  position: absolute;
  background-image: url(uplimages/static/weltenleser-weltkarte-480w.webp);
  opacity: 0.85;
  width: 100%;
  height: 250px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 576px) {
  .wl-stage {
    background-image: url(uplimages/static/weltenleser-weltkarte-992w.webp)
  }
}
@media (min-width: 992px) {
  .wl-stage {
    background-image: url(uplimages/static/weltenleser-weltkarte.webp)
  }
}
@media (min-width: 1600px) {
  .wl-stage {
    height: 16vw
  }
}
.navbar-brand {
  margin-right: 3rem;
  position: absolute;
  top: -4px; 
  left: 1.5rem
}
.navbar-brand img {
  height: 120px;
  width: 120px
}
@media (min-width: 768px) {
  .navbar-brand {
    top: -4px; 
    left: 3rem  
  }
  .navbar-brand img {
    height: 150px;
    width: 150px
  }
}
.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.7);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.95);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 2vw;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 1.5rem;
  --bs-navbar-toggler-font-size: 1.5rem;
  --bs-navbar-toggler-icon-bg: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 68.02"><defs><style> .cls-1 { fill: none; stroke: %23000; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><line class="cls-1" x1="5" y1="63.02" x2="105" y2="63.02"/><line class="cls-1" x1="5" y1="34.01" x2="105" y2="34.01"/><line class="cls-1" x1="5" y1="5" x2="105" y2="5"/></svg>');  
  --bs-navbar-toggler-border-color: none;
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
  height: 85px
}
@media (min-width: 576px) {
  .navbar {
    --bs-navbar-toggler-padding-x: 5.5vw
  }
}
.navbar-nav {
  padding-right: 2.15vw !important
}
@media (min-width: 992px) {
  .navbar-nav {
   padding-top: 0.5rem !important
  }
}
@media (min-width: 1200px) {
  .navbar-nav {
   padding-right: 2.75vw !important
  }
}
@media (min-width: 1400px) {
  .navbar-nav {
   padding-right: 4vw !important
  }
}
@media (min-width: 1800px) {
  .navbar-nav {
   padding-right: 5vw !important
  }
}
.navbar .container-fluid::after {
  content: '';
  position: absolute;
  bottom: -50px; /* Anpassen je nach Logogröße */
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none!important
}
.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(0, 130, 130, 0.05);
  --bs-btn-close-focus-opacity: 0.9;
  --bs-btn-close-bg: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.96 167.96"><defs><style> .cls-1 { stroke: %23000; stroke-width: 7.96px; } .cls-1, .cls-2 { stroke-linecap: round; stroke-miterlimit: 10; } .cls-2 { fill: none; stroke: %23fff; stroke-width: 12px; } </style></defs><circle class="cls-1" cx="83.98" cy="83.98" r="80"/><line class="cls-2" x1="50.39" y1="50.39" x2="117.57" y2="117.57"/><line class="cls-2" x1="50.39" y1="117.57" x2="117.57" y2="50.39"/></svg>');
  font-size: 2rem;
  opacity: 0.7
}
.nav-link {
  font-family: var(--bs-font-sans-serif);
  font-size: 1.125rem;
  font-weight: 400;
  padding: 1rem var(--bs-nav-link-padding-x);
  color: rgba(0,0,0,0.6)
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--wl-blue);
  text-decoration: none
}
@media (min-width: 576px) {
  .navbar {
    height: 90px
  }
}
@media (min-width: 992px) {
  .navbar {
    height: 90px
  }
  .navbar-nav .nav-link {
    font-size: 1.0625rem;
    color: rgba(0,0,0,0.7);
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x)
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus,
  .navbar-nav .nav-link:active,
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link.show {
    color: var(--wl-blue)
  }
}
.dropdown-menu {
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-font-size: 1.0625rem;
  --bs-dropdown-item-padding-x: 2rem;
  --bs-dropdown-item-padding-y: 0.5rem
}
.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  color: var(--bs-navbar-color);
  border: none;
  opacity: 0.7;
  position: absolute;
  right: 1.5rem;
  top: 1.75rem
  
}
.navbar-toggler:hover {
  opacity: 0.9
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
  border: none
}
.navbar-toggler-icon {
  height: 1.4em;
  width: 1.4em
}
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
  --bs-offcanvas-width: 300px;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem
}
.offcanvas-header {
  padding: 2.1rem 3rem
}
@media (min-width: 576px) {
  .offcanvas-header {
    padding: 2.1rem 3.75rem
  }
}
@media (min-width: 768px) {
  .offcanvas-header {
    padding: 2.1rem 4.25rem
  }
}
.offcanvas-header .btn-close {
  border: none
}
.offcanvas-header .btn-close:hover,
.offcanvas-header .btn-close:focus{
  border: none;
  box-shadow: none
}
.offcanvas-body {
  padding: 1rem 2rem 1rem 5.1rem
}
.content {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem
}
@media (min-width: 768px) {
  .content {
    margin-top: 3rem;
    margin-bottom: 3rem
  }
}
@media (min-width: 1400px) {
  .content {
    margin-top: 4rem;
    margin-bottom: 4rem
  }
}
.veranstaltungen .content {
  margin-top: 5rem;
  margin-bottom: 4rem
}
.card {
  --bs-card-border-width: 0.5px;
  --bs-card-border-color: rgba(30, 81, 123, 0.4);
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 5px #ededed
}

.card img {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 0;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 0 
}
@media (min-width: 768px) {
  .card img {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0 
  }
}
.img-card {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  border-radius: 0;
  min-height: 170px
}
@media (min-width: 576px) {
  .img-card {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    border-radius: 0;
    min-height: unset
  }
   .modal .img-card {
     max-height: 180px!important
  }
}
.card-title {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.75rem
}
.col-date {
  display: flex;
  justify-content: start;
  padding-left: 1rem;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--wl-blue-20)
}
.card-subtitle {
  font-weight: 400;
  letter-spacing: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center
}
.card-subtitle span {
  letter-spacing: 0.5px;
  padding-top: 1.5rem;
  padding-bottom: 1.25rem
}
.card-subtitle span.day:after {
  content: ',';
  margin-left: 0;
  padding-right: 4px
}
.card-subtitle span.date {
  font-size: 1.125rem;
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  padding-right: 3px
}
@media (min-width: 576px) {
  .col-date {
    justify-content: center;
    padding-left: 0;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0
  }
  .card-subtitle {
    flex-direction: column
  }
  .card-subtitle span {
    font-size: 0.9375rem;
    letter-spacing: 0;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem
  }
  .card-subtitle span.date {
    font-size: 2.25rem;
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
    padding-right: 0
  }
  .card-subtitle span.day:after {
    content: '';
    margin-left: 0;
    padding-right: 0
  }
}
@media (min-width: 1400px) {
  .card-subtitle span {
    font-size: 1.0625rem
  }
}
.card-body {
  padding-top: 1.4rem;
  padding-bottom: 0.15rem
}
@media (min-width: 768px) {
  .card-body {
    padding-top: 1.5rem;
    padding-bottom: 0.1rem
  }
}
@media (min-width: 1400px) {
  .card-body {
    padding-top: 2rem;
    padding-bottom: 0.75rem
  }
}
.card p, .card-text {
  font-size: 1rem;
  line-height: 1.529412;
  letter-spacing: 0.2px
}
.modal {
  --bs-modal-padding: 2rem;
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 2rem 2rem 1rem;
  --bs-modal-width: 88.71%
}
.modal-body .card {
  padding: 1rem;
  box-shadow: none
}
@media (min-width: 992px) {
  .modal-body .card {
    padding: 1.5rem
  }
  .card p, .card-text {
    line-height: 1.55;
  }
}
.modal-body .card-title {
  font-size: 1.25rem;
  margin-bottom: 0
}
.modal-body .card-subtitle {
  font-size: 1.125rem;
  flex-direction: row;
  align-items: start;
  justify-content: start;
  margin-bottom: 1.1rem;
  margin-top: 0.1rem
}
@media (min-width: 992px) {
  .modal-body .card-title {
    font-size: 1.375rem
  }
}
@media (min-width: 1600px) {
  .modal-body .card-title {
    font-size: 2rem
  }
  .modal-body .card-subtitle {
    font-size: 1.75rem;
    margin-top: 0
  }
  .card p, .card-text {
    font-size: 1.125rem
  }
}
.modal-body .card-body {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  line-height: 1.529412
}
.modal-trigger {
  display: flex;
  justify-content: flex-end;
  padding: 1px
}
.card-modal-button {
  cursor: pointer;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin-top: -3rem
}
.card-modal-button .card-modal-button-icon {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: 1em;
  width: 1em;
  font-size:2rem;
  outline: none;
  z-index: 1;
  margin: 0;
  padding-right: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear;
  color: #000;
  opacity: 0.7;
  background: transparent url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.96 167.96"><defs><style> .cls-1 { stroke: %23000; stroke-width: 7.96px; } .cls-1, .cls-2 { stroke-linecap: round; stroke-miterlimit: 10; } .cls-2 { fill: none; stroke: %23fff; stroke-width: 12px; } </style></defs><circle class="cls-1" cx="83.98" cy="83.98" r="80"/><line class="cls-2" x1="83.98" y1="38.98" x2="83.98" y2="128.98"/><line class="cls-2" x1="38.98" y1="83.98" x2="128.98" y2="83.98"/></svg>') center/1em auto no-repeat;
}
.card-modal-button .card-modal-button-icon:hover {
  opacity: 0.9
}
.modal-header {
  background: transparent!important
}  
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y)* 1) calc(var(--bs-modal-header-padding-x)* 1);
  width: .25em;
  height: .25em;
  border: none;
  opacity: 0.7
}
.modal-header .btn-close:hover {
  opacity: 0.9
}
.modal-body {
  padding: 0 1rem 1rem
}
@media (min-width: 992px) {
  .card-modal-button {
    margin-top: 0
  }
  .card-modal-button .card-modal-button-icon {
    bottom: 10px
  }
  .modal-body {
    padding: 0 4rem 2rem
  }
  .modal-body .card-body {
    line-height: 1.6470
  }
}
.social:hover {
  transition: ease-in .2s
}
footer {
  border-top: 1px solid rgba(222, 226, 230, .25);
  background-color: var(--wl-blue-10);
  padding-top: 6rem;
  padding-bottom: 4rem;
  font-family: var(--bs-font-sans-serif);
  font-size: 1.0625rem
}
footer h4 {
  color: var(--bs-body-color-rgb);
  font-weight: 400;
  letter-spacing: 0.25px;
  margin-bottom: 0.675rem
}
footer h3 {
  font-size: 1.375rem;
  line-height: 1.333333;
  color: var(--wl-blue)
}
footer p {
  color: var(--bs-body-color-rgb);
  font-weight: 400;
  line-height: 1.333333;
  margin-bottom: 0.5rem
}
footer a {
  color: var(--wl-blue);
  text-decoration: none
}
footer a:hover {
  color: var(--bs-gray-700);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px
}
footer table {
  font-size: 1.0625rem;
  line-height: 1.333333!important
}
footer table td {
  line-height: 1.333333;
  letter-spacing: 0.5px;
  padding-bottom: 0.38rem
}
@media (min-width: 1400px) {
  footer p {
      font-size: 1.125rem
    }
  footer table {
    line-height: 29.3333px!important
  }
}
@media (min-width: 992px) {
  .footer-end p {
    text-align: right
  }
}
@media (min-width: 992px) and (max-width: 1199.98px){
  footer p {
    font-size: 0.9375rem
  }
  footer table {
    font-size: 0.9375rem
  }
}