@charset "UTF-8";
/*
Theme Name: Stiftung Bürger für Münster
Author: STUDIOHORN
Author URI: https://studio-horn.de
Description: Das globale Stiftung Bürger für Münster Theme
[...]
Template: twentytwentyfour
[...]
*/
/*== General SCSS ==*/
/*== General ==*/
@font-face {
  font-family: "Roboto Slab";
  src: url("assets/fonts/RobotoSlab-Bold.eot") format("embedded-opentype");
  src: url("assets/fonts/RobotoSlab-Bold.woff") format("woff"), url("assets/fonts/RobotoSlab-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("assets/fonts/RobotoSlab-Medium.eot") format("embedded-opentype");
  src: url("assets/fonts/RobotoSlab-Medium.woff") format("woff"), url("assets/fonts/RobotoSlab-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto-Bold.eot") format("embedded-opentype");
  src: url("assets/fonts/Roboto-Bold.woff") format("woff"), url("assets/fonts/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto-Medium.eot") format("embedded-opentype");
  src: url("assets/fonts/Roboto-Medium.woff") format("woff"), url("assets/fonts/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto-Regular.eot") format("embedded-opentype");
  src: url("assets/fonts/Roboto-Regular.woff") format("woff"), url("assets/fonts/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
main {
  margin-top: 0 !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Slab", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  letter-spacing: unset !important;
  margin-bottom: 1rem;
}
p, a, li, div {
  font-family: "Roboto", sans-serif !important;
  letter-spacing: unset !important;
  -webkit-hyphens: auto;
  font-size: var(--fs-copy);
  line-height: 1.5em;
  font-weight: 400;
}
strong {
  font-weight: 700 !important;
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
a {
  text-decoration: none !important;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit !important;
  color: inherit !important;
}
:root {
  --primary: #534395;
  --secondary: #B2DACC;
  --yellow: #FFED00;
  --grey: #B2B2B2;
  /* Bitte Schriftgrößen nun in diesem Format anlegen */
  --fs-h1: clamp(35.2px, 2.2rem + ((1vw - 3.2px) * 2.25), 64px);
  --fs-h2: clamp(28.836px, 1.802rem + ((1vw - 3.2px) * 1.653), 50px);
  --fs-h3: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 1.327), 42px);
  --fs-h4: clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px);
  --fs-p: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px);
  --fs-p-small: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.313), 18px);
}
@media (max-width: 768px) {
  :root {
    --fs-h4: clamp(16.293px, 1.018rem + ((1vw - 3.2px) * 0.68), 25px);
  }
}
@media (max-width: 576px) {
  :root {
    --fs-h1: clamp(28.836px, 1.802rem + ((1vw - 3.2px) * 1.653), 50px);
    --fs-h4: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px);
  }
}
/* Hiermit können die responsive Spacings von Wordpress angepasst werden

@media(max-width: 1200px) {
  body {
    --wp--preset--spacing--10: 1rem !important;
    --wp--preset--spacing--30: min(1.5rem, 2.0vw) !important;
    --wp--preset--spacing--40: min(2rem, 3vw) !important;
    --wp--preset--spacing--50: min(4.5rem, 6vw) !important;
    --wp--preset--spacing--60: min(6.5rem, 8vw) !important;
  }
}

*/
.responsive-padding-x {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
@media (min-width: 768px) {
  .responsive-padding-x {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
}
@media (min-width: 992px) {
  .responsive-padding-x {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
}
.img-w-100 img {
  width: 100% !important;
}
.wp-block-cover {
  overflow: hidden;
}
.fw-blod {
  font-weight: 700 !important;
}
.fw-semibold {
  font-weight: 600 !important;
}
.fw-regular {
  font-weight: 500 !important;
}
.text-primary {
  color: var(--primary) !important;
}
.text-secondary {
  color: var(--secondary) !important;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.wp-site-blocks {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: 100vw;
  overflow: hidden;
}
.hyphens-auto {
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
}
.wp-site-blocks .alignfull, .wp-site-blocks > .wp-block-group.has-background, .wp-site-blocks > .wp-block-cover, .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background, .wp-site-blocks > .wp-block-template-part > .wp-block-cover, body > .is-root-container > .wp-block-cover, body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background, body > .is-root-container > .wp-block-template-part > .wp-block-cover, .is-root-container .wp-block[data-align="full"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: unset;
}
.border-primary {
  border-color: var(--primary) !important;
}
.border-secondary {
  border-color: var(--secondary) !important;
}
.entry-content {
  margin-top: 0 !important;
}
@media (max-width: 992px) {
  .center-animated-text-group .spacer-10vw {
    height: 20vw !important;
  }
  .center-animated-text-group .spacer-18vw {
    height: 30vw !important;
  }
}
.mw-unset {
  max-width: unset;
}
.mw-unset img {
  max-width: unset;
}
.wp-block-button__link.has-primary-color {
  transition: 0.25s;
}
.wp-block-button__link.has-primary-color:hover {
  background-color: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}
/*== Layout ==*/
table td {
  padding-left: 0 !important;
  padding-right: 0.25em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
table * {
  font-size: var(--fs-20);
}
/*== Layout END ==*/
/*== z-index Styling ==*/
.z-99 {
  z-index: 99 !important;
  position: relative;
}
.z-98 {
  z-index: 98 !important;
  position: relative;
}
.z-97 {
  z-index: 97 !important;
  position: relative;
}
.z-96 {
  z-index: 96 !important;
  position: relative;
}
.z-95 {
  z-index: 95 !important;
  position: relative;
}
.z-94 {
  z-index: 94 !important;
  position: relative;
}
.grecaptcha-badge {
  opacity: 0 !important;
}
/*== General END ==*/
/*== Navigation ==*/
/*== Navigation END ==*/
/*== Header ==*/
/*== Header END ==*/
/*== Footer ==*/
/*== Footer END ==*/
/*== Site specific SCSS ==*/
/*== content ==*/
/* Kontaktformular */
.fieldset-cf7mls > p {
  margin-bottom: 2.5rem;
}
.fieldset-cf7mls label {
  width: 100%;
  font-size: var(--fs-p);
}
.fieldset-cf7mls label span input, .fieldset-cf7mls label span textarea {
  border: solid 1.5px var(--primary);
  border-radius: 5px;
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.35rem;
  font-size: var(--fs-p-small);
}
.fieldset-cf7mls .row > div > p {
  margin-bottom: 2.5rem;
}
.cf7mls_btn, .wpcf7-submit {
  width: 100%;
  background-color: var(--primary) !important;
  font-weight: 600 !important;
  transition: 0.25s;
  position: relative;
  color: white;
  border-radius: 5px !important;
  padding: 10px 20px !important;
}
.cf7mls_btn:after, .wpcf7-submit:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url("https://bewerbung.buergerpreis-muenster.de/wp-content/uploads/2024/06/Pfad-298.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  top: 35%;
  transform: translateX(5px);
}
.cf7mls_back {
  display: none;
}
.wpcf7-not-valid-tip {
  transform: translateY(-25px);
}
.wpcf7-response-output {
  background-color: var(--secondary);
  border: none !important;
  padding: 20px 20px !important;
  border-radius: 5px;
}
/* Max Char */
.char-counter {
  font-size: var(--fs-p-small);
  color: var(--grey);
  margin-top: 5px;
  text-align: end;
}
.char-counter.over-limit {
  color: red;
}
/* Tabs */
.cf7-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  margin-bottom: 3rem;
  border-bottom: solid 1px var(--primary);
}
.cf7-tab {
  font-size: var(--fs-h4);
  padding: 0px 3rem 0.5rem 0rem;
  cursor: pointer;
  border-bottom: solid 3px transparent;
  color: var(--grey);
  transition: 0.25s;
}
.cf7-tab.active {
  border-bottom: solid 3px;
  color: black;
}
/*Upload Box*/
.codedropz-upload-wrapper {
  margin-top: 0.25rem;
}
.codedropz-upload-container {
  padding: 5rem 2rem;
}
.codedropz-upload-container .codedropz-upload-inner {
  color: var(--grey) !important;
}
.dnd-upload-counter {
  font-size: var(--fs-p-small);
  color: var(--grey);
}
/* Kontaktformular END */
@media (max-width: 768px) {
  .fieldset-cf7mls > p {
    margin-bottom: 1.25rem;
  }
  .cf7-tabs {
    gap: 0.5rem;
  }
  .cf7-tabs .cf7-tab {
    padding: 0px 0.5rem 0.5rem 0rem;
  }
}
@media (max-width: 576px) {
  .fieldset-cf7mls > p {
    margin-bottom: 0.5rem;
  }
  .row > div > p {
    margin-bottom: 0.5rem !important;
  }
}
/*== content END ==*/
/*== Blog Stying ==*/
:root {
  --wpforms-page-break-color: var(--wp--preset--color--primary);
}
.sbm-booking-form {
  /* -----------------------------------
	   Progress Indicator Styling
	   ----------------------------------- */
  /* -----------------------------------
	   Tisch Auswahl
	   ----------------------------------- */
  /* -----------------------------------
	   Preise
   	----------------------------------- */
  /* -----------------------------------
	   Labels
   	----------------------------------- */
  /* -----------------------------------
	   Confirmation
   	----------------------------------- */
  /* -----------------------------------
	   Buttons
   	----------------------------------- */
}
.sbm-booking-form h1, .sbm-booking-form h2, .sbm-booking-form h3, .sbm-booking-form h4 {
  color: #524395 !important;
}
.sbm-booking-form .wpforms-page-indicator {
  display: flex;
  flex-wrap: wrap;
  /* erlaubt Umbruch in mehrere Zeilen */
  align-items: center;
  /* vertikale Zentrierung der Steps + Title */
}
.sbm-booking-form .wpforms-page-indicator .wpforms-page-indicator-page-progress-wrap {
  flex: 1 0 100%;
  /* flex-Basis 100% → eigene Zeile */
  order: 1;
}
.sbm-booking-form .wpforms-page-indicator .wpforms-page-indicator-page-title-sep {
  display: none !important;
}
.sbm-booking-form .wpforms-page-indicator .wpforms-page-indicator-steps {
  order: 2;
  font-weight: 100 !important;
}
.sbm-booking-form .wpforms-page-indicator .wpforms-page-indicator-steps::after {
  content: ":";
  margin-right: 0.5em;
  /* etwas Abstand vor dem Titel */
}
.sbm-booking-form .wpforms-page-indicator .wpforms-page-indicator-page-title {
  order: 3;
  margin-left: 0;
  white-space: nowrap;
  /* kein Umbruch im Titel */
  font-weight: 400 !important;
}
.sbm-booking-form .wpforms-page-indicator .wpforms-page-indicator-page-title, .sbm-booking-form .wpforms-page-indicator .wpforms-page-indicator-steps {
  margin-top: 30px;
  margin-bottom: 1rem;
  color: var(--wp--preset--color--primary) !important;
  font-family: "Roboto Slab", sans-serif !important;
  font-style: normal;
  letter-spacing: unset !important;
  font-size: var(--wp--preset--font-size--fs-h-2) !important;
}
.sbm-booking-form ul#wpforms-114-field_48-row1, .sbm-booking-form ul#wpforms-114-field_48-row2 {
  list-style: none !important;
  margin-bottom: 0 !important;
}
.sbm-booking-form ul#wpforms-114-field_48-row1 li, .sbm-booking-form ul#wpforms-114-field_48-row2 li {
  list-style: none !important;
}
.sbm-booking-form .booking-map-wrapper {
  width: 100vw;
  overflow-x: auto !important;
  overflow-y: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  scrollbar-color: #524395 #fff;
  scrollbar-width: thin;
}
.sbm-booking-form .booking-map {
  box-sizing: border-box;
  padding: 0 30px;
  width: 1500px;
  margin: 0 auto;
}
.sbm-booking-form .booking-map .tische-row1-wrapper {
  margin-top: 5px !important;
  margin-bottom: 0px !important;
  margin-left: 140px;
}
.sbm-booking-form .booking-map .tische-row2-wrapper {
  margin-top: 5px !important;
  margin-bottom: 0px !important;
  margin-left: 150px;
}
.sbm-booking-form .booking-map .tische-row1-wrapper, .sbm-booking-form .booking-map .tische-row2-wrapper {
  /* Container immer genau 75% breit und zentriert */
  width: 60%;
  box-sizing: border-box;
  /* UL als flex­container für jeweils eine Reihe */
  /* li-Grundregeln */
  /* Label unsichtbar, bleibt als Tooltip via title erhalten */
  /* Native Checkbox-UI ausblenden */
  /* Gebuchte Box (voll lila) */
  /* Checked‐State: dickerer Rahmen */
  /* Hover‐Effekt: helleres Lila */
}
.sbm-booking-form .booking-map .tische-row1-wrapper ul, .sbm-booking-form .booking-map .tische-row2-wrapper ul {
  display: flex;
  flex-wrap: nowrap;
  /* keine Zeilenumbrüche */
  list-style-type: none !important;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  /* Items gleichmäßig verteilen */
}
.sbm-booking-form .booking-map .tische-row1-wrapper li, .sbm-booking-form .booking-map .tische-row2-wrapper li {
  box-sizing: border-box !important;
  list-style: none !important;
  flex: 0 0 auto;
  /* alle li‐Items nehmen gleichen Anteil */
  margin: 0;
  position: relative;
  /* für absolut positionierte Checkbox */
}
.sbm-booking-form .booking-map .tische-row1-wrapper li label, .sbm-booking-form .booking-map .tische-row2-wrapper li label {
  box-sizing: border-box !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 0;
  width: 10px;
  height: 26px;
  margin: 3px 0;
  margin-right: 4px;
  transition: border-width 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.sbm-booking-form .booking-map .tische-row1-wrapper li label[for="wpforms-114-field_48_84"], .sbm-booking-form .booking-map .tische-row1-wrapper li label[for="wpforms-114-field_48_85"], .sbm-booking-form .booking-map .tische-row2-wrapper li label[for="wpforms-114-field_48_84"], .sbm-booking-form .booking-map .tische-row2-wrapper li label[for="wpforms-114-field_48_85"] {
  margin-right: 60px;
}
.sbm-booking-form .booking-map .tische-row1-wrapper li input[type="checkbox"], .sbm-booking-form .booking-map .tische-row2-wrapper li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.sbm-booking-form .booking-map .tische-row1-wrapper li:not(.booked) label, .sbm-booking-form .booking-map .tische-row2-wrapper li:not(.booked) label {
  border: 2px solid #534395;
  background-color: transparent;
  opacity: 0.4;
}
.sbm-booking-form .booking-map .tische-row1-wrapper li.booked label, .sbm-booking-form .booking-map .tische-row2-wrapper li.booked label {
  background-color: #534395;
  cursor: not-allowed;
  border: 2px solid #534395;
}
.sbm-booking-form .booking-map .tische-row1-wrapper li.booked label[data-bs-toggle="popover"], .sbm-booking-form .booking-map .tische-row2-wrapper li.booked label[data-bs-toggle="popover"] {
  cursor: pointer !important;
}
.sbm-booking-form .booking-map .tische-row1-wrapper li:not(.booked) input[type="checkbox"]:checked + label, .sbm-booking-form .booking-map .tische-row2-wrapper li:not(.booked) input[type="checkbox"]:checked + label {
  background-color: transparent;
  border: 3px solid #534395;
  opacity: 1;
}
.sbm-booking-form .booking-map .tische-row1-wrapper li:not(.booked) label:hover, .sbm-booking-form .booking-map .tische-row2-wrapper li:not(.booked) label:hover {
  border-color: #7c5aff;
}
.sbm-booking-form .booking-map .popover-body img {
  max-width: 100%;
  height: auto;
  display: block;
}
.sbm-booking-form .tischbuchung-preis .wpforms-payment-quantity {
  display: none !important;
}
.sbm-booking-form label a {
  text-decoration: underline !important;
}
.sbm-booking-form #wpforms-confirmation-114 {
  background: #fff;
  border: 5px solid #b2dacc;
}
.sbm-booking-form .wpforms-confirmation-container-order-summary {
  border: 5px solid #b2dacc;
}
.sbm-booking-form .wpforms-confirmation-container-order-summary table, .sbm-booking-form .wpforms-confirmation-container-order-summary thead, .sbm-booking-form .wpforms-confirmation-container-order-summary th, .sbm-booking-form .wpforms-confirmation-container-order-summary tr, .sbm-booking-form .wpforms-confirmation-container-order-summary td {
  border: none !important;
}
.sbm-booking-form .wpforms-confirmation-container-order-summary th {
  font-weight: bold !important;
}
.sbm-booking-form .wpforms-confirmation-container-order-summary td {
  padding: 5px !important;
}
.sbm-booking-form .wpforms-page-button {
  background-color: var(--wp--preset--color--primary) !important;
  border-radius: 50px !important;
  transition: 500ms transform;
}
.sbm-booking-form .wpforms-page-button:hover {
  transform: scale(1.1);
}
.sbm-booking-form .wpforms-field-pagebreak .wpforms-page-button {
  margin: 0 15px;
  min-width: 150px !important;
}
.sbm-booking-form #final-back-button {
  position: relative;
  top: 150px;
}
.sbm-booking-form #wpforms-114-field_40-container {
  margin-bottom: -40px;
}
/* -----------------------------------
Info-Box
----------------------------------- */
.info-and-legend, .info-and-legend-fixed {
  margin-bottom: 60px;
  display: flex;
}
.info-and-legend h3, .info-and-legend-fixed h3 {
  color: #524395;
  margin-bottom: 5px !important;
  white-space: nowrap;
}
.info-and-legend h3:not(:first-child), .info-and-legend-fixed h3:not(:first-child) {
  margin-top: 30px !important;
}
.info-and-legend .price-info, .info-and-legend-fixed .price-info {
  padding-right: 120px;
  margin-right: 30px;
  border-right: 1px solid #524395;
}
.info-and-legend .legend img.icon-legende, .info-and-legend-fixed .legend img.icon-legende {
  width: 12px;
  height: auto;
  margin-right: 10px;
}
.info-and-legend .legend p, .info-and-legend-fixed .legend p {
  padding: 10px 0;
}
@media (max-width: 768px) {
  .info-and-legend .price-info, .info-and-legend-fixed .price-info {
    padding-right: 30px;
  }
}
@media (max-width: 576px) {
  .info-and-legend, .info-and-legend-fixed {
    flex-direction: column;
  }
  .info-and-legend .price-info, .info-and-legend-fixed .price-info {
    border-right: none;
    border-bottom: 1px solid #524395;
  }
}
.info-and-legend-fixed {
  position: fixed;
  left: calc(50% + 450px);
  top: 300px;
  z-index: 100;
  width: 280px;
  padding: 30px 30px;
  background-color: #F5F5F5;
}
.info-and-legend-fixed h3 {
  font-size: 1rem;
}
.info-and-legend-fixed p {
  margin-bottom: 0;
}
.info-and-legend-fixed .price-info {
  border: none;
  padding: 0;
}
.info-and-legend-fixed .legend {
  display: none;
}
@media (max-width: 1450px) {
  .info-and-legend-fixed {
    display: block;
    width: 200px;
    padding-right: 15px;
    left: auto;
    right: 0;
  }
  .info-and-legend-fixed h3 {
    white-space: wrap !important;
  }
}
@media (max-width: 1100px) {
  .info-and-legend-fixed {
    position: static;
    width: 280px;
    max-width: 100%;
    margin-top: -50px;
    padding: 30px 30px;
  }
}
.form-page-1 .info-and-legend-fixed {
  display: none;
}
/* -----------------------------------
Tabelle (Checkbox-Liste) Styling via Flexbox
----------------------------------- */
div.wpforms-container-full .wpforms-form .wpforms-field-html ul li {
  list-style: disc !important;
}
/* -----------------------------------
   Zusätzlicher CSS für Startseite
   (Seitentitel ausblenden)
   ----------------------------------- */
.home .wp-block-post-title {
  display: none;
}
/*== Module specific SCSS ==*/