@charset "UTF-8";
/*!
Theme Name: vsbi-theme
Theme URI: https://www.vsbi.de/
Author: future Training & Consulting
Author URI: https://www.futuretrainings.com/
Description: Schlankes, eigenes Theme auf Basis von _s, mit ACF Pro.
Version: 1.0.0
Text Domain: vsbi-theme
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/**
 * Fügt dem 2. Spalten-Wrapper ein padding-top hinzu,
 * außer wenn beide Nachbarn die gleiche bg--{key}-Klasse haben.
 *
 * @param {String} $col-sel  - Selector des Spaltenwrappers
 * @param {Length} $pad-diff - padding-top für "Farben sind verschieden"
 * @param {List}   $extra    - optionale zusätzliche BG-Schlüssel (z. B. 'primary-gradient')
 */
/* Reset/Normalize – Grundwerte */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: #ffffff;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  background-color: #d4dfe7;
  border: 0;
  margin-bottom: 1.5em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

ul, ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

embed, iframe, object {
  max-width: 100%;
}

/* Form-Resets */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  width: 100%;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
       appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Form-Styling (leichtgewichtig) */
button,
input[type=button],
input[type=reset],
input[type=submit] {
  border: 1px solid;
  border-color: #d4dfe7 #d4dfe7 rgb(179.2686567164, 198.6417910448, 212.7313432836);
  border-radius: 0.75rem;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}
button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  border-color: #d4dfe7 rgb(179.2686567164, 198.6417910448, 212.7313432836) rgb(244.7313432836, 247.3582089552, 249.2686567164);
}
button:active, button:focus,
input[type=button]:active,
input[type=button]:focus,
input[type=reset]:active,
input[type=reset]:focus,
input[type=submit]:active,
input[type=submit]:focus {
  border-color: rgb(244.7313432836, 247.3582089552, 249.2686567164) rgb(179.2686567164, 198.6417910448, 212.7313432836) rgb(179.2686567164, 198.6417910448, 212.7313432836);
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
  color: #666;
  border: 1px solid #d4dfe7;
  border-radius: 0.75rem;
  padding: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #d4dfe7;
}

/* Accessibility */
.screen-reader-text {
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  white-space: nowrap;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 0.75rem;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #06856c;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 2000;
}

/* ===========================
   Font-Face Definitionen
   Pfade relativ zu style.css im Theme-Root
=========================== */
/* ========== Mulish: eine Familie, mehrere Schnitte ========== */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200; /* Light */
  font-display: swap;
  src: url("assets/fonts/mulish/mulish-v18-latin-200.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400; /* Regular */
  font-display: swap;
  src: url("assets/fonts/mulish/mulish-v18-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 400; /* Regular Italic */
  font-display: swap;
  src: url("assets/fonts/mulish/mulish-v18-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 600; /* SemiBold */
  font-display: swap;
  src: url("assets/fonts/mulish/mulish-v18-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 700; /* Bold */
  font-display: swap;
  src: url("assets/fonts/mulish/mulish-v18-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 700; /* Bold Italic */
  font-display: swap;
  src: url("assets/fonts/mulish/mulish-v18-latin-700italic.woff2") format("woff2");
}
/* Optional: weitere Gewichte 300, 500, 600, 800, 900 analog */
/* ========== EB Garamond: eine Familie, mehrere Schnitte ========== */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/eb-garamond/eb-garamond-v32-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/eb-garamond/eb-garamond-v32-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500; /* Medium */
  font-display: swap;
  src: url("assets/fonts/eb-garamond/eb-garamond-v32-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500; /* Medium Italic */
  font-display: swap;
  src: url("assets/fonts/eb-garamond/eb-garamond-v32-latin-500italic.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/eb-garamond/eb-garamond-v32-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/eb-garamond/eb-garamond-v32-latin-700.woff2") format("woff2");
}
/* Weitere Gewichte analog (200–900) */
/* PT Sans */
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/pt-sans/pt-sans-v18-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/pt-sans/pt-sans-v18-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/pt-sans/pt-sans-v18-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/pt-sans/pt-sans-v18-latin-700italic.woff2") format("woff2");
}
/* ===========================
   Basis-Typografie
=========================== */
body,
button,
input,
select,
optgroup,
textarea {
  color: #0a3c3c;
  font-family: "PT Sans";
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.05rem);
  line-height: 1.5;
}

a {
  color: #06856c;
}
a:visited {
  color: rgb(1.5971223022, 35.4028776978, 28.7482014388);
}
a:hover, a:focus, a:active {
  color: #0a5050;
}
a:hover, a:active {
  outline: 0;
}

/* ===========================
   Headlines
=========================== */
h1, h2, h3, h4, h5, h6 {
  font-family: "EB Garamond";
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  margin-bottom: 0.75em;
}

h1 {
  font-size: 2rem;
}
@media (min-width: 64em) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  margin: 0 0 clamp(0.625rem, 1.2vw, 0.875rem) 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: #0a5050;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  h2 {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}

h3 {
  font-size: 1.5rem;
}
@media (min-width: 64em) {
  h3 {
    font-size: 1.75rem;
  }
}

h4 {
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.05rem);
  font-family: "PT Sans";
  font-weight: 700;
  font-style: normal;
}

/* ===========================
   Alternative Schrift
=========================== */
.alt-text {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
}

/* ===========================
   Text-Defaults
=========================== */
p {
  margin-bottom: 1.5em;
}

dfn, cite, em, i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
  font-style: italic;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #d4dfe7;
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code, kbd, tt, var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark, ins {
  background: rgb(70.809352518, 246.690647482, 212.0683453237);
  text-decoration: none;
}

big {
  font-size: 125%;
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.m-4 {
  margin: 0.25rem !important;
}

.mt-4 {
  margin-top: 0.25rem !important;
}

.mr-4 {
  margin-right: 0.25rem !important;
}

.mb-4 {
  margin-bottom: 0.25rem !important;
}

.ml-4 {
  margin-left: 0.25rem !important;
}

.mx-4 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-4 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.p-4 {
  padding: 0.25rem !important;
}

.pt-4 {
  padding-top: 0.25rem !important;
}

.pr-4 {
  padding-right: 0.25rem !important;
}

.pb-4 {
  padding-bottom: 0.25rem !important;
}

.pl-4 {
  padding-left: 0.25rem !important;
}

.px-4 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-4 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.m-8 {
  margin: 0.5rem !important;
}

.mt-8 {
  margin-top: 0.5rem !important;
}

.mr-8 {
  margin-right: 0.5rem !important;
}

.mb-8 {
  margin-bottom: 0.5rem !important;
}

.ml-8 {
  margin-left: 0.5rem !important;
}

.mx-8 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-8 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.p-8 {
  padding: 0.5rem !important;
}

.pt-8 {
  padding-top: 0.5rem !important;
}

.pr-8 {
  padding-right: 0.5rem !important;
}

.pb-8 {
  padding-bottom: 0.5rem !important;
}

.pl-8 {
  padding-left: 0.5rem !important;
}

.px-8 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-8 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.m-12 {
  margin: 0.75rem !important;
}

.mt-12 {
  margin-top: 0.75rem !important;
}

.mr-12 {
  margin-right: 0.75rem !important;
}

.mb-12 {
  margin-bottom: 0.75rem !important;
}

.ml-12 {
  margin-left: 0.75rem !important;
}

.mx-12 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.my-12 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.p-12 {
  padding: 0.75rem !important;
}

.pt-12 {
  padding-top: 0.75rem !important;
}

.pr-12 {
  padding-right: 0.75rem !important;
}

.pb-12 {
  padding-bottom: 0.75rem !important;
}

.pl-12 {
  padding-left: 0.75rem !important;
}

.px-12 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.py-12 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.m-16 {
  margin: 1rem !important;
}

.mt-16 {
  margin-top: 1rem !important;
}

.mr-16 {
  margin-right: 1rem !important;
}

.mb-16 {
  margin-bottom: 1rem !important;
}

.ml-16 {
  margin-left: 1rem !important;
}

.mx-16 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-16 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.p-16 {
  padding: 1rem !important;
}

.pt-16 {
  padding-top: 1rem !important;
}

.pr-16 {
  padding-right: 1rem !important;
}

.pb-16 {
  padding-bottom: 1rem !important;
}

.pl-16 {
  padding-left: 1rem !important;
}

.px-16 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-16 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.m-24 {
  margin: 1.5rem !important;
}

.mt-24 {
  margin-top: 1.5rem !important;
}

.mr-24 {
  margin-right: 1.5rem !important;
}

.mb-24 {
  margin-bottom: 1.5rem !important;
}

.ml-24 {
  margin-left: 1.5rem !important;
}

.mx-24 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-24 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.p-24 {
  padding: 1.5rem !important;
}

.pt-24 {
  padding-top: 1.5rem !important;
}

.pr-24 {
  padding-right: 1.5rem !important;
}

.pb-24 {
  padding-bottom: 1.5rem !important;
}

.pl-24 {
  padding-left: 1.5rem !important;
}

.px-24 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-24 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.m-32 {
  margin: 2rem !important;
}

.mt-32 {
  margin-top: 2rem !important;
}

.mr-32 {
  margin-right: 2rem !important;
}

.mb-32 {
  margin-bottom: 2rem !important;
}

.ml-32 {
  margin-left: 2rem !important;
}

.mx-32 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.my-32 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.p-32 {
  padding: 2rem !important;
}

.pt-32 {
  padding-top: 2rem !important;
}

.pr-32 {
  padding-right: 2rem !important;
}

.pb-32 {
  padding-bottom: 2rem !important;
}

.pl-32 {
  padding-left: 2rem !important;
}

.px-32 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.py-32 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.m-48 {
  margin: 3rem !important;
}

.mt-48 {
  margin-top: 3rem !important;
}

.mr-48 {
  margin-right: 3rem !important;
}

.mb-48 {
  margin-bottom: 3rem !important;
}

.ml-48 {
  margin-left: 3rem !important;
}

.mx-48 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-48 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.p-48 {
  padding: 3rem !important;
}

.pt-48 {
  padding-top: 3rem !important;
}

.pr-48 {
  padding-right: 3rem !important;
}

.pb-48 {
  padding-bottom: 3rem !important;
}

.pl-48 {
  padding-left: 3rem !important;
}

.px-48 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-48 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.-mt-4 {
  margin-top: calc(0.25rem * -1) !important;
}

.-mr-4 {
  margin-right: calc(0.25rem * -1) !important;
}

.-mb-4 {
  margin-bottom: calc(0.25rem * -1) !important;
}

.-ml-4 {
  margin-left: calc(0.25rem * -1) !important;
}

.-mt-8 {
  margin-top: calc(0.5rem * -1) !important;
}

.-mr-8 {
  margin-right: calc(0.5rem * -1) !important;
}

.-mb-8 {
  margin-bottom: calc(0.5rem * -1) !important;
}

.-ml-8 {
  margin-left: calc(0.5rem * -1) !important;
}

.-mt-12 {
  margin-top: calc(0.75rem * -1) !important;
}

.-mr-12 {
  margin-right: calc(0.75rem * -1) !important;
}

.-mb-12 {
  margin-bottom: calc(0.75rem * -1) !important;
}

.-ml-12 {
  margin-left: calc(0.75rem * -1) !important;
}

.-mt-16 {
  margin-top: calc(1rem * -1) !important;
}

.-mr-16 {
  margin-right: calc(1rem * -1) !important;
}

.-mb-16 {
  margin-bottom: calc(1rem * -1) !important;
}

.-ml-16 {
  margin-left: calc(1rem * -1) !important;
}

.-mt-24 {
  margin-top: calc(1.5rem * -1) !important;
}

.-mr-24 {
  margin-right: calc(1.5rem * -1) !important;
}

.-mb-24 {
  margin-bottom: calc(1.5rem * -1) !important;
}

.-ml-24 {
  margin-left: calc(1.5rem * -1) !important;
}

.-mt-32 {
  margin-top: calc(2rem * -1) !important;
}

.-mr-32 {
  margin-right: calc(2rem * -1) !important;
}

.-mb-32 {
  margin-bottom: calc(2rem * -1) !important;
}

.-ml-32 {
  margin-left: calc(2rem * -1) !important;
}

.-mt-48 {
  margin-top: calc(3rem * -1) !important;
}

.-mr-48 {
  margin-right: calc(3rem * -1) !important;
}

.-mb-48 {
  margin-bottom: calc(3rem * -1) !important;
}

.-ml-48 {
  margin-left: calc(3rem * -1) !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

.d-none {
  display: none !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.items-start {
  align-items: flex-start !important;
}

.items-center {
  align-items: center !important;
}

.items-end {
  align-items: flex-end !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.gap-8 {
  gap: 0.5rem !important;
}

.gap-16 {
  gap: 1rem !important;
}

.gap-24 {
  gap: 1.5rem !important;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fs-12 {
  font-size: 0.75rem !important;
}

.fs-14 {
  font-size: 0.875rem !important;
}

.fs-16 {
  font-size: 1rem !important;
}

.fs-20 {
  font-size: 1.25rem !important;
}

.fs-24 {
  font-size: 1.5rem !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-115 {
  line-height: 1.15 !important;
}

.lh-15 {
  line-height: 1.5 !important;
}

.text-link {
  color: #06856c !important;
}

.text-link-hover {
  color: #0a5050 !important;
}

.text-accent {
  color: #06856c !important;
}

.text-muted {
  color: #666 !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.maxw-100 {
  max-width: 100% !important;
}

.maxh-100 {
  max-height: 100% !important;
}

.border {
  border: 1px solid #d4dfe7 !important;
}

.border-0 {
  border: 0 !important;
}

.rounded {
  border-radius: 0.75rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-pill {
  border-radius: 9999px !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.shadow {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.shadow-lg {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.v-hidden {
  visibility: hidden !important;
}

.v-visible {
  visibility: visible !important;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes zoomPan {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-18px, -18px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
/* ===========================
   Root & Layout Globals
=========================== */
:root {
  --max-width-body: 2880px;
  --top-bar-h: clamp(2.25rem, calc(1.5rem + 1vw), 3rem);
  --nav-h: clamp(3.25rem, calc(2.5rem + 2vw), 5rem);
  --nav-logo-h: clamp(80px, calc(60px + 4vw), 120px);
  --vsbi-notch-h: 1.5rem;
  --section-pad-y: clamp(2.5rem, 8vw, 4rem);
  --section-pad-x: 1rem;
  --sticky-offset: -1.25rem;
  --section-stack-same-bg: 0.75rem;
  --af-bg: #d4dfe7;
  --af-text: #0a5050;
  --af-caret: #0a5050;
  --af-border: #06856c;
  --nav-color: rgba(255, 255, 255, 0.4);
  --nav-color-hover: #ffffff;
  --dot-color: var(--nav-color);
  --dot-color-hover: var(--nav-color-hover);
}

@media (prefers-color-scheme: dark) {
  :root {
    --af-bg: #0f2a2a;
    --af-text: #e6f4ff;
    --af-caret: #e6f4ff;
    --af-border: #56b1da;
  }
}
/* optional: mobile Feinkorrektur */
@media (max-width: 480px) {
  :root {
    --vsbi-notch-h: 1rem;
  }
}
html,
body {
  background-color: #0a3c3c;
  height: 100%;
  min-height: 100%;
  hyphens: auto;
  overflow-wrap: break-word;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: var(--max-width-body);
  margin: 0 auto !important;
  overflow-x: hidden;
}
body.is-modal-open {
  transform: none !important;
  border-width: 0 !important;
  width: 100% !important;
}

main {
  flex: 1 1 auto;
}

footer {
  flex-shrink: 0;
}

header,
main,
footer {
  background-color: #ffffff;
  width: calc(100% + 2px);
  margin-left: -1px;
}
@media (min-width: 2880px) {
  header,
  main,
  footer {
    border: 1px solid white;
    border-width: 0 1px;
  }
}

h1,
h2,
h3,
button,
nav,
.menu-item,
.badge,
.tag {
  hyphens: none;
}

section {
  padding: var(--section-pad-y) var(--section-pad-x);
}

section[class*=gray] .vsbi-slider {
  --nav-color: rgb(146.5373134328, 174.2835820896, 194.4626865672);
  --nav-color-hover: rgb(85.6119402985, 124.8507462687, 153.3880597015);
  --dot-color: rgb(162.9029850746, 186.4626865672, 203.5970149254);
  --dot-color-hover: rgb(130.171641791, 162.1044776119, 185.328358209);
}

section[class*=white] .vsbi-slider,
div.modal .vsbi-slider {
  --nav-color: rgb(179.2686567164, 198.6417910448, 212.7313432836);
  --nav-color-hover: rgb(113.8059701493, 149.9253731343, 176.1940298507);
  --dot-color: var(--nav-color);
  --dot-color-hover: var(--nav-color-hover);
}

section.bg--primary + section.bg--primary {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: calc(64em - 1px)) {
  section.bg--primary + section.bg--primary {
    padding-top: var(--section-stack-same-bg);
  }
}

section.bg--primary-dark + section.bg--primary-dark {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: calc(64em - 1px)) {
  section.bg--primary-dark + section.bg--primary-dark {
    padding-top: var(--section-stack-same-bg);
  }
}

section.bg--secondary + section.bg--secondary {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: calc(64em - 1px)) {
  section.bg--secondary + section.bg--secondary {
    padding-top: var(--section-stack-same-bg);
  }
}

section.bg--secondary-light + section.bg--secondary-light {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: calc(64em - 1px)) {
  section.bg--secondary-light + section.bg--secondary-light {
    padding-top: var(--section-stack-same-bg);
  }
}

section.bg--gray + section.bg--gray {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: calc(64em - 1px)) {
  section.bg--gray + section.bg--gray {
    padding-top: var(--section-stack-same-bg);
  }
}

section.bg--white + section.bg--white {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: calc(64em - 1px)) {
  section.bg--white + section.bg--white {
    padding-top: var(--section-stack-same-bg);
  }
}

/* Fokus für Links */
a:hover, a:active {
  outline: none;
}

ul,
ol,
dl {
  padding: 0;
  margin: 0 0 0 2.125rem;
  line-height: 1.375em;
}
ul li:not(:last-of-type),
ol li:not(:last-of-type),
dl li:not(:last-of-type) {
  padding-bottom: 0.5rem;
}

p:has(+ ul), p:has(+ ol), p:has(+ dl) {
  margin-bottom: 0.25rem;
}

.no-break {
  white-space: nowrap;
}

/* ===========================
   Section Background Utility Klassen (.bg--*)
=========================== */
.bg--primary {
  background-color: #0a5050;
}

.bg--primary-dark {
  background-color: #0a3c3c;
}

.bg--secondary {
  background-color: #06856c;
}

.bg--secondary-light {
  background-color: #0aa582;
}

.bg--gray {
  background-color: #d4dfe7;
}

.bg--white {
  background-color: #ffffff;
}

/* ===========================
   Gradient Background: primary-gradient
=========================== */
.bg--primary-gradient {
  /* Fallback-Farbmischung für ältere Browser */
  /* Hauptverlauf mit moderner color-mix()-Unterstützung */
  background: linear-gradient(35deg, color-mix(in srgb, #0a3c3c 70%, #0a5050) 0%, #0a5050 100%);
  /* Fallback für Browser ohne color-mix() */
}
@supports not (background: linear-gradient(35deg, color-mix(in srgb, red 50%, blue))) {
  .bg--primary-gradient {
    background: linear-gradient(35deg, #0a4242 0%, #0a5050 100%);
  }
}

/* ===========================
   Typo & Buttons in Sections
=========================== */
/* 1) Defaults EINMALIG – NICHT auf div/section! */
:root {
  --section-title-color: #0a5050;
  --section-text-color: #0a3c3c;
  --section-lead-color: rgb(7.4, 114.45, 98.2);
  --section-btn-fg: #ffffff;
  --section-btn-bg: #06856c;
  --section-btn-bd: transparent;
  --section-btn-fg-hover: #ffffff;
  --section-btn-overlay: #0a5050;
  --section-btn-bd-hover: transparent;
}

/* 2) Theme-Overrides – GELTEN FÜR JEDES ELEMENT MIT .bg--* */
.bg--primary,
.bg--primary-dark,
.section--theme-dark {
  --section-title-color: #ffffff;
  --section-text-color: #ffffff;
  --section-lead-color: #ffffff;
  --section-btn-fg: #ffffff;
  --section-btn-bg: #06856c;
  --section-btn-bd: transparent;
  --section-btn-fg-hover: #0a5050;
  --section-btn-overlay: #ffffff;
  --section-btn-bd-hover: transparent;
}

.bg--secondary,
.bg--secondary-light {
  --section-title-color: #ffffff;
  --section-text-color: #ffffff;
  --section-lead-color: #ffffff;
  --section-btn-fg: #ffffff;
  --section-btn-bg: #0a5050;
  --section-btn-bd: transparent;
  --section-btn-fg-hover: #0a5050;
  --section-btn-overlay: #ffffff;
  --section-btn-bd-hover: transparent;
}

.bg--white,
.bg--gray {
  --section-title-color: #0a5050;
  --section-text-color: #0a3c3c;
  --section-lead-color: #0a3c3c;
}

/* Farbverlauf */
.bg--primary-gradient {
  --section-title-color: #ffffff;
  --section-text-color: #ffffff;
  --section-lead-color: #ffffff;
  --section-btn-fg: #ffffff;
  --section-btn-bg: #06856c;
  --section-btn-bd: transparent;
  --section-btn-fg-hover: #0a5050;
  --section-btn-overlay: #ffffff;
  --section-btn-bd-hover: transparent;
}

/* ===========================
   Buttons in Sections
=========================== */
section .btn,
.modal .btn {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: none;
  background-color: var(--section-btn-bg);
  color: var(--section-btn-fg) !important;
  text-decoration: none;
  overflow: hidden;
  transition: all 220ms ease-out, box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
section .btn, section .btn *,
.modal .btn,
.modal .btn * {
  position: relative;
  z-index: 1;
  color: inherit;
  transition: all 220ms ease-out;
}
section .btn::before,
.modal .btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: var(--section-btn-overlay);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
section .btn:hover, section .btn:focus, section .btn:focus-visible,
.modal .btn:hover,
.modal .btn:focus,
.modal .btn:focus-visible {
  color: var(--section-btn-fg-hover) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}
section .btn:hover::before, section .btn:focus::before, section .btn:focus-visible::before,
.modal .btn:hover::before,
.modal .btn:focus::before,
.modal .btn:focus-visible::before {
  transform: scaleX(1);
}
section .btn:active,
.modal .btn:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition-duration: 160ms;
}

/* ===========================
   Buttons außerhalb (Header/Footer)
=========================== */
header .btn,
footer .btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: none;
  background-color: #06856c;
  color: #ffffff !important;
  text-decoration: none;
  overflow: hidden;
  transition: all 220ms ease-out, box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
header .btn, header .btn *,
footer .btn,
footer .btn * {
  position: relative;
  z-index: 1;
  color: inherit;
  transition: all 220ms ease-out;
}
header .btn::before,
footer .btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: #ffffff;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
header .btn:hover, header .btn:focus, header .btn:focus-visible,
footer .btn:hover,
footer .btn:focus,
footer .btn:focus-visible {
  color: #0a5050 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}
header .btn:hover::before, header .btn:focus::before, header .btn:focus-visible::before,
footer .btn:hover::before,
footer .btn:focus::before,
footer .btn:focus-visible::before {
  transform: scaleX(1);
}
header .btn:active,
footer .btn:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition-duration: 160ms;
}

/* ===========================
    Abstand, wenn unmittelbar ein Infoblock oder Inhaltsblock mit Notch folgt 
=========================== */
section:has(+ .vsbi-infoblock.has-notch),
section:has(+ * > .vsbi-infoblock.has-notch),
section:has(~ * > .vsbi-infoblock.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

section:has(+ .vsbi-inhaltsblock.has-notch),
section:has(+ * > .vsbi-inhaltsblock.has-notch),
section:has(~ * > .vsbi-inhaltsblock.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

section:has(+ .vsbi-projects.has-notch),
section:has(+ * > .vsbi-projects.has-notch),
section:has(~ * > .vsbi-projects.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

section:has(+ .vsbi-members.has-notch),
section:has(+ * > .vsbi-members.has-notch),
section:has(~ * > .vsbi-members.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

section:has(+ .vsbi-partners.has-notch),
section:has(+ * > .vsbi-partners.has-notch),
section:has(~ * > .vsbi-partners.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

section:has(+ .vsbi-join.has-notch),
section:has(+ * > .vsbi-join.has-notch),
section:has(~ * > .vsbi-join.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

.section:has(+ .vsbi-infoblock.has-notch),
.section:has(+ * > .vsbi-infoblock.has-notch),
.section:has(~ * > .vsbi-infoblock.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

.section:has(+ .vsbi-inhaltsblock.has-notch),
.section:has(+ * > .vsbi-inhaltsblock.has-notch),
.section:has(~ * > .vsbi-inhaltsblock.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

.section:has(+ .vsbi-projects.has-notch),
.section:has(+ * > .vsbi-projects.has-notch),
.section:has(~ * > .vsbi-projects.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

.section:has(+ .vsbi-members.has-notch),
.section:has(+ * > .vsbi-members.has-notch),
.section:has(~ * > .vsbi-members.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

.section:has(+ .vsbi-partners.has-notch),
.section:has(+ * > .vsbi-partners.has-notch),
.section:has(~ * > .vsbi-partners.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

.section:has(+ .vsbi-join.has-notch),
.section:has(+ * > .vsbi-join.has-notch),
.section:has(~ * > .vsbi-join.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

main > *:has(+ .vsbi-infoblock.has-notch),
main > *:has(+ * > .vsbi-infoblock.has-notch),
main > *:has(~ * > .vsbi-infoblock.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

main > *:has(+ .vsbi-inhaltsblock.has-notch),
main > *:has(+ * > .vsbi-inhaltsblock.has-notch),
main > *:has(~ * > .vsbi-inhaltsblock.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

main > *:has(+ .vsbi-projects.has-notch),
main > *:has(+ * > .vsbi-projects.has-notch),
main > *:has(~ * > .vsbi-projects.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

main > *:has(+ .vsbi-members.has-notch),
main > *:has(+ * > .vsbi-members.has-notch),
main > *:has(~ * > .vsbi-members.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

main > *:has(+ .vsbi-partners.has-notch),
main > *:has(+ * > .vsbi-partners.has-notch),
main > *:has(~ * > .vsbi-partners.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

main > *:has(+ .vsbi-join.has-notch),
main > *:has(+ * > .vsbi-join.has-notch),
main > *:has(~ * > .vsbi-join.has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}

/* ---------------------------------------
   JOIN: korrekter Abstand + Überlappung
   (wie beim Infoblock)
---------------------------------------- */
section:has(+ .vsbi-join.has-notch),
.section:has(+ .vsbi-join.has-notch),
main > *:has(+ .vsbi-join.has-notch) {
  /* normaler Section-Abstand + Platz für Kerbe */
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
  /* Kerbe greift in diesen Zusatzraum hinein */
  margin-bottom: calc(-1 * var(--vsbi-notch-h));
}

/* ===========================
    Lässt Section überlappen, damit keine unschöne Pixellinie entsteht
=========================== */
section,
.section {
  position: relative;
  z-index: 1;
}

section + section,
.section + .section {
  margin-top: -1px;
}

/* ===========================
   Utilities
=========================== */
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  white-space: nowrap;
}
.visually-hidden:focus, .visually-hidden:active {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
}

.content_block p {
  margin-bottom: clamp(0.625rem, 1.2vw, 0.875rem);
}

::-moz-selection {
  background: #0a5050;
  color: #fff;
}

::selection {
  background: #0a5050;
  color: #fff;
}

::-moz-selection {
  background: #0a5050;
  color: #fff;
}

/* ===========================
   Header (Top-Bar, Main-Nav, Hero)
   Struktur:
   .site-header
     ├── .site-header__topbar
     ├── .site-header__nav
     │     ├── .site-header__brand
     │     ├── .site-header__toggle
     │     └── .site-header__menu
     └── .site-header__hero
=========================== */
.site-header {
  position: relative;
  z-index: 1000;
  background: #ffffff;
  color: #0a3c3c;
  border-bottom: 1px solid #d4dfe7;
  /* Optional: Sticky Header */
}
.site-header--sticky {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header {
  /* ---------- Top-Bar (Anmeldung-Leiste) ---------- */
}
.site-header__topbar {
  background: #0a5050;
  color: #ffffff;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}
.site-header__topbar a {
  color: #ffffff;
  text-decoration: none;
}
.site-header__topbar a:hover, .site-header__topbar a:focus {
  color: #06856c;
  text-decoration: underline;
}
.site-header__topbar {
  /* Mobile: optional ausblenden oder komprimieren */
}
@media (max-width: calc(37.5em - 1px)) {
  .site-header__topbar {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    /* .site-header--compact &__topbar { display: none; } */
  }
}
.site-header {
  /* ---------- Hauptnavigation + Logo (Nav-Bar) ---------- */
}
.site-header__nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid #d4dfe7;
  /* Brand (Logo) */
}
.site-header__nav > .site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header__nav > .site-header__brand .brand__logo {
  display: block;
  max-height: 48px;
  width: auto;
}
.site-header__nav > .site-header__brand .brand__title {
  font-family: "EB Garamond";
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  color: #0a3c3c;
  margin: 0;
}
@media (max-width: calc(37.5em - 1px)) {
  .site-header__nav > .site-header__brand .brand__logo {
    max-height: 40px;
  }
  .site-header__nav > .site-header__brand .brand__title {
    display: none;
  }
}
.site-header__nav {
  /* Toggle (Hamburger) – nur mobil sichtbar */
}
.site-header__nav > .site-header__toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Button-Styling */
}
.site-header__nav > .site-header__toggle button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #d4dfe7;
  background: #ffffff;
  color: #0a3c3c;
  border-radius: 0.75rem;
  padding: 0.5rem 0.6rem;
  line-height: 1;
  cursor: pointer;
  /* Icon */
}
.site-header__nav > .site-header__toggle button .icon {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.site-header__nav > .site-header__toggle button .icon::before, .site-header__nav > .site-header__toggle button .icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}
.site-header__nav > .site-header__toggle button .icon::before {
  top: -6px;
}
.site-header__nav > .site-header__toggle button .icon::after {
  top: 6px;
}
.site-header__nav > .site-header__toggle button {
  /* Zustand 'is-open' für Animation */
}
.site-header__nav > .site-header__toggle button.is-open .icon {
  background: transparent;
}
.site-header__nav > .site-header__toggle button.is-open .icon::before {
  top: 0;
  transform: rotate(45deg);
}
.site-header__nav > .site-header__toggle button.is-open .icon::after {
  top: 0;
  transform: rotate(-45deg);
}
.site-header__nav > .site-header__toggle button:hover {
  border-color: rgb(179.2686567164, 198.6417910448, 212.7313432836);
}
.site-header__nav > .site-header__toggle button:focus {
  outline: 2px solid #06856c;
  outline-offset: 2px;
}
.site-header__nav > .site-header__toggle {
  /* Desktop: Toggle ausblenden */
}
@media (min-width: 37.5em) {
  .site-header__nav > .site-header__toggle {
    display: none;
  }
}
.site-header__nav {
  /* Menü */
}
.site-header__nav > .site-header__menu {
  /* Desktop: horizontales Menü */
}
@media (min-width: 37.5em) {
  .site-header__nav > .site-header__menu nav ul {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-header__nav > .site-header__menu nav ul li {
    position: relative;
  }
  .site-header__nav > .site-header__menu nav ul li a {
    display: inline-block;
    color: #0a3c3c;
    text-decoration: none;
    padding: 0.25rem 0;
    font-weight: 500;
  }
  .site-header__nav > .site-header__menu nav ul li a:hover, .site-header__nav > .site-header__menu nav ul li a:focus {
    color: #0a5050;
  }
  .site-header__nav > .site-header__menu nav ul li {
    /* Dropdown (2. Ebene) */
  }
  .site-header__nav > .site-header__menu nav ul li ul {
    position: absolute;
    left: 0;
    top: calc(100% + 0.25rem);
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #d4dfe7;
    border-radius: 0.75rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    padding: 0.5rem;
    list-style: none;
    display: none;
    z-index: 1100;
  }
  .site-header__nav > .site-header__menu nav ul li ul li a {
    padding: 0.375rem 0.5rem;
    display: block;
  }
  .site-header__nav > .site-header__menu nav ul li:hover > ul, .site-header__nav > .site-header__menu nav ul li.is-open > ul {
    display: block;
  }
}
.site-header__nav > .site-header__menu {
  /* Mobile: Offcanvas/Accordion Menü */
}
@media (max-width: calc(37.5em - 1px)) {
  .site-header__nav > .site-header__menu {
    position: fixed;
    inset: 0 0 auto 0;
    top: 61px;
    max-height: calc(100vh - 60px);
    overflow: auto;
    background: #ffffff;
    border-top: 1px solid #d4dfe7;
    padding: 0.75rem 1rem;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 1050;
    /* Zustand aktiv (z. B. via JS: .is-open) */
  }
  .site-header__nav > .site-header__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-header__nav > .site-header__menu nav ul {
    display: grid;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-header__nav > .site-header__menu nav ul li {
    border-bottom: 1px solid #d4dfe7;
  }
  .site-header__nav > .site-header__menu nav ul li a {
    display: block;
    padding: 0.625rem 0.25rem;
    color: #0a3c3c;
    text-decoration: none;
  }
  .site-header__nav > .site-header__menu nav ul li a:hover, .site-header__nav > .site-header__menu nav ul li a:focus {
    color: #0a5050;
  }
  .site-header__nav > .site-header__menu nav ul li {
    /* Submenu als Accordion */
  }
  .site-header__nav > .site-header__menu nav ul li ul {
    display: none;
    padding-left: 0.5rem;
    border-left: 2px solid #d4dfe7;
    margin: 0.25rem 0 0.5rem;
  }
  .site-header__nav > .site-header__menu nav ul li.is-open > ul {
    display: block;
  }
}
.site-header {
  /* ---------- Hero / Headerbild + Text ---------- */
}
.site-header__hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  color: #ffffff;
  min-height: 280px;
  padding: 3rem 1rem;
  /* Bild/Overlay via CSS-Variablen oder ACF-Optionen */
  background-color: #0a3c3c;
  background-image: var(--hero-bg-image, none);
  background-position: center;
  background-size: cover;
  /* Overlay */
}
.site-header__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
}
.site-header__hero {
  /* Inhaltsschicht */
}
.site-header__hero .hero__content {
  position: relative;
  z-index: 1;
  max-width: 65ch;
}
.site-header__hero .hero__content .hero__kicker {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #06856c;
  margin-bottom: 0.5rem;
}
.site-header__hero .hero__content .hero__title {
  font-family: "EB Garamond";
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.site-header__hero .hero__content .hero__lead {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  color: #d4dfe7;
  margin: 0 auto;
}
.site-header__hero .hero__content {
  /* CTA optional */
}
.site-header__hero .hero__content .hero__actions {
  margin-top: 1rem;
  display: inline-flex;
  gap: 0.75rem;
}
@media (max-width: calc(37.5em - 1px)) {
  .site-header__hero {
    min-height: 220px;
    padding: 2rem 1rem;
  }
}

/* ===========================
   Hilfsklassen für Zustände
=========================== */
/* Wenn der Body den Zustand setzt (z. B. via JS beim Toggle) */
.has-mobile-menu-open {
  overflow: hidden;
}

/* Optional kompakter Header (z. B. nach Scroll) */
.site-header--compact .site-header__nav {
  padding: 0.5rem 1rem;
}
.site-header--compact .site-header__brand .brand__logo {
  max-height: 40px;
}

/* Fokus-Style für bessere Accessibility in der Navigation */
.site-header :focus-visible {
  outline: none;
}

#masthead {
  background-color: #0a3c3c;
}
#masthead .top-bar,
#masthead .main-navigation-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: var(--max-width-body);
  z-index: 999;
}
#masthead .main-navigation-wrapper {
  top: var(--top-bar-h);
}
#masthead .top-bar {
  background-color: #0a5050;
  padding: 0 2.5rem;
  height: var(--top-bar-h);
  display: flex;
  align-items: center;
  justify-content: right;
}
#masthead .top-bar a {
  color: #ffffff;
  text-decoration: none;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 0.9rem;
  position: relative;
  text-decoration: none;
}
#masthead .top-bar a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 105%;
  height: 1px;
  background: #ffffff;
  transform-origin: center;
  transform: translateX(-50%) scaleX(0);
  transition: transform 160ms ease-out;
}
#masthead .top-bar a:hover::after, #masthead .top-bar a:focus::after, #masthead .top-bar a:active::after, #masthead .top-bar a.is-active::after, #masthead .top-bar a[aria-current=page]::after {
  transform: translateX(-50%) scaleX(1);
}
#masthead .top-bar a:focus-visible {
  outline: 3px solid rgb(10.4028776978, 230.5971223022, 187.2517985612);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #masthead .top-bar a::after {
    transition: none;
  }
}
#masthead .top-bar a:focus, #masthead .top-bar a:focus-visible, #masthead .top-bar a:focus-within {
  outline: none !important;
}
#masthead .top-bar span.top-bar__sep {
  margin: 0 0.5rem;
  color: #ffffff;
}
#masthead .hero-header .hero-text,
#masthead .hero-header .hero-split__text {
  text-align: center;
  color: #ffffff;
}
#masthead .hero-header .hero-text h1,
#masthead .hero-header .hero-split__text h1 {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  color: #ffffff;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  #masthead .hero-header .hero-text h1,
  #masthead .hero-header .hero-split__text h1 {
    font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  }
}
#masthead .hero-header .hero-text p,
#masthead .hero-header .hero-split__text p {
  margin: 0;
  font-family: "Mulish";
  font-weight: 200;
  font-style: normal;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}
#masthead .hero-header.home, #masthead .hero-header.hero-split {
  margin-top: calc(var(--top-bar-h) + var(--nav-h));
}
#masthead .hero-header.home {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#masthead .hero-header.home .hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/images/header_background.png") no-repeat center center;
  background-size: cover;
  z-index: -1;
  filter: brightness(0.95) contrast(1.02) saturate(1);
}
#masthead .hero-header.home .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  width: 100%;
  padding: 1rem 1.25rem;
}
#masthead .hero-header.hero-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  min-height: 450px;
}
#masthead .hero-header.hero-split .hero-split__text {
  background-color: #0a3c3c;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 3rem;
  position: relative;
  z-index: 2;
}
#masthead .hero-header.hero-split .hero-split__text h1 {
  font-size: clamp(2.25rem, 5.75vw, 4.25rem);
}
@media (max-width: calc(37.5em - 1px)) {
  #masthead .hero-header.hero-split .hero-split__text h1 {
    hyphens: auto;
    margin: 0 1rem;
  }
}
#masthead .hero-header.hero-split .hero-split__image {
  background-size: cover;
  background-position: center;
  position: relative;
}
#masthead .hero-header.hero-split .hero-split__image::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.05vw;
  width: 100%;
  height: 100%;
  background-color: #0a3c3c;
  clip-path: polygon(0 0, 30% 0, 0 100%);
  outline: 20px solid #0a3c3c;
  outline-offset: -2px;
  z-index: 1;
}
#masthead .hero-header.hero-split .hero-split__image::after {
  /* Border-Dreieck */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a3c3c;
  clip-path: polygon(0 0, 31% 0, 0 100%);
  z-index: 1;
}
@media (max-width: calc(48em - 1px)) {
  #masthead .hero-header.hero-split {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
  }
  #masthead .hero-header.hero-split .hero-split__text {
    height: calc(100% + 1px);
    margin-top: -1px;
    padding: 1rem 0;
    order: 2;
  }
  #masthead .hero-header.hero-split .hero-split__image {
    height: 100%;
    order: 1;
  }
  #masthead .hero-header.hero-split .hero-split__image::before {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    top: unset;
    left: 0;
    bottom: 0;
    height: 33.3333333333%;
    transform: rotate(180deg);
  }
  #masthead .hero-header.hero-split .hero-split__image::after {
    display: none;
  }
}
@media (min-width: 96em) {
  #masthead .hero-header.hero-split .hero-split__image::before {
    left: -0.0875vw;
  }
}
@media (max-width: calc(48em - 1px)) {
  #masthead .top-bar {
    padding-right: 1.625rem;
  }
}
@media (max-width: calc(64em - 1px)) {
  #masthead .top-bar a {
    font-size: 0.85rem;
  }
  #masthead .hero-header.home,
  #masthead .hero-header.hero-split {
    margin-top: 5.5rem;
  }
}
@media (max-width: calc(37.5em - 1px)) {
  #masthead .top-bar {
    padding-right: 1.375rem;
  }
}

/* ===========================
   Footer-Navigation (unten)
   =========================== */
footer nav {
  background-color: #0a5050;
  /* Standard: kompakt, keine feste Höhe */
  height: 120px;
  min-height: 0;
  padding-block: 0;
  /* Inhalt vertikal zentrieren, wirkt schlanker */
  display: flex;
  align-items: center;
}
footer nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* fester, gleichmäßiger Abstand (eng) */
  --gap: .4rem;
  gap: var(--gap);
  list-style: none;
  width: 100%;
  /* keine erzwungene volle Höhe */
  /* height: 100%;  <-- entfernen */
}
footer nav li {
  /* natürliche Breite; kein Dehnen */
  flex: 0 0 auto;
  padding-bottom: 0 !important;
  /* kein zusätzliches padding – Abstand kommt ausschließlich aus gap */
  /* padding: 0 0.5rem;  <-- entfernen */
}
footer nav a {
  color: #ffffff !important;
  text-decoration: none;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 0.9rem;
  /* sehr kompaktes Innenpadding, schlanke Zeile */
  padding: 0.1rem 0.08rem;
}
footer nav a:hover, footer nav a:focus {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
footer nav a:focus-visible {
  outline: none;
}

/* Nur „groß“: min. 120px Höhe der Nav */
@media (min-width: 64em) {
  /* ~1024px */
  footer nav {
    height: 120px;
    /* nur groß: Mindesthöhe 120px */
    align-items: center;
    /* vertikal zentrieren innerhalb der Mindesthöhe */
  }
}
/* ===========================
   Search-Band mit Logo
   =========================== */
.footer-searchband {
  --logo-size: clamp(65px, 10.5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #d4dfe7;
  padding-block: clamp(1.6rem, 4vw, 2.6rem);
  height: clamp(180px, 15vw, 240px);
}
.footer-searchband .footer-searchband__logo {
  position: absolute;
  left: 50%;
  top: clamp(0.5rem, 1vw, 0.6rem);
  /* minimal tiefer */
  transform: translate(-50%, -50%);
  z-index: 2;
  background-image: url("assets/images/logo_vsbi_min.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.5s ease-in-out all;
}
.footer-searchband .footer-searchband__logo:focus, .footer-searchband .footer-searchband__logo:focus-within, .footer-searchband .footer-searchband__logo:focus-visible, .footer-searchband .footer-searchband__logo:hover {
  background-image: url("assets/images/logo_vsbi_min_hover.svg");
  transition: 0.5s ease-in-out all;
}
.footer-searchband .footer-searchband__logo .footer-logo {
  display: block;
  width: var(--logo-size);
  height: auto;
  opacity: 0;
}
.footer-searchband .footer-searchband__search {
  width: 90vw;
  max-width: 580px;
}
.footer-searchband .footer-searchband__search form.search-form {
  margin-top: calc(var(--logo-size) / 5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  /* durchgehende Pille */
  align-items: stretch;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
}
.footer-searchband .footer-searchband__search form.search-form .search-field {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #0a3c3c;
  background: #ffffff;
  border: 1px solid rgb(179.2686567164, 198.6417910448, 212.7313432836);
  border-right: 0;
  border-radius: 0.75rem 0 0 0.75rem;
  padding: 0.85rem 1rem;
}
.footer-searchband .footer-searchband__search form.search-form .search-field::-moz-placeholder {
  color: #0a3c3c;
  opacity: 0.85;
  font-size: 0.875rem;
}
.footer-searchband .footer-searchband__search form.search-form .search-field::placeholder {
  color: #0a3c3c;
  opacity: 0.85;
  font-size: 0.875rem;
}
.footer-searchband .footer-searchband__search form.search-form .search-field:focus, .footer-searchband .footer-searchband__search form.search-form .search-field:focus-visible {
  outline: none;
  border: 2px solid #06856c;
  border-right: none;
}
.footer-searchband .footer-searchband__search form.search-form .search-submit {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease-in-out, transform 0.15s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0 0.75rem 0.75rem 0;
  border: none;
  background-color: #0a5050;
  color: #ffffff !important;
  text-decoration: none;
  overflow: hidden;
  transition: all 220ms ease-out, box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer-searchband .footer-searchband__search form.search-form .search-submit, .footer-searchband .footer-searchband__search form.search-form .search-submit * {
  position: relative;
  z-index: 1;
  color: inherit;
  transition: all 220ms ease-out;
}
.footer-searchband .footer-searchband__search form.search-form .search-submit::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: #06856c;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer-searchband .footer-searchband__search form.search-form .search-submit:hover, .footer-searchband .footer-searchband__search form.search-form .search-submit:focus, .footer-searchband .footer-searchband__search form.search-form .search-submit:focus-visible {
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.footer-searchband .footer-searchband__search form.search-form .search-submit:hover::before, .footer-searchband .footer-searchband__search form.search-form .search-submit:focus::before, .footer-searchband .footer-searchband__search form.search-form .search-submit:focus-visible::before {
  transform: scaleX(1);
}
.footer-searchband .footer-searchband__search form.search-form .search-submit:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition-duration: 160ms;
}
.footer-searchband .footer-searchband__search form.search-form .search-field,
.footer-searchband .footer-searchband__search form.search-form .search-submit {
  font-size: clamp(14px, 1.5vw, 16px);
  height: clamp(36px, 4vw, 40px);
  padding-inline: clamp(12px, 2vw, 16px);
}
@media (max-width: 37.5em) {
  .footer-searchband .footer-searchband__search form.search-form {
    position: relative;
    max-width: 90vw;
    margin: 0 auto;
  }
  .footer-searchband .footer-searchband__search form.search-form .search-field {
    width: calc(100% - 40px);
  }
  .footer-searchband .footer-searchband__search form.search-form .search-submit {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    font-size: 0;
    background: url("assets/images/lupe_weiss.svg") no-repeat center center;
    background-color: #0a5050;
    background-size: 1rem 1rem;
  }
}

/* ===========================
   Zitat-Sektion (oben)
   =========================== */
.footer-quote {
  padding-top: clamp(3rem, 7vw, 3.6rem);
  padding-bottom: clamp(3.5rem, 8vw, 4.2rem);
  padding-left: 1rem;
  padding-right: 1rem;
  background: #ffffff;
  color: #0a5050;
  text-align: center;
}
.footer-quote .footer-quote__text {
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  font-size: clamp(0.95rem, 4vw, 1.875rem);
  line-height: 1.45;
  max-width: 700px;
  margin-inline: auto;
  margin-block: 0;
}
.footer-quote .footer-quote__text p {
  margin-top: 0;
}
.footer-quote .footer-quote__text br {
  line-height: 1.45;
}
.footer-quote .footer-quote__author {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  color: #0a5050;
  opacity: 0.85;
  margin-block-start: 0.75rem;
  font-style: italic;
}

/* ===========================
   Footer-Meta Navigation (kompakt)
   =========================== */
.footer-meta {
  background: #0a5050;
  color: #ffffff;
  padding: 0;
  /* enges vertikales Padding – Ergänzung zur nav-min-height */
}
.footer-meta .footer-meta__nav ul {
  display: flex;
  flex-wrap: wrap;
  /* horizontal spacing between items */
  -moz-column-gap: clamp(1rem, 2vw, 1.5rem);
       column-gap: clamp(1rem, 2vw, 1.5rem);
  /* vertical spacing between rows */
  row-gap: 3rem;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-meta .footer-meta__nav li {
  flex: 0 0 auto;
}
.footer-meta .footer-meta__nav a {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: #ffffff;
  text-decoration: none;
  padding: 0.1rem 0.08rem;
  transition: color 0.12s, text-decoration-color 0.12s, background 0.12s;
  position: relative;
  text-decoration: none;
}
.footer-meta .footer-meta__nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  width: 100%;
  height: 1px;
  background: #ffffff;
  transform-origin: center;
  transform: translateX(-50%) scaleX(0);
  transition: transform 160ms ease-out;
}
.footer-meta .footer-meta__nav a:hover::after, .footer-meta .footer-meta__nav a:focus::after, .footer-meta .footer-meta__nav a:active::after, .footer-meta .footer-meta__nav a.is-active::after, .footer-meta .footer-meta__nav a[aria-current=page]::after {
  transform: translateX(-50%) scaleX(1);
}
.footer-meta .footer-meta__nav a:focus-visible {
  outline: 3px solid rgb(10.4028776978, 230.5971223022, 187.2517985612);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .footer-meta .footer-meta__nav a::after {
    transition: none;
  }
}
.footer-meta .footer-meta__nav a:focus-visible {
  outline: none;
}
.footer-meta .footer-meta__nav .current-menu-item > a,
.footer-meta .footer-meta__nav .current_page_item > a {
  color: #06856c;
}
.footer-meta .footer-meta__nav .current-menu-item > a::after,
.footer-meta .footer-meta__nav .current_page_item > a::after {
  transform: translateX(-50%) scaleX(1);
}

@media (max-width: 640px) {
  .footer-meta .footer-meta__nav ul,
  footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 420px;
    margin: 0 auto;
  }
  .footer-meta .footer-meta__nav li,
  footer nav li {
    padding: 0.25rem 0;
  }
}
/* Navigation */
.main-navigation {
  display: block;
  width: 100%;
}
.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}
.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}
.main-navigation ul ul a {
  width: 200px;
}
.main-navigation ul li {
  position: relative;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
  left: auto;
}
.main-navigation a {
  display: block;
  text-decoration: none;
}
.main-navigation .menu-toggle, .main-navigation.toggled ul {
  display: block;
}

/* ===========================
   Navigation Styles
   =========================== */
.main-navigation-wrapper {
  background-color: #ffffff;
  position: relative;
}
.main-navigation-wrapper .container {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.75rem 0.5rem 2.5rem;
  position: relative;
}
.main-navigation-wrapper .container a,
.main-navigation-wrapper .container label,
.main-navigation-wrapper .container input {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
}
.main-navigation-wrapper .container .site-branding {
  background-image: url("assets/images/logo_vsbi.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.5s ease-in-out all;
}
.main-navigation-wrapper .container .site-branding:focus, .main-navigation-wrapper .container .site-branding:focus-within, .main-navigation-wrapper .container .site-branding:focus-visible, .main-navigation-wrapper .container .site-branding:hover {
  background-image: url("assets/images/logo_vsbi_hover.svg");
  transition: 0.5s ease-in-out all;
}
.main-navigation-wrapper .container .site-logo {
  opacity: 0;
  display: inline-block;
  max-height: var(--nav-logo-h);
  position: relative;
  z-index: 1;
}
.main-navigation-wrapper .container {
  /* Desktop-Menü */
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav li a {
  text-decoration: none;
  color: #0a5050;
  font-weight: 500;
  transition: color 0.2s ease;
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:focus, .main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:hover, .main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:active {
  color: #06856c;
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav li a {
  position: relative;
  text-decoration: none;
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  width: 100%;
  height: 1px;
  background: #06856c;
  transform-origin: center;
  transform: translateX(-50%) scaleX(0);
  transition: transform 160ms ease-out;
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:hover::after, .main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:focus::after, .main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:active::after, .main-navigation-wrapper .container .menu-container.menu-main ul.nav li a.is-active::after, .main-navigation-wrapper .container .menu-container.menu-main ul.nav li a[aria-current=page]::after {
  transform: translateX(-50%) scaleX(1);
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:focus-visible {
  outline: 3px solid rgb(10.4028776978, 230.5971223022, 187.2517985612);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .main-navigation-wrapper .container .menu-container.menu-main ul.nav li a::after {
    transition: none;
  }
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav li a:focus-visible {
  outline: none;
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav .current-menu-item > a,
.main-navigation-wrapper .container .menu-container.menu-main ul.nav .current_page_item > a {
  color: #06856c;
}
.main-navigation-wrapper .container .menu-container.menu-main ul.nav .current-menu-item > a::after,
.main-navigation-wrapper .container .menu-container.menu-main ul.nav .current_page_item > a::after {
  transform: translateX(-50%) scaleX(1);
}
.main-navigation-wrapper .container .hamburger-toggle {
  display: none;
  width: 40px;
  height: 32px;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #0a5050;
}
.main-navigation-wrapper .container .hamburger-toggle .bars,
.main-navigation-wrapper .container .hamburger-toggle .bars::before,
.main-navigation-wrapper .container .hamburger-toggle .bars::after {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 0.1rem;
  background-color: currentColor;
  border-radius: 2px;
  transform-origin: center center;
  transition: transform 0.28s ease, background-color 0.2s ease;
  content: "";
}
.main-navigation-wrapper .container .hamburger-toggle .bars {
  top: 50%;
  transform: translate(-50%, -50%);
}
.main-navigation-wrapper .container .hamburger-toggle .bars::before {
  top: calc(50% - 7px);
  transform: translateX(-50%);
  margin-top: -0.1rem;
}
.main-navigation-wrapper .container .hamburger-toggle .bars::after {
  top: calc(50% + 7px);
  transform: translateX(-50%);
}
.main-navigation-wrapper .container .hamburger-toggle .bars, .main-navigation-wrapper .container .hamburger-toggle .bars::before, .main-navigation-wrapper .container .hamburger-toggle .bars::after {
  height: 0.125rem;
}
.main-navigation-wrapper .container .hamburger-toggle.is-open .bars {
  background-color: transparent;
}
.main-navigation-wrapper .container .hamburger-toggle.is-open .bars::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.main-navigation-wrapper .container .hamburger-toggle.is-open .bars::before {
  margin-top: 0;
}
.main-navigation-wrapper .container .hamburger-toggle.is-open .bars::after {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.main-navigation-wrapper .container .hamburger-toggle:hover {
  color: #06856c;
}
.main-navigation-wrapper .container .hamburger-toggle:focus-visible {
  outline: 2px solid #06856c;
  outline-offset: 4px;
}
.main-navigation-wrapper .container {
  /* Hamburger-Menü-Navigation */
}
.main-navigation-wrapper .container .hamburger-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #0a3c3c;
  border-bottom: 1px solid #d4dfe7;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 3rem 0 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Basiszustand: geschlossen */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.main-navigation-wrapper .container .hamburger-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.main-navigation-wrapper .container .hamburger-nav ul#hamburger-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.main-navigation-wrapper .container .hamburger-nav li {
  margin-bottom: 0;
}
.main-navigation-wrapper .container .hamburger-nav li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 1.2rem;
  display: block;
  padding: 0.5rem 2rem;
  width: 100%;
}
.main-navigation-wrapper .container .hamburger-nav li a:focus {
  outline: none;
}
.main-navigation-wrapper .container .hamburger-nav li:hover, .main-navigation-wrapper .container .hamburger-nav li:focus, .main-navigation-wrapper .container .hamburger-nav li:active, .main-navigation-wrapper .container .hamburger-nav li.current-menu-item {
  background-color: #0a5050;
}
.main-navigation-wrapper .container .hamburger-nav li.current-menu-item a {
  cursor: context-menu;
}
.main-navigation-wrapper .container .hamburger-nav {
  /* ==== Angepasste Suche ==== */
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search {
  margin-top: 2rem;
  padding: 0.5rem 2rem;
  background: #0a5050;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search button {
  width: 100%;
  justify-content: center;
  padding-top: 0;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search button:not([type=submit]) {
  display: none;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search button .sr-only {
  position: static !important;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  padding-left: 0.5rem;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search #hamburger-search,
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-panel {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  opacity: 1;
  position: static;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-form {
  position: relative;
  display: block;
  max-width: 750px;
  margin: 0 auto;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-field {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 0;
  border-radius: 0.5rem;
  color: #ffffff;
  padding: 0.6rem 0.8rem;
  padding-right: 48px;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-field::-moz-placeholder {
  color: rgba(255, 255, 255, 0.9);
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-field::placeholder {
  color: rgba(255, 255, 255, 0.9);
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-field:focus-visible {
  outline-width: 0;
  border: 1px solid #ffffff;
  border-right-width: 0;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-submit {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  font-size: 0;
  background: url("assets/images/lupe_weiss.svg") no-repeat center center;
  background-color: #0a3c3c;
  background-size: 1rem 1rem;
  border: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-radius: 0 0.5rem 0.5rem 0;
  cursor: pointer;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-submit:hover {
  background-color: #06856c;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-submit:hover::before {
  display: none;
}
.main-navigation-wrapper .container .hamburger-nav li.menu-item.menu-item-search .search-submit:focus-visible {
  outline: none;
}
.main-navigation-wrapper .container {
  /* Motion-Preference */
}
@media (prefers-reduced-motion: reduce) {
  .main-navigation-wrapper .container .hamburger-nav {
    transition: none;
  }
}
.main-navigation-wrapper .container {
  /* Responsive Breakpoint */
}
@media (max-width: calc(64em - 1px)) {
  .main-navigation-wrapper .container {
    height: 3.25rem;
    padding: 0.5rem 2rem;
  }
  .main-navigation-wrapper .container .menu-container.menu-main {
    display: none;
  }
  .main-navigation-wrapper .container .hamburger-toggle {
    display: block;
  }
}
@media (max-width: calc(48em - 1px)) {
  .main-navigation-wrapper .container {
    padding: 0.5rem 1.125rem 0.5rem 1.375rem;
  }
}
@media (max-width: calc(37.5em - 1px)) {
  .main-navigation-wrapper .container {
    padding: 0.5rem 0.875rem 0.5rem 1rem;
  }
}

/* Suche als Menü-Item */
.menu-item-search {
  left: -0.5rem;
}
.menu-item-search .search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  filter: brightness(0) saturate(100%) invert(22%) sepia(63%) saturate(563%) hue-rotate(131deg) brightness(97%) contrast(95%);
}
.menu-item-search .search-toggle .search-icon {
  width: 18px;
  height: 18px;
  max-width: unset;
}
.menu-item-search:focus .search-toggle, .menu-item-search:hover .search-toggle, .menu-item-search:active .search-toggle {
  filter: brightness(0) saturate(100%) invert(55%) sepia(93%) saturate(3095%) hue-rotate(133deg) brightness(88%) contrast(92%);
}
.menu-item-search:focus .search-toggle .search-icon, .menu-item-search:hover .search-toggle .search-icon, .menu-item-search:active .search-toggle .search-icon {
  outline: none;
}
.menu-item-search .search-panel {
  position: absolute;
  top: var(--nav-h);
  right: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid #d4dfe7;
  padding: 0.75rem 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.menu-item-search .search-panel[data-open=true] {
  opacity: 1;
  transform: translateY(0);
}
.menu-item-search .search-panel[data-open=true] form.search-form {
  display: flex;
}
.menu-item-search .search-panel form.search-form {
  display: none;
  gap: 0.5rem;
  width: 100%;
  max-width: 566px;
  justify-content: end;
}
.menu-item-search .search-panel form.search-form label {
  width: 480px;
}
@media (max-width: calc(64em - 1px)) {
  .menu-item-search .search-panel form.search-form {
    width: 100%;
  }
}
.menu-item-search .search-panel input[type=search] {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #d4dfe7;
  border-radius: 0.25rem;
  width: 100%;
}
.menu-item-search .search-panel input[type=submit],
.menu-item-search .search-panel button[type=submit] {
  background: #06856c;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  border: none;
  background-color: #06856c;
  color: #ffffff !important;
  text-decoration: none;
  overflow: hidden;
  transition: all 220ms ease-out, box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-item-search .search-panel input[type=submit], .menu-item-search .search-panel input[type=submit] *,
.menu-item-search .search-panel button[type=submit],
.menu-item-search .search-panel button[type=submit] * {
  position: relative;
  z-index: 1;
  color: inherit;
  transition: all 220ms ease-out;
}
.menu-item-search .search-panel input[type=submit]::before,
.menu-item-search .search-panel button[type=submit]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: #0a5050;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-item-search .search-panel input[type=submit]:hover, .menu-item-search .search-panel input[type=submit]:focus, .menu-item-search .search-panel input[type=submit]:focus-visible,
.menu-item-search .search-panel button[type=submit]:hover,
.menu-item-search .search-panel button[type=submit]:focus,
.menu-item-search .search-panel button[type=submit]:focus-visible {
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.menu-item-search .search-panel input[type=submit]:hover::before, .menu-item-search .search-panel input[type=submit]:focus::before, .menu-item-search .search-panel input[type=submit]:focus-visible::before,
.menu-item-search .search-panel button[type=submit]:hover::before,
.menu-item-search .search-panel button[type=submit]:focus::before,
.menu-item-search .search-panel button[type=submit]:focus-visible::before {
  transform: scaleX(1);
}
.menu-item-search .search-panel input[type=submit]:active,
.menu-item-search .search-panel button[type=submit]:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition-duration: 160ms;
}

.hamburger-nav .menu-item-search .search-panel {
  position: static;
  display: flex;
  opacity: 1;
  width: 100%;
  margin-top: 0.625rem;
}

@media (max-width: calc(64em - 1px)) {
  .menu-container.menu-main .menu-item-search {
    display: none;
  }
}
/* Screenreader-only Utility */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inhaltliche Layout-Helfer */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts/Pages */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Widgets */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Logo-Link */
.custom-logo-link {
  display: inline-block;
}

/* Captions */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Gallery */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}
.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}
.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/* Infinite Scroll (Jetpack) */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

.infinity-end.neverending .site-footer {
  display: block;
}

/* Skip-Link Ziel */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* WordPress Alignments */
.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* ===========================================================
   MODAL – vereinheitlicht (.modal / .modal__*)
   - Dialog clippt Inhalte (overflow: hidden)
   - Scroll nur im Body (._ _body)
   - Footer im Dialog (._ _footer) → saubere Rundung ohne Kanten
   - Abwärtskompatibel zu .members-modal__* / .projects-modal__*
=========================================================== */
.modal, .members-modal {
  /* Layout-Variablen – können pro Modifier überschrieben werden */
  --padding-dialog: 2rem;
  --footerbar-min-h: 3.125rem;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Container: leichtes Fade */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
.modal.is-open, .is-open.members-modal {
  opacity: 1;
  pointer-events: auto;
}
.modal, .members-modal {
  /* Overlay */
}
.modal__overlay, .members-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 80, 80, 0.9);
}
.modal, .members-modal {
  /* Dialog */
}
.modal__dialog, .members-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  width: 95%;
  max-height: 90vh;
  margin: 4vh auto;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  /* Clippt die Rundung */
  overflow: hidden;
  outline: none;
  padding: 0;
  /* Animation-Startzustand */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: 50% 50%;
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  will-change: transform, opacity;
  padding-top: max(0px, env(safe-area-inset-top));
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  padding-left: max(0px, env(safe-area-inset-left));
}
.modal, .members-modal {
  /* Zielzustand für Dialog */
}
.modal.is-open .modal__dialog, .modal.is-open .members-modal__dialog, .is-open.members-modal .modal__dialog, .is-open.members-modal .members-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.modal, .members-modal {
  /* Keine Transition beim Hydrieren/dynamischen Einfügen */
}
.modal.is-hydrating .modal__dialog, .modal.is-hydrating .members-modal__dialog, .is-hydrating.members-modal .modal__dialog, .is-hydrating.members-modal .members-modal__dialog {
  transition: none !important;
}
.modal, .members-modal {
  /* Close-Button */
}
.modal__close, .members-modal__close {
  position: absolute;
  top: -0.75rem;
  right: 0;
  font-size: 2.25rem;
  background: transparent;
  border: none;
  color: #0a5050;
  cursor: pointer;
}
.modal__close:focus, .members-modal__close:focus, .modal__close:focus-visible, .members-modal__close:focus-visible, .modal__close:hover, .members-modal__close:hover {
  color: #06856c;
  outline: none;
}
.modal, .members-modal {
  /* ---------- Scroll-Body im Dialog ---------- */
}
.modal__body, .members-modal__body {
  padding: 2.5rem var(--padding-dialog);
  max-height: calc(90vh - var(--footerbar-min-h));
  overflow: auto;
  background: #ffffff;
}
@supports (scrollbar-gutter: stable) {
  .modal__body, .members-modal__body {
    scrollbar-gutter: stable;
  }
}
.modal, .members-modal {
  /* ---------- (optionales) zweispaltiges Inhalts-Grid im Body ---------- */
  /* Du nutzt im Body typischerweise .members-modal__content bzw. .members-HTML-Fragmente.
      Wir belassen die Struktur, stylen aber neutral über neue Utility-Klassen: */
}
.modal .member-modal__logo-wrapper, .members-modal .member-modal__logo-wrapper, .modal .member-modal__header, .members-modal .member-modal__header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.modal .member-modal__logo-wrapper a:focus, .members-modal .member-modal__logo-wrapper a:focus, .modal .member-modal__header a:focus, .members-modal .member-modal__header a:focus, .modal .member-modal__logo-wrapper a:focus-visible, .members-modal .member-modal__logo-wrapper a:focus-visible, .modal .member-modal__header a:focus-visible, .members-modal .member-modal__header a:focus-visible {
  outline: none;
}
.modal .member-modal__logo-wrapper .member-modal__logo, .members-modal .member-modal__logo-wrapper .member-modal__logo, .modal .member-modal__header .member-modal__logo, .members-modal .member-modal__header .member-modal__logo {
  display: block;
  width: 100%;
  max-width: 167px;
  height: auto;
}
.modal, .members-modal {
  /* Fallback für Altdaten: alte Klasse nutzt dieselben Regeln */
}
.modal .members-modal__content, .members-modal .members-modal__content {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(150px, 200px) auto;
}
.modal .members-modal__content:not(:has(.member-modal__logo-wrapper)), .members-modal .members-modal__content:not(:has(.member-modal__logo-wrapper)) {
  display: block;
}
.modal .members-modal__content .member-modal__content, .members-modal .members-modal__content .member-modal__content {
  display: block;
}
.modal .members-modal__content .member-modal__content .member-modal__heading, .members-modal .members-modal__content .member-modal__content .member-modal__heading {
  margin-bottom: 1.5rem;
}
.modal .members-modal__content .member-modal__content .member-modal__heading h2, .members-modal .members-modal__content .member-modal__content .member-modal__heading h2 {
  margin: 0;
  text-transform: none;
  color: #0a3c3c;
  font-size: clamp(1.625rem, 3.25vw, 2.125rem);
}
.modal .members-modal__content .member-modal__content .member-modal__heading > :last-of-type, .members-modal .members-modal__content .member-modal__content .member-modal__heading > :last-of-type {
  margin-bottom: 0;
}
.modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__bildungsbereiche, .members-modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__bildungsbereiche {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  margin: 0 0 0.5rem;
  color: var(--color-primary);
  line-height: 1.25;
}
@media (min-width: 22.5em) {
  .modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__bildungsbereiche, .members-modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__bildungsbereiche {
    hyphens: none;
  }
}
@media (max-width: calc(64em - 1px)) {
  .modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__bildungsbereiche, .members-modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__bildungsbereiche {
    margin-top: 0.25rem;
  }
}
.modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__jahr, .members-modal .members-modal__content .member-modal__content .member-modal__heading .mitglied__jahr {
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  color: #06856c;
  margin: 0;
  line-height: 1;
}
.modal .members-modal__content .member-modal__content h3, .members-modal .members-modal__content .member-modal__content h3 {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: #0a5050;
  margin: 1.5rem 0 0.875rem;
}
.modal .members-modal__content .member-modal__content h3 + .lead, .members-modal .members-modal__content .member-modal__content h3 + .lead {
  margin-top: 0.5rem;
}
.modal .members-modal__content .member-modal__content p, .members-modal .members-modal__content .member-modal__content p {
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
}
.modal .members-modal__content .member-modal__content p:last-child, .members-modal .members-modal__content .member-modal__content p:last-child {
  margin-bottom: 0;
}
.modal .members-modal__content .member-modal__content p.lead, .members-modal .members-modal__content .member-modal__content p.lead {
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  font-size: 1.25rem;
  color: #06856c;
  margin: 0.875rem 0 1.25rem;
  line-height: 1.2em;
}
.modal .members-modal__content .member-modal__content p.lead + h3, .members-modal .members-modal__content .member-modal__content p.lead + h3 {
  margin-top: 2rem;
}
.modal .members-modal__content .member-modal__content p:has(+ ul), .members-modal .members-modal__content .member-modal__content p:has(+ ul), .modal .members-modal__content .member-modal__content p:has(+ ol), .members-modal .members-modal__content .member-modal__content p:has(+ ol), .modal .members-modal__content .member-modal__content p:has(+ dl), .members-modal .members-modal__content .member-modal__content p:has(+ dl) {
  margin-bottom: 0;
}
.modal .members-modal__content .member-modal__content ul, .members-modal .members-modal__content .member-modal__content ul,
.modal .members-modal__content .member-modal__content ol,
.members-modal .members-modal__content .member-modal__content ol,
.modal .members-modal__content .member-modal__content dl,
.members-modal .members-modal__content .member-modal__content dl {
  font-size: 0.98rem;
  padding: 0;
  margin: 0 0 0.5rem 2rem;
}
.modal .members-modal__content .member-modal__content ul:last-child, .members-modal .members-modal__content .member-modal__content ul:last-child,
.modal .members-modal__content .member-modal__content ol:last-child,
.members-modal .members-modal__content .member-modal__content ol:last-child,
.modal .members-modal__content .member-modal__content dl:last-child,
.members-modal .members-modal__content .member-modal__content dl:last-child {
  margin-bottom: 0;
}
.modal .members-modal__content .member-modal__content ul li, .members-modal .members-modal__content .member-modal__content ul li,
.modal .members-modal__content .member-modal__content ol li,
.members-modal .members-modal__content .member-modal__content ol li,
.modal .members-modal__content .member-modal__content dl li,
.members-modal .members-modal__content .member-modal__content dl li {
  padding-bottom: 0.25rem;
}
.modal .members-modal__content .member-modal__content a, .members-modal .members-modal__content .member-modal__content a {
  text-decoration: underline;
  color: #06856c;
}
.modal .members-modal__content .member-modal__content a:focus, .members-modal .members-modal__content .member-modal__content a:focus, .modal .members-modal__content .member-modal__content a:focus-within, .members-modal .members-modal__content .member-modal__content a:focus-within, .modal .members-modal__content .member-modal__content a:hover, .members-modal .members-modal__content .member-modal__content a:hover, .modal .members-modal__content .member-modal__content a:active, .members-modal .members-modal__content .member-modal__content a:active {
  color: #0aa582;
  text-decoration: none;
  outline: none;
}
.modal .members-modal__content .member-modal__content .member-modal__addresses-inline, .members-modal .members-modal__content .member-modal__content .member-modal__addresses-inline,
.modal .members-modal__content .member-modal__content .member-modal__social-inline,
.members-modal .members-modal__content .member-modal__content .member-modal__social-inline {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}
.modal .members-modal__content .member-modal__content, .members-modal .members-modal__content .member-modal__content {
  /* Social/Blocks */
}
.modal .members-modal__content .member-modal__content .member-modal__social-inline, .members-modal .members-modal__content .member-modal__content .member-modal__social-inline {
  display: flex;
  gap: 0.75rem;
  margin: 2rem 0;
}
.modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link, .members-modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: opacity 0.15s ease-in-out;
  filter: brightness(0) saturate(100%) invert(81%) sepia(14%) saturate(193%) hue-rotate(157deg) brightness(90%) contrast(92%);
}
.modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link:hover, .members-modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link:hover, .modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link:focus, .members-modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link:focus, .modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link:focus-visible, .members-modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__link:focus-visible {
  opacity: 0.8;
  outline: none;
}
.modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__icon, .members-modal .members-modal__content .member-modal__content .member-modal__social-inline .member-social__icon {
  display: block;
  width: clamp(2rem, 3.4vw, 2.625rem);
  filter: none;
}
.modal .members-modal__content .member-modal__content, .members-modal .members-modal__content .member-modal__content {
  /* Website/URL */
}
.modal .members-modal__content .member-modal__content .member-modal__website, .members-modal .members-modal__content .member-modal__content .member-modal__website {
  font-size: 1.25rem;
}
.modal .members-modal__content .member-modal__content .member-modal__website a, .members-modal .members-modal__content .member-modal__content .member-modal__website a {
  color: #0a5050;
  text-decoration: none;
}
.modal .members-modal__content .member-modal__content .member-modal__website a:hover, .members-modal .members-modal__content .member-modal__content .member-modal__website a:hover, .modal .members-modal__content .member-modal__content .member-modal__website a:focus, .members-modal .members-modal__content .member-modal__content .member-modal__website a:focus, .modal .members-modal__content .member-modal__content .member-modal__website a:focus-visible, .members-modal .members-modal__content .member-modal__content .member-modal__website a:focus-visible {
  color: #06856c;
  outline: none;
}
.modal, .members-modal {
  /* ---------- Footer innen (keine weißen Kanten) ---------- */
}
.modal__footer, .members-modal__footerbar {
  min-height: var(--footerbar-min-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-dialog);
  color: #ffffff;
  background-color: #0a3c3c;
  font-size: clamp(1.025rem, 1.4vw, 1.1rem);
  letter-spacing: 0.01em;
  /* Rundung stimmt, weil die Bar im Dialog liegt und geclippt wird */
  border-radius: 0 0 0.75rem 0.75rem;
  /* dezente optische Trennung */
  border-top: 1px solid #093636;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.modal, .members-modal {
  /* ---------- Lade-/Fehlerzustände ---------- */
}
.modal__loading {
  padding: 1rem 0;
  color: #666;
}
.modal__error {
  color: #a00;
  font-weight: 600;
}
.modal .vsbi__actions, .members-modal .vsbi__actions {
  padding: 2rem 0 0;
  text-align: right;
}

/* ---------- Responsive Tweaks ---------- */
@media (max-width: calc(80em - 1px)) {
  .modal, .members-modal {
    --padding-dialog: 2rem;
  }
  .modal .modal__body, .modal .members-modal__body, .members-modal .modal__body, .members-modal .members-modal__body {
    padding: 2rem var(--padding-dialog) 2.5rem;
  }
  .modal .modal__body .members-modal__content, .modal .members-modal__body .members-modal__content, .members-modal .modal__body .members-modal__content, .members-modal .members-modal__body .members-modal__content {
    grid-template-columns: 1fr;
  }
  .modal .modal__body .members-modal__content .member-modal__content, .modal .members-modal__body .members-modal__content .member-modal__content, .members-modal .modal__body .members-modal__content .member-modal__content, .members-modal .members-modal__body .members-modal__content .member-modal__content {
    margin-top: -80px;
  }
  .modal .modal__body .members-modal__content .member-modal__content .member-modal__heading, .modal .members-modal__body .members-modal__content .member-modal__content .member-modal__heading, .members-modal .modal__body .members-modal__content .member-modal__content .member-modal__heading, .members-modal .members-modal__body .members-modal__content .member-modal__content .member-modal__heading {
    margin: 0;
    padding-left: calc(150px + 1.5rem);
    min-height: 80px;
  }
  .modal .modal__body .members-modal__content .member-modal__logo-wrapper, .modal .members-modal__body .members-modal__content .member-modal__logo-wrapper, .members-modal .modal__body .members-modal__content .member-modal__logo-wrapper, .members-modal .members-modal__body .members-modal__content .member-modal__logo-wrapper, .modal .modal__body .members-modal__content .member-modal__header, .modal .members-modal__body .members-modal__content .member-modal__header, .members-modal .modal__body .members-modal__content .member-modal__header, .members-modal .members-modal__body .members-modal__content .member-modal__header {
    margin-bottom: 0;
    width: 150px;
    height: 80px;
    position: relative;
    z-index: 1;
  }
  .modal .modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .modal .members-modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .members-modal .modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .members-modal .members-modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .modal .modal__body .members-modal__content .member-modal__header .member-modal__logo, .modal .members-modal__body .members-modal__content .member-modal__header .member-modal__logo, .members-modal .modal__body .members-modal__content .member-modal__header .member-modal__logo, .members-modal .members-modal__body .members-modal__content .member-modal__header .member-modal__logo {
    max-height: 3.5rem;
    max-width: unset;
    display: inline-block;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (max-width: calc(64em - 1px)) {
  .modal, .members-modal {
    --padding-dialog: 1.75rem;
  }
  .modal .modal__body, .modal .members-modal__body, .members-modal .modal__body, .members-modal .members-modal__body {
    padding: 2rem var(--padding-dialog) 2.5rem;
  }
  .modal .modal__body .members-modal__content .member-modal__content, .modal .members-modal__body .members-modal__content .member-modal__content, .members-modal .modal__body .members-modal__content .member-modal__content, .members-modal .members-modal__body .members-modal__content .member-modal__content {
    margin-top: 0;
  }
  .modal .modal__body .members-modal__content .member-modal__content .member-modal__heading, .modal .members-modal__body .members-modal__content .member-modal__content .member-modal__heading, .members-modal .modal__body .members-modal__content .member-modal__content .member-modal__heading, .members-modal .members-modal__body .members-modal__content .member-modal__content .member-modal__heading {
    padding-left: 0;
    margin-bottom: 2rem;
    height: auto;
    min-height: unset;
    text-align: center;
  }
  .modal .modal__body .members-modal__content .member-modal__content .member-modal__social-inline, .modal .members-modal__body .members-modal__content .member-modal__content .member-modal__social-inline, .members-modal .modal__body .members-modal__content .member-modal__content .member-modal__social-inline, .members-modal .members-modal__body .members-modal__content .member-modal__content .member-modal__social-inline {
    justify-content: center;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
  }
  .modal .modal__body .members-modal__content .member-modal__content .member-modal__website, .modal .members-modal__body .members-modal__content .member-modal__content .member-modal__website, .members-modal .modal__body .members-modal__content .member-modal__content .member-modal__website, .members-modal .members-modal__body .members-modal__content .member-modal__content .member-modal__website {
    text-align: center;
  }
  .modal .modal__body .members-modal__content .member-modal__logo-wrapper, .modal .members-modal__body .members-modal__content .member-modal__logo-wrapper, .members-modal .modal__body .members-modal__content .member-modal__logo-wrapper, .members-modal .members-modal__body .members-modal__content .member-modal__logo-wrapper, .modal .modal__body .members-modal__content .member-modal__header, .modal .members-modal__body .members-modal__content .member-modal__header, .members-modal .modal__body .members-modal__content .member-modal__header, .members-modal .members-modal__body .members-modal__content .member-modal__header {
    width: 100%;
    height: 3.5rem;
    justify-content: center;
    margin-bottom: 1.75rem;
  }
  .modal .modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .modal .members-modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .members-modal .modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .members-modal .members-modal__body .members-modal__content .member-modal__logo-wrapper .member-modal__logo, .modal .modal__body .members-modal__content .member-modal__header .member-modal__logo, .modal .members-modal__body .members-modal__content .member-modal__header .member-modal__logo, .members-modal .modal__body .members-modal__content .member-modal__header .member-modal__logo, .members-modal .members-modal__body .members-modal__content .member-modal__header .member-modal__logo {
    max-height: unset;
    height: 3.5rem;
  }
}
/* ---------- LEGACY-ALIASE (Abwärtskompatibilität) ----------
   Mappen alte Klassen auf die neuen Basisklassen,
   damit bestehendes Markup/JS weiter läuft. */
/* Optionale projekt-spezifische Modifier (Theming, falls nötig) */
/* =========================================
   Modal-spezifisches Tuning für .vsbi-slider
   (Partnerslider im Projekt-Modal)
========================================= */
/* Modal: Slider kompakt und prozentbasiert */
.modal .vsbi-slider, .members-modal .vsbi-slider {
  --gap: .75rem;
  --epsilon: .5px;
  margin-top: 1.5rem;
}

.modal .vsbi-slider__item, .members-modal .vsbi-slider__item {
  box-sizing: border-box;
  scroll-snap-align: start;
  border: 0;
  border-radius: 0.75rem;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  box-shadow: 0 0 0 2px #d4dfe7 inset;
}
.modal .vsbi-slider__item .logo, .members-modal .vsbi-slider__item .logo {
  max-width: 100%;
  max-height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
}
.modal .vsbi-slider__item:focus, .members-modal .vsbi-slider__item:focus, .modal .vsbi-slider__item:hover, .members-modal .vsbi-slider__item:hover {
  box-shadow: 0 0 0 2px rgb(179.2686567164, 198.6417910448, 212.7313432836) inset;
}

/* 3 / 2 / 1 pro View – identisch wie oben */
@media (min-width: 48em) {
  .modal .vsbi-slider__item, .members-modal .vsbi-slider__item {
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3 - 0.5px);
    min-width: 0;
  }
}
@media (max-width: calc(48em - 1px)) {
  .modal .vsbi-slider__item, .members-modal .vsbi-slider__item {
    flex: 0 0 calc((100% - var(--gap)) / 2 - 0.5px);
  }
}
@media (max-width: calc(30em - 1px)) {
  .modal .vsbi-slider__item, .members-modal .vsbi-slider__item {
    flex: 0 0 100%;
  }
}
/* Standard: 3 pro View */
.modal .vsbi-slider, .members-modal .vsbi-slider {
  --ppv: 3;
}

/* Tablet & kleiner: 2 pro View */
@media (max-width: calc(48em - 1px)) {
  .modal .vsbi-slider, .members-modal .vsbi-slider {
    --ppv: 2;
  }
}
/* XSmall: 1 pro View */
@media (max-width: calc(30em - 1px)) {
  .modal .vsbi-slider, .members-modal .vsbi-slider {
    --ppv: 1;
  }
}
/* Optional: Pfeile auf sehr kleinen Screens ausblenden (deine Regel) */
@media (max-width: calc(37.5em - 1px)) {
  .modal .vsbi-slider__nav, .members-modal .vsbi-slider__nav {
    display: none;
  }
}
/* =========================================
   Modal-spezifisches Tuning für Projekt-Modal
========================================= */
.modal--projects {
  /* projects-spezifische Feinheiten hier */
}
.modal--projects .members-modal__content .projects-modal__intro {
  margin-top: 1.5rem;
}
.modal--projects .members-modal__content .projects-modal__intro p,
.modal--projects .members-modal__content .projects-modal__intro ul,
.modal--projects .members-modal__content .projects-modal__intro ol,
.modal--projects .members-modal__content .projects-modal__intro dl {
  margin-bottom: 0.75rem;
}
.modal--projects .members-modal__content .project-modal__blocks {
  padding: 0;
}
.modal--projects .members-modal__content .project-modal__blocks .project-block__lead {
  color: #06856c;
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  margin: 0.75rem 0 1.5rem;
  line-height: 1.2em;
}

/* =========================================
   Modal-spezifisches Tuning für Meldungen-Modal
========================================= */
.modal--meldungen .meldung-modal__content section {
  margin: 0 0 2rem;
  padding: 0;
}
.modal--meldungen .meldung-modal__content section:last-of-type {
  margin: 0;
}
.modal--meldungen .meldung-modal__content section > * {
  margin-top: 2rem;
}
.modal--meldungen .meldung-modal__content section.meldung-gallery:not(:has(.meldung-gallery__thumb)) > * {
  margin-top: 1.625rem;
}
.modal--meldungen .meldung-modal__content section h3 {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  color: #0a5050;
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  text-transform: uppercase;
}
.modal--meldungen .meldung-modal__content section a {
  text-decoration: underline;
  color: #06856c;
}
.modal--meldungen .meldung-modal__content section a:focus, .modal--meldungen .meldung-modal__content section a:focus-within, .modal--meldungen .meldung-modal__content section a:hover, .modal--meldungen .meldung-modal__content section a:active {
  color: #0aa582;
  text-decoration: none;
  outline: none;
}
.modal--meldungen .meldung-modal__content section p {
  margin: 0 0 0.75rem;
}
.modal--meldungen .meldung-modal__content section p:last-child {
  margin-bottom: 0;
}
.modal--meldungen .meldung-modal__content section p:has(+ ul), .modal--meldungen .meldung-modal__content section p:has(+ ol), .modal--meldungen .meldung-modal__content section p:has(+ dl) {
  margin-bottom: 0.25rem;
}
.modal--meldungen .meldung-modal__content section p + ul,
.modal--meldungen .meldung-modal__content section p + ol,
.modal--meldungen .meldung-modal__content section p + dl {
  margin-top: 0.25rem;
}
.modal--meldungen .meldung-modal__content section ul,
.modal--meldungen .meldung-modal__content section ol,
.modal--meldungen .meldung-modal__content section dl {
  padding: 0;
  margin: 0.5rem 0 0.75rem 1.25rem;
}
.modal--meldungen .meldung-modal__content section ul li:not(:last-of-type),
.modal--meldungen .meldung-modal__content section ol li:not(:last-of-type),
.modal--meldungen .meldung-modal__content section dl li:not(:last-of-type) {
  padding-bottom: 0.25rem;
}
.modal--meldungen .meldung-modal__content section ul:last-child,
.modal--meldungen .meldung-modal__content section ol:last-child,
.modal--meldungen .meldung-modal__content section dl:last-child {
  margin-bottom: 0;
}
.modal--meldungen .meldung-modal__content .meldung-modal__header {
  margin-bottom: 1.5rem;
}
.modal--meldungen .meldung-modal__content .meldung-modal__header h2 {
  margin: 0 0 0.25rem;
  color: #0a3c3c;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: none;
}
.modal--meldungen .meldung-modal__content .meldung-modal__header .meldung-modal__subline {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  color: #0a5050;
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.modal--meldungen .meldung-modal__content .meldung-modal__header .meldung-modal__date {
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  color: #06856c;
  margin-top: 0.25rem;
  font-size: clamp(0.95rem, 1vw, 1rem);
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks article.meldung-block {
  margin-top: 0.375rem;
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks article.meldung-block:first-of-type {
  margin-top: 0;
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks article.meldung-block:has(> h3) {
  margin-top: 1rem;
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks article.meldung-block:has(> p.meldung-block__lead) + article.meldung-block:has(> h3) {
  margin-top: 1.75rem;
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks .meldung-block__lead {
  color: #06856c;
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  margin: 0.625rem 0 1rem;
  line-height: 1.2em;
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks .meldung-gallery:has(+ .meldung-block) {
  margin-bottom: 2.375rem;
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks .meldung-gallery .vsbi-slider__item {
  border: none;
  box-shadow: none;
  padding: 0;
}
.modal--meldungen .meldung-modal__content .meldung-modal__blocks .meldung-gallery .vsbi-slider__item img {
  border-radius: 0.5rem 0 0.5rem 0.5rem;
}

/* =========================================
   Partner-Sprechblase (hover)
========================================= */
/* Template-Bubble im DOM – nur Styling, bleibt unsichtbar */
.partner-bubble {
  /* Optional: ganz ausblenden, wenn du 'hidden' nicht im Markup setzt */
  /* Deine Optik (Farbe, Typo etc.) bleibt bestehen, da sie geklont wird */
  background: #0a5050;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border: 1px solid #0a5050;
  border-radius: 0.75rem;
  width: -moz-max-content;
  width: max-content;
  max-width: 220px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.3;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
}
.partner-bubble span.name {
  font-family: "PT Sans";
  font-weight: 400;
  font-style: normal;
}
.partner-bubble span.name:has(+ span) {
  font-family: "PT Sans";
  font-weight: 700;
  font-style: normal;
}
.partner-bubble span.name:has(+ span)::after {
  content: ": ";
}
.partner-bubble::after {
  content: "";
  position: absolute;
  /* darf bleiben – Portal-Bubble hat own layout */
  left: 50%;
  bottom: -0.75rem;
  transform: translateX(-50%);
  border-width: 0.75rem 0.75rem 0 0.75rem;
  border-style: solid;
  border-color: #0a5050 transparent transparent transparent;
}

/* Portal-Bubble (sichtbar) */
.partner-bubble--portal {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  transform: translate(-50%, -100%) scale(0.98);
}

.partner-bubble--portal.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

/* =========================================
	Spezifischer Look für Termin-Modal (dezent) 
	========================================= */
.modal--termins {
  /* ==========================================
     Termin-Modal – Footer mit Hintergrundbild
  ========================================== */
}
.modal--termins .modal__footer, .modal--termins .members-modal__footerbar {
  /* Background aus JS */
  background-color: transparent;
  background-image: var(--footer-cover, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
  border-top: none;
  /* Lesbarkeits-Overlay */
}
.modal--termins .modal__footer::before, .modal--termins .members-modal__footerbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, #000 20%, transparent);
  z-index: -1;
}
.modal--termins .termin-modal__content section {
  margin: 0 0 2rem;
  padding: 0;
}
.modal--termins .termin-modal__content section:last-of-type {
  margin: 0;
}
.modal--termins .termin-modal__content section a {
  text-decoration: underline;
  color: #06856c;
}
.modal--termins .termin-modal__content section a:focus, .modal--termins .termin-modal__content section a:focus-within, .modal--termins .termin-modal__content section a:hover, .modal--termins .termin-modal__content section a:active {
  color: #0aa582;
  text-decoration: none;
  outline: none;
}
.modal--termins .termin-modal__content section p {
  margin: 0 0 0.375rem;
}
.modal--termins .termin-modal__content section p:last-of-type {
  margin-bottom: 0;
}
.modal--termins .termin-modal__content section ul,
.modal--termins .termin-modal__content section ol,
.modal--termins .termin-modal__content section dl {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modal--termins .termin-modal__content section.termin-modal__blocks > article:first-of-type h4 {
  margin-top: 1rem;
}
.modal--termins .termin-modal__content section.termin-modal__blocks > article:not(:last-of-type) {
  margin-bottom: 0.875rem;
}
.modal--termins .termin-modal__content section.termin-modal__blocks > article h4 {
  margin: 0 0 0.25rem;
}
.modal--termins .termin-modal__content section.termin-modal__blocks > article p.termin-block__lead {
  color: #06856c;
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  margin: 0.75rem 0 1.5rem;
  line-height: 1.2em;
}
.modal--termins .termin-modal__header {
  margin-bottom: 1rem;
}
.modal--termins .termin-modal__header h2 {
  margin: 0 0 0.25rem;
  color: #0a3c3c;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: none;
}
.modal--termins .termin-modal__header .termin-modal__subline {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  color: #0a5050;
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.modal--termins .termin-modal__meta {
  margin: 1rem 0 1.25rem;
}
.modal--termins .termin-modal__meta .termin-modal__dl {
  display: grid;
  gap: 0.35rem 0.75rem;
}
.modal--termins .termin-modal__meta .termin-modal__dl .termin-modal__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
}
.modal--termins .termin-modal__meta .termin-modal__dl .termin-modal__row dt {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  color: #0a5050;
}
.modal--termins .termin-modal__meta .termin-modal__dl .termin-modal__row dd {
  margin: 0;
}
.modal--termins .termin-modal__location,
.modal--termins .termin-modal__speakers,
.modal--termins .termin-modal__intro,
.modal--termins .termin-modal__blocks {
  margin: 1.25rem 0;
}
.modal--termins .termin-modal__location h3,
.modal--termins .termin-modal__speakers h3,
.modal--termins .termin-modal__intro h3,
.modal--termins .termin-modal__blocks h3 {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  color: #0a5050;
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  text-transform: uppercase;
}
.modal--termins .termin-modal__speakers__list {
  margin: 0;
  padding: 0 0 0 1rem;
}
.modal--termins .termin-modal__speakers__list li {
  margin-bottom: 0.4rem;
}

/* _slider.scss */
.vsbi-slider {
  --gap: 1rem;
  --item-min: clamp(160px, 24vw, 280px);
  --snap-align: start;
  --epsilon: .5px;
  /* gegen Pixel-Rundungsfehler */
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.vsbi-slider__track {
  overflow-x: auto;
  overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  padding: 0;
  /* dezente Scrollbar */
}
.vsbi-slider__track::-webkit-scrollbar {
  height: 8px;
}
.vsbi-slider__track::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.vsbi-slider__list {
  display: flex;
  gap: var(--gap);
  padding: 0;
}
.vsbi-slider__item {
  /* NEU: prozentbasierte Breite nach --ppv + Gap-Abzug */
  /* Wenn --ppv gesetzt ist, nehmen wir sie; sonst fällt "min-width" als Rückfallebene */
  flex: 0 0 auto;
  min-width: var(--item-min);
  scroll-snap-align: var(--snap-align);
  outline: none;
  position: relative;
  z-index: 0;
  /* sobald --ppv definiert ist, erzwingen wir exakte Breite */
}
@supports (width: clamp(0px, 1vw, 1px)) {
  .vsbi-slider__item {
    flex-basis: calc((100% - max(var(--ppv, 1) - 1, 0) * var(--gap)) / var(--ppv, 1) - var(--epsilon));
    min-width: 0;
    /* wichtig, damit nichts „bockt“ */
  }
}
.vsbi-slider.items-1 {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  position: static;
  align-items: center;
}
.vsbi-slider.items-1 .vsbi-slider__item {
  flex-basis: auto;
  width: 100%;
  max-width: 300px;
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-slider.items-1 {
    justify-content: center;
  }
}
.vsbi-slider {
  /* Pfeile – (du hast sie später auf Modal-Optik umgestellt; falls noch nicht, gern lassen) */
}
.vsbi-slider__nav {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  display: inline-grid;
  place-items: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vsbi-slider__nav:hover, .vsbi-slider__nav:focus-visible {
  transform: scale(1.04);
  outline: none;
}
.vsbi-slider__nav::before {
  content: "";
  border: 0.75rem solid transparent;
}
.vsbi-slider__nav--prev {
  padding-left: 0;
}
.vsbi-slider__nav--prev::before {
  border-right-color: var(--nav-color);
}
.vsbi-slider__nav--prev:hover::before, .vsbi-slider__nav--prev:focus-visible::before {
  border-right-color: var(--nav-color-hover);
}
.vsbi-slider__nav--next {
  padding-right: 0;
}
.vsbi-slider__nav--next::before {
  border-left-color: var(--nav-color);
}
.vsbi-slider__nav--next:hover::before, .vsbi-slider__nav--next:focus-visible::before {
  border-left-color: var(--nav-color-hover);
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-slider__nav {
    display: none;
  }
}
.vsbi-slider {
  /* Dots unverändert ... */
}
.vsbi-slider__dots {
  grid-column: 1/-1;
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 1rem;
}
.vsbi-slider__dots button {
  /* Großer, unsichtbarer Touch-Button */
}
.vsbi-slider__dots button.vsbi-slider__dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kleiner sichtbarer Punkt */
}
.vsbi-slider__dots button.vsbi-slider__dot::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--dot-color);
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.vsbi-slider__dots button.vsbi-slider__dot {
  /* Aktiver Dot */
}
.vsbi-slider__dots button.vsbi-slider__dot.is-active::before, .vsbi-slider__dots button.vsbi-slider__dot[aria-current=true]::before {
  background-color: var(--dot-color-hover);
  transform: scale(1.25);
  opacity: 1;
  cursor: context-menu;
}
.vsbi-slider__dots button.vsbi-slider__dot {
  /* Hover / Fokus (optional, aber sehr schön) */
}
.vsbi-slider__dots button.vsbi-slider__dot:hover::before, .vsbi-slider__dots button.vsbi-slider__dot:focus-visible::before {
  opacity: 1;
  background-color: var(--dot-color-hover);
}
.vsbi-slider__dots button.vsbi-slider__dot {
  /* Tastatur-Fokus sichtbar, aber nicht hässlich */
}
.vsbi-slider__dots button.vsbi-slider__dot:focus-visible {
  outline: none;
}
.vsbi-slider__dots button.vsbi-slider__dot:focus-visible::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.vsbi-slider__dots:has(button:only-child), .vsbi-slider__dots:empty {
  display: none;
}
.vsbi-slider {
  /* Scrollbar-Optik */
}
.vsbi-slider__track {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
}
.vsbi-slider__track:active {
  cursor: grabbing;
}

/* Beispiel-Logo-Item unverändert */
.vsbi-slider__item .logo {
  max-width: 100%;
  max-height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

/* Scroll-Leiste vollständig entfernen */
.vsbi-slider__track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vsbi-slider__track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.vsbi-slider__track {
  scrollbar-gutter: auto;
}

.vsbi-slider__track,
.vsbi-slider__list {
  background: transparent;
}

/* ============================================================
   NEU: Responsives --ppv Mapping 5 → 4 → 3 → 2 → 1
   (Breakpoints aus deinen base/mixins, siehe variables.scss)
   ------------------------------------------------------------
   xxxlarge (≥ 2560px): 5
   xxlarge (≥ 1920px): 4
   large   (≥ 1280px): 3
   tablet  (≥ 768px) : 2
   xsmall  (< 480px)  : 1
============================================================ */
.vsbi-slider {
  --ppv: 5;
}

/* Default: sehr groß → 5 */
@media (max-width: calc(120em - 1px)) {
  /* < 1920px */
  .vsbi-slider {
    --ppv: 4;
  }
}
@media (max-width: calc(80em - 1px)) {
  /* < 1280px */
  .vsbi-slider {
    --ppv: 3;
  }
}
@media (max-width: calc(48em - 1px)) {
  /* < 768px */
  .vsbi-slider {
    --ppv: 2;
  }
}
@media (max-width: calc(30em - 1px)) {
  /* < 480px */
  .vsbi-slider {
    --ppv: 1;
  }
}
/* Beispiel für ein reines Logo-Item (optional) */
.vsbi-slider__item .logo {
  max-width: 100%;
  max-height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

/* =========================================
   Scroll-Leiste unter dem Slider
   vollständig entfernen
========================================= */
.vsbi-slider__track {
  /* Firefox */
  scrollbar-width: none;
  /* IE / Edge Legacy */
  -ms-overflow-style: none;
  /* Chrome / Safari / Edge Chromium */
}
.vsbi-slider__track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.vsbi-slider__track {
  /* WICHTIG:
      verhindert den „grauen Streifen“ durch reservierten Scrollbar-Platz */
  scrollbar-gutter: auto;
}

/* Falls irgendwo ein Track-Hintergrund gesetzt ist */
.vsbi-slider__track,
.vsbi-slider__list {
  background: transparent;
}

/* Overlay beim Drag „durchlässig“ machen */
.vsbi-slider.is-dragging .event-card__trigger {
  pointer-events: none;
}

/** 
  * Desktop: Dots, keine Fraction
  * Mobile: Fraction, keine Dots 
  */
.vsbi-slider__fraction {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  color: var(--section-title-color);
  opacity: 0.85;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.vsbi-slider__fraction-value {
  min-width: 3.5ch;
  text-align: center;
}
.vsbi-slider__fraction-nav {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.vsbi-slider__fraction button {
  opacity: 0;
}
.vsbi-slider__fraction button[class*=nav]::before {
  content: "";
  border: 0.5rem solid transparent;
  display: block;
}
.vsbi-slider__fraction button[class*=nav--prev]::before {
  border-right-color: var(--nav-color-hover);
}
.vsbi-slider__fraction button[class*=nav--next]::before {
  border-left-color: var(--nav-color-hover);
}
.vsbi-slider__fraction:hover, .vsbi-slider__fraction:focus-within, .vsbi-slider__fraction:active {
  opacity: 1;
}
.vsbi-slider__fraction:hover button, .vsbi-slider__fraction:focus-within button, .vsbi-slider__fraction:active button {
  opacity: 0.75;
}
.vsbi-slider__fraction:hover button:hover, .vsbi-slider__fraction:hover button:focus-visible, .vsbi-slider__fraction:hover button:active, .vsbi-slider__fraction:focus-within button:hover, .vsbi-slider__fraction:focus-within button:focus-visible, .vsbi-slider__fraction:focus-within button:active, .vsbi-slider__fraction:active button:hover, .vsbi-slider__fraction:active button:focus-visible, .vsbi-slider__fraction:active button:active {
  opacity: 1;
}
.vsbi-slider__fraction:hover button:disabled, .vsbi-slider__fraction:focus-within button:disabled, .vsbi-slider__fraction:active button:disabled {
  opacity: 0 !important;
  visibility: hidden;
  cursor: default;
}

@media (max-width: calc(48em - 1px)) {
  .vsbi-slider__dots {
    display: none !important;
  }
  .vsbi-slider__fraction {
    grid-column: 1/-1;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
  }
  .vsbi-slider.items-many .vsbi-slider__fraction {
    display: flex;
  }
  .vsbi-slider.items-1 .vsbi-slider__fraction,
  .vsbi-slider.items-2 .vsbi-slider__fraction {
    display: none;
  }
  .vsbi-slider.items-1 {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    position: static;
    justify-content: center;
    align-items: center;
  }
  .vsbi-slider.items-1 .vsbi-slider__item {
    flex-basis: auto;
    width: 100%;
    max-width: 300px;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-slider.items-2 .vsbi-slider__fraction {
    display: flex;
  }
}
.error-404,
.not-found {
  --gap: clamp(2rem, 4.5vw, 4rem);
  text-align: center;
}
.error-404 .container,
.not-found .container {
  padding: 0 var(--gap);
}
.error-404 .container p:last-child,
.not-found .container p:last-child {
  margin-bottom: 0;
}
.error-404 .container p:only-child,
.not-found .container p:only-child {
  margin-top: 0;
}
.error-404 .introfeld,
.not-found .introfeld {
  border-top: 0.125rem solid #0a5050;
  padding-bottom: 0;
}
.error-404 .introfeld a,
.not-found .introfeld a {
  text-decoration: underline;
  color: #0a5050;
}
.error-404 .introfeld a:focus, .error-404 .introfeld a:focus-within, .error-404 .introfeld a:hover, .error-404 .introfeld a:active,
.not-found .introfeld a:focus,
.not-found .introfeld a:focus-within,
.not-found .introfeld a:hover,
.not-found .introfeld a:active {
  color: #0aa582;
  text-decoration: none;
  outline: none;
}
.error-404 .introfeld.search p,
.not-found .introfeld.search p {
  max-width: 580px;
  margin: 0 auto;
}
.error-404,
.not-found {
  /* ===========================
  Search-Band mit Logo
  =========================== */
}
.error-404 .not-found-searchband,
.not-found .not-found-searchband {
  position: relative;
  margin: 0;
  border-bottom: 0.125rem solid #0a5050;
}
.error-404 .not-found-searchband .not-found-searchband__search,
.not-found .not-found-searchband .not-found-searchband__search {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form,
.not-found .not-found-searchband .not-found-searchband__search form.search-form {
  margin-top: calc(var(--logo-size) / 5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  align-items: stretch;
  width: 100%;
  margin-inline: auto;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-field,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-field {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #0a3c3c;
  background: #ffffff;
  border: 1px solid rgb(179.2686567164, 198.6417910448, 212.7313432836);
  border-right: 0;
  border-radius: 0.75rem 0 0 0.75rem;
  padding: 0.85rem 1rem;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-field::-moz-placeholder, .not-found .not-found-searchband .not-found-searchband__search form.search-form .search-field::-moz-placeholder {
  color: #0a3c3c;
  opacity: 0.85;
  font-size: 0.875rem;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-field::placeholder,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-field::placeholder {
  color: #0a3c3c;
  opacity: 0.85;
  font-size: 0.875rem;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-field:focus, .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-field:focus-visible,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-field:focus,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-field:focus-visible {
  outline: none;
  border: 2px solid #06856c;
  border-right: none;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease-in-out, transform 0.15s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0 0.75rem 0.75rem 0;
  border: none;
  background-color: #0a5050;
  color: #ffffff !important;
  text-decoration: none;
  overflow: hidden;
  transition: all 220ms ease-out, box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit, .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit *,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit * {
  position: relative;
  z-index: 1;
  color: inherit;
  transition: all 220ms ease-out;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit::before,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: #06856c;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit:hover, .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus, .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus-visible,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit:hover,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus-visible {
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit:hover::before, .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus::before, .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus-visible::before,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit:hover::before,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus::before,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit:focus-visible::before {
  transform: scaleX(1);
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit:active,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition-duration: 160ms;
}
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-field,
.error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-field,
.not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit {
  font-size: clamp(14px, 1.5vw, 16px);
  height: clamp(36px, 4vw, 40px);
  padding-inline: clamp(12px, 2vw, 16px);
}
@media (max-width: 37.5em) {
  .error-404 .not-found-searchband .not-found-searchband__search form.search-form,
  .not-found .not-found-searchband .not-found-searchband__search form.search-form {
    position: relative;
    max-width: 90vw;
    margin: 0 auto;
  }
  .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-field,
  .not-found .not-found-searchband .not-found-searchband__search form.search-form .search-field {
    width: calc(100% - 40px);
  }
  .error-404 .not-found-searchband .not-found-searchband__search form.search-form .search-submit,
  .not-found .not-found-searchband .not-found-searchband__search form.search-form .search-submit {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    font-size: 0;
    background: url("assets/images/lupe_weiss.svg") no-repeat center center;
    background-color: #0a5050;
    background-size: 1rem 1rem;
  }
}

/* Import am besten global (z. B. components/_cards-equalize.scss) */
/* Slider aktiviert Equalize via .vsbi-slider--equalize */
.vsbi-slider--equalize {
  --card-top-min: unset;
  --card-footer-min: unset;
}

.vsbi-slider--equalize .vsbi-slider__item > .event-card {
  height: 100%;
}

.vsbi-slider--equalize .event-card {
  display: grid;
  grid-template-rows: 2fr 1fr;
  width: 100%;
  min-height: clamp(200px, 7.5vw, 260px);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.vsbi-slider--equalize .event-card__top {
  height: 100%;
  /* WICHTIG: gleiche Höhe ANWENDEN + oben ausrichten */
  min-height: var(--card-top-min, var(--event-top-min, 150px)) !important;
  display: flex;
  /* statt Grid */
  flex-direction: column;
  /* Kicker oben, Titel darunter */
  align-items: center;
  /* horizontal zentriert (wie zuvor) */
  justify-content: flex-start;
  /* VERTIKAL OBEN! */
  gap: 0.35rem;
  text-align: center;
  padding: calc(var(--pad) + 0.25rem) var(--pad) 0.5rem var(--pad);
}
.vsbi-slider--equalize .event-card {
  /* Falls du "VSBI FORUM" (Kicker) in fixer Höhe möchtest, entkommentieren:
   &__kicker { min-height: 2rem; display: flex; align-items: center; }
   */
}
.vsbi-slider--equalize .event-card__title {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.1rem, 2.8vw, 1.475rem);
  line-height: 1.15;
  margin: 0;
  text-transform: uppercase;
  /* Kein Abschneiden – sauber umbrechen */
  overflow: visible;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.vsbi-slider--equalize .event-card__footer {
  margin-top: auto;
  height: 100%;
  /* Footer an Kartenboden */
  min-height: var(--card-footer-min, var(--event-footer-min, 92px)) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 0.75rem var(--pad) 0.85rem var(--pad);
}
.vsbi-slider--equalize .event-card__meta {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* überall: Top/Footer min-height via CSS-Variablen */
.vsbi-meldungen .event-card__top,
.vsbi-meldungen-intern .event-card__top {
  /* Fallback 150px, kann per JS gesetzt werden */
  min-height: var(--event-top-min, 150px);
}

.vsbi-meldungen .event-card__footer,
.vsbi-meldungen-intern .event-card__footer {
  /* Fallback 92px, kann per JS gesetzt werden */
  min-height: var(--event-footer-min, 92px);
}

.vsbi-meldungen .event-card__teaser,
.vsbi-meldungen-intern .event-card__teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 2 Zeilen (für mobile evtl. 3) */
  -webkit-line-clamp: 2;
  /* Wenn standardisiertes line-clamp verfügbar ist, optional zusätzlich: */
  /* line-clamp: 2; */
}

@media (max-width: calc(30em - 1px)) {
  .event-card__teaser {
    -webkit-line-clamp: 3;
  }
}
/* Grundbutton */
.to-top {
  position: fixed !important;
  right: clamp(0.75rem, 2vw, 1.25rem) !important;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 2147483647 !important;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0 0.5rem 0.5rem;
  border: 1px solid #ffffff;
  background: #0a3c3c;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  /* NEU: Grid statt absolute Positionierung */
  display: grid;
  place-items: center;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
  /* Default: unsichtbar */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  /* Sichtbar (Scroll oder Keyboard) */
}
.to-top.is-visible, .to-top.is-kbd {
  opacity: 0.825;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
.to-top {
  /* Ring */
}
.to-top .to-top__ring {
  width: 80%;
  height: 80%;
  transform: rotate(-90deg);
  z-index: 0;
  pointer-events: none;
  position: absolute;
}
.to-top .to-top__ring-bg {
  fill: none;
  stroke: rgba(10, 80, 80, 0.15);
  stroke-width: 3;
}
.to-top .to-top__ring-val {
  fill: #0a5050;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.to-top {
  /* Icon */
}
.to-top .to-top__icon {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.to-top .to-top__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}
.to-top:focus-visible {
  outline: none;
}
.to-top:focus, .to-top:focus-visible, .to-top:hover {
  border-color: #ffffff;
  opacity: 1;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}
.to-top:focus .to-top__ring-val, .to-top:focus-visible .to-top__ring-val, .to-top:hover .to-top__ring-val {
  fill: #06856c;
}
@media (max-width: calc(37.5em - 1px)) {
  .to-top {
    width: 3.25rem;
    height: 3.25rem;
  }
}

/* Layout-Variablen */
:root {
  --vsbi-col-gap: 0.75rem;
  /* Abstand zwischen Spalten (horizontal) */
  --vsbi-row-gap: 1rem;
  /* Abstand zwischen Zeilen (vertikal) */
}

/* Optional: Container bleibt wie bisher */
.vsbi-counters .container {
  max-width: calc(1440px + 4rem);
  margin: 0 auto;
}

/* Flex-Grid: zentrierte Reihen */
.vsbi-counters__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: var(--vsbi-col-gap);
       column-gap: var(--vsbi-col-gap);
  /* 👉 horizontaler Gap */
  row-gap: var(--vsbi-row-gap);
  /* 👉 vertikaler Gap */
  justify-content: center;
  /* Reihen beim Umbruch zentriert */
  align-items: stretch;
  /* Breit: alle (bis max. 6) nebeneinander; --cols-max kommt aus PHP */
  --cols: var(--cols-max);
}

/* Breakpoints: 6 → 3 → 2 → 1 + feinere Gaps */
@media (max-width: calc(80em - 1px)) {
  /* ≤ ~1280px */
  :root {
    --vsbi-col-gap: 0.70rem;
    --vsbi-row-gap: 0.95rem;
  }
}
@media (max-width: calc(64em - 1px)) {
  /* ≤ ~1024px */
  .vsbi-counters__grid {
    --cols: min(var(--cols-max), 3);
  }
  :root {
    --vsbi-col-gap: 0.65rem;
    --vsbi-row-gap: 0.9rem;
  }
}
@media (max-width: calc(48em - 1px)) {
  /* ≤ ~768px */
  .vsbi-counters__grid {
    --cols: min(var(--cols-max), 2);
  }
  :root {
    --vsbi-col-gap: 0.6rem;
    --vsbi-row-gap: 0.85rem;
  }
}
@media (max-width: calc(30em - 1px)) {
  /* ≤ ~480px */
  .vsbi-counters__grid {
    --cols: 1;
  }
  :root {
    --vsbi-col-gap: 0.5rem;
    /* irrelevant bei 1 Spalte, aber konsistent */
    --vsbi-row-gap: 0.75rem;
  }
}
/* Karten: exakte Spaltenbreite, Gaps berücksichtigt */
.vsbi-counter-card {
  position: relative;
  box-sizing: border-box;
  background: #0a5050;
  color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.15rem 0.9rem;
  /* leicht kompakter */
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  /* ✅ Keine width/min/max mehr – nur exakte Spaltenbreite:
      100% minus (Spaltenanzahl - 1) * Spalten-Gap, geteilt durch Spaltenanzahl. */
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--vsbi-col-gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--vsbi-col-gap)) / var(--cols));
}
.vsbi-counter-card:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.vsbi-counter-card {
  /* Accent-Ecke */
}
.vsbi-counter-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 1.1rem solid #06856c;
  border-left: 1.1rem solid transparent;
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-counter-card::before {
    border-top-width: 1rem;
    border-left-width: 1rem;
  }
}
.vsbi-counter-card .vsbi-counter-card__number {
  font-family: "Mulish";
  font-weight: 200;
  font-style: normal;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.2;
}
.vsbi-counter-card .vsbi-counter-card__label {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1.05rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  opacity: 0.95;
  margin-top: 0.2rem;
}

/* „Flacher“ auf sehr kleinen Screens */
@media (max-width: calc(30em - 1px)) {
  .vsbi-counter-card {
    padding: 0.85rem 0.7rem;
  }
  .vsbi-counter-card .vsbi-counter-card__number {
    font-size: clamp(1.15rem, 4vw, 1.6rem);
  }
  .vsbi-counter-card .vsbi-counter-card__label {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
  }
}
@media (max-width: calc(22.5em - 1px)) {
  .vsbi-counter-card {
    padding: 0.7rem 0.55rem;
  }
  .vsbi-counter-card .vsbi-counter-card__number {
    font-size: clamp(1.05rem, 4.5vw, 1.45rem);
  }
  .vsbi-counter-card .vsbi-counter-card__label {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
  }
}
/* Bewegungspräferenz respektieren */
@media (prefers-reduced-motion: reduce) {
  .vsbi-counter-card__number {
    transition: none !important;
    animation: none !important;
  }
}
.vsbi-infoblock {
  position: relative;
  overflow: hidden;
  /* Notch-Mechanik:
   Standard-Höhe aus globaler CSS-Variable (falls gesetzt),
   sonst Fallback innerhalb der JS-Logik */
  --notch-h: var(--vsbi-notch-h);
  /* Nur wenn die Notch aktiv ist */
}
.vsbi-infoblock.has-notch {
  margin-top: calc(-1 * var(--notch-h));
}
.vsbi-infoblock.has-notch {
  --notch-w: 1.25rem;
  --notch-h: var(--vsbi-notch-h);
  clip-path: polygon(0 0, calc(50% - var(--notch-w)) 0, 50% var(--notch-h), calc(50% + var(--notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 480px) {
  .vsbi-infoblock.has-notch {
    --notch-w: 10px;
    --notch-h: 16px;
  }
}
.vsbi-infoblock.has-notch {
  /* Optionaler Fallback bei fehlendem clip-path:
  siehe Beispiel in _join.scss – kann bei Bedarf aktiviert werden. */
}
.vsbi-infoblock.has-notch .vsbi-infoblock__inner {
  margin-top: 1.25rem;
}
.vsbi-infoblock.error-404, .vsbi-infoblock.not-found {
  text-align: center;
}

.vsbi-infoblock__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 1.5rem;
}

.vsbi-infoblock__title {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .vsbi-infoblock__title {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}

.vsbi-infoblock__desc {
  max-width: min(980px, 92%);
  color: var(--section-text-color, #0a3c3c);
  line-height: 1.6;
  hyphens: none;
}
.vsbi-infoblock__desc p:last-child {
  margin-bottom: 0;
}

.vsbi-infoblock__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: none;
  background-color: #06856c;
  color: #ffffff !important;
  text-decoration: none;
  overflow: hidden;
  transition: all 220ms ease-out, box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vsbi-infoblock__button, .vsbi-infoblock__button * {
  position: relative;
  z-index: 1;
  color: inherit;
  transition: all 220ms ease-out;
}
.vsbi-infoblock__button::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: #ffffff;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vsbi-infoblock__button:hover, .vsbi-infoblock__button:focus, .vsbi-infoblock__button:focus-visible {
  color: #0a5050 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.vsbi-infoblock__button:hover::before, .vsbi-infoblock__button:focus::before, .vsbi-infoblock__button:focus-visible::before {
  transform: scaleX(1);
}
.vsbi-infoblock__button:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition-duration: 160ms;
}
.vsbi-infoblock__button {
  /* Kleine Optimierung auf XS */
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-infoblock__button {
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
  }
}

.vsbi-inhaltsblock {
  --notch-h: var(--vsbi-notch-h);
  --gap: clamp(2rem, 4.5vw, 4rem);
  --link-color: #06856c;
  --link-color-hover: #0aa582;
  position: relative;
  overflow: hidden;
}
.vsbi-inhaltsblock.has-notch {
  margin-top: calc(-1 * var(--notch-h));
}
.vsbi-inhaltsblock.has-notch {
  --notch-w: 1.25rem;
  --notch-h: var(--vsbi-notch-h);
  clip-path: polygon(0 0, calc(50% - var(--notch-w)) 0, 50% var(--notch-h), calc(50% + var(--notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 480px) {
  .vsbi-inhaltsblock.has-notch {
    --notch-w: 10px;
    --notch-h: 16px;
  }
}
.vsbi-inhaltsblock * {
  hyphens: auto;
}
.vsbi-inhaltsblock[class*=primary], .vsbi-inhaltsblock[class*=secondary] {
  --link-color: #ffffff;
  --link-color-hover: #ffffff;
}
.vsbi-inhaltsblock[class*=gray] {
  --link-color: #0a5050;
}
.vsbi-inhaltsblock a {
  color: var(--link-color);
}
.vsbi-inhaltsblock a:focus, .vsbi-inhaltsblock a:focus-within, .vsbi-inhaltsblock a:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}

.vsbi-inhaltsblock__inner {
  padding: 0 var(--gap);
  max-width: 1620px;
  margin: 0 auto;
}
.vsbi-inhaltsblock__inner.container > .vsbi-inhaltsblock__desc:only-child p:only-child {
  margin-top: 0;
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-inhaltsblock__inner {
    padding: 0;
  }
}

.vsbi-inhaltsblock__title {
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .vsbi-inhaltsblock__title {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}
.vsbi-inhaltsblock__title {
  hyphens: none;
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-inhaltsblock__title {
    hyphens: auto;
  }
}

.vsbi-inhaltsblock__subtitle {
  margin: 0;
  color: var(--section-title-color);
  font-size: clamp(1.25rem, 2.75vw, 1.5rem);
  font-family: "PT Sans";
  font-weight: 400;
  font-style: normal;
}

.vsbi-inhaltsblock__desc > :first-child {
  margin-top: 1.5rem;
}

.vsbi-inhaltsblock__desc {
  color: var(--section-text-color, #0a3c3c);
  line-height: 1.6;
  hyphens: none;
}
.vsbi-inhaltsblock__desc p {
  margin: 1rem 0;
  line-height: 1.375em;
}
.vsbi-inhaltsblock__desc p:has(+ ul), .vsbi-inhaltsblock__desc p:has(+ ol), .vsbi-inhaltsblock__desc p:has(+ dl) {
  margin-bottom: 0.25rem;
}
.vsbi-inhaltsblock__desc p:last-child {
  margin-bottom: 0;
}

.vsbi-inhaltsblock-2col {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}
.vsbi-inhaltsblock-2col[class*=primary], .vsbi-inhaltsblock-2col[class*=secondary] {
  --link-color: #ffffff;
  --link-color-hover: #ffffff;
}
.vsbi-inhaltsblock-2col[class*=gray] {
  --link-color: #0a5050;
}
.vsbi-inhaltsblock-2col a {
  color: var(--link-color);
}
.vsbi-inhaltsblock-2col a:focus, .vsbi-inhaltsblock-2col a:focus-within, .vsbi-inhaltsblock-2col a:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}
.vsbi-inhaltsblock-2col__inner {
  position: relative;
  z-index: 1;
}
.vsbi-inhaltsblock-2col__grid {
  display: block;
}
@media (min-width: 48em) {
  .vsbi-inhaltsblock-2col__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem clamp(1rem, 2vw, 2rem);
  }
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col + .vsbi-inhaltsblock-2col__col {
    padding-top: 2.5rem;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col {
    padding-bottom: 2.5rem;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--primary + .vsbi-inhaltsblock-2col__col.bg--primary {
    padding-top: 0;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--primary:has(+ .vsbi-inhaltsblock-2col__col.bg--primary) {
    padding-bottom: 2.25rem;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--primary-dark + .vsbi-inhaltsblock-2col__col.bg--primary-dark {
    padding-top: 0;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--primary-dark:has(+ .vsbi-inhaltsblock-2col__col.bg--primary-dark) {
    padding-bottom: 2.25rem;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--secondary + .vsbi-inhaltsblock-2col__col.bg--secondary {
    padding-top: 0;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--secondary:has(+ .vsbi-inhaltsblock-2col__col.bg--secondary) {
    padding-bottom: 2.25rem;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--secondary-light + .vsbi-inhaltsblock-2col__col.bg--secondary-light {
    padding-top: 0;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--secondary-light:has(+ .vsbi-inhaltsblock-2col__col.bg--secondary-light) {
    padding-bottom: 2.25rem;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--gray + .vsbi-inhaltsblock-2col__col.bg--gray {
    padding-top: 0;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--gray:has(+ .vsbi-inhaltsblock-2col__col.bg--gray) {
    padding-bottom: 2.25rem;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--white + .vsbi-inhaltsblock-2col__col.bg--white {
    padding-top: 0;
  }
  .vsbi-inhaltsblock-2col__grid .vsbi-inhaltsblock-2col__col.bg--white:has(+ .vsbi-inhaltsblock-2col__col.bg--white) {
    padding-bottom: 2.25rem;
  }
}
.vsbi-inhaltsblock-2col__col {
  color: var(--section-text-color);
  display: flex;
  flex-direction: column;
  padding: 2.5rem clamp(1.5rem, 5vw, 4rem);
}
.vsbi-inhaltsblock-2col__col.col--left {
  align-items: flex-end;
  border-radius: 0 0.75rem 0.75rem 0;
}
.vsbi-inhaltsblock-2col__col.col--right {
  border-radius: 0.75rem 0 0 0.75rem;
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-inhaltsblock-2col__col {
    display: block;
  }
  .vsbi-inhaltsblock-2col__col.col--left, .vsbi-inhaltsblock-2col__col.col--right {
    border-radius: 0;
  }
}
.vsbi-inhaltsblock-2col .ib2-section {
  max-width: 500px;
  padding: 0;
}
.vsbi-inhaltsblock-2col .ib2-section + .ib2-section {
  margin-top: 1.5rem;
  padding: 0;
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-inhaltsblock-2col .ib2-section + .ib2-section {
    margin-top: 2.25rem;
  }
}
.vsbi-inhaltsblock-2col .ib2-section__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 2.75vw, 1.5rem);
  font-family: "PT Sans";
  font-weight: 400;
  font-style: normal;
}
.vsbi-inhaltsblock-2col .ib2-section__blocks {
  display: grid;
  gap: 1rem;
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-inhaltsblock-2col .ib2-section {
    max-width: unset;
  }
}
.vsbi-inhaltsblock-2col .ib2-block--text p {
  margin-bottom: 0.5rem;
}
.vsbi-inhaltsblock-2col .ib2-block--text p:last-child {
  margin: 0;
}
.vsbi-inhaltsblock-2col .ib2-block--table .ib2-table {
  display: table;
  margin: 0;
}
.vsbi-inhaltsblock-2col .ib2-block--table .ib2-table .ib2-row {
  display: table-row;
  padding: 0;
}
.vsbi-inhaltsblock-2col .ib2-block--table .ib2-table .ib2-row .ib2-label,
.vsbi-inhaltsblock-2col .ib2-block--table .ib2-table .ib2-row .ib2-value {
  display: table-cell;
  color: var(--color-content);
}
.vsbi-inhaltsblock-2col .ib2-block--table .ib2-table .ib2-row .ib2-label {
  font-weight: 600;
  padding-right: 1rem;
}

.vsbi-join {
  position: relative;
  overflow: hidden;
  /* --- alle flachen Deklarationen zuerst --- */
  --notch-h: var(--vsbi-notch-h);
  /* Mixins, die verschachtelte Regeln erzeugen, NACH den Deklarationen */
}
.vsbi-join {
  --notch-w: 1.25rem;
  --notch-h: var(--vsbi-notch-h);
  clip-path: polygon(0 0, calc(50% - var(--notch-w)) 0, 50% var(--notch-h), calc(50% + var(--notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 480px) {
  .vsbi-join {
    --notch-w: 10px;
    --notch-h: 16px;
  }
}
.vsbi-join {
  /* Optionaler Fallback, falls clip-path nicht unterstützt wird:
   Dann nutzen wir die alte ::before-Dreiecks-Methode. */
}

.vsbi-join__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 2rem;
  margin-top: 1.5rem;
}

.vsbi-join__title {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .vsbi-join__title {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}

@media (max-width: calc(30em - 1px)) {
  .vsbi-join__button {
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
  }
}
.vsbi-kontaktformular {
  --gap: .75rem;
  --radius: .5rem;
  --error-color: #991b1b;
}
.vsbi-kontaktformular.has-notch {
  --notch-w: 1.25rem;
  --notch-h: 1.5rem;
  clip-path: polygon(0 0, calc(50% - var(--notch-w)) 0, 50% var(--notch-h), calc(50% + var(--notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 480px) {
  .vsbi-kontaktformular.has-notch {
    --notch-w: 10px;
    --notch-h: 16px;
  }
}
.vsbi-kontaktformular .container {
  padding: 0 var(--gap);
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-kontaktformular .container {
    padding: 0;
  }
}
.vsbi-kontaktformular {
  /* ----------------------------------------------------
  FORMULAR
  ---------------------------------------------------- */
}
.vsbi-kontaktformular .vsbi-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__required-hint {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.95rem;
  color: #475569;
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  /* dezent, z. B. Slate-600 */
}
.vsbi-kontaktformular .vsbi-form__fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: clamp(0.125rem, 2vw, 0.75rem);
  padding: 0;
  border: none;
}
.vsbi-kontaktformular .vsbi-form__fieldset:has(+ .vsbi-form__checkbox), .vsbi-kontaktformular .vsbi-form__fieldset.vsbi-form__checkbox {
  margin-bottom: 0;
}
.vsbi-kontaktformular .vsbi-form__fieldset:not(.vsbi-form__checkbox):has(.is-invalid):not(:has(.vsbi-form__row)) {
  padding-top: 1.5rem;
}
.vsbi-kontaktformular .vsbi-form__fieldset.firmendaten > .is-invalid {
  margin-top: 1.5rem;
}
.vsbi-kontaktformular .vsbi-form__legend {
  font-family: "EB Garamond";
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  margin-bottom: 0.375rem;
  margin-left: 0.125rem;
}
.vsbi-kontaktformular .vsbi-form__button-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.vsbi-kontaktformular .vsbi-form__button-group button {
  font-size: 1rem;
  background: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vsbi-kontaktformular .vsbi-form__button-group button.is-active {
  background: #0a5050;
  color: #ffffff;
  cursor: context-menu;
}
.vsbi-kontaktformular .vsbi-form__button-group button:focus, .vsbi-kontaktformular .vsbi-form__button-group button:focus-visible, .vsbi-kontaktformular .vsbi-form__button-group button:hover {
  background: #0a5050;
  color: #ffffff;
}
.vsbi-kontaktformular .vsbi-form__row {
  display: flex;
  gap: var(--gap);
  width: 100%;
}
.vsbi-kontaktformular .vsbi-form__row > div {
  flex: 1;
  min-width: calc(33.3333333333% - 2 * var(--gap));
}
.vsbi-kontaktformular .vsbi-form__row:has(.is-invalid) {
  padding-top: 1.5rem;
}
.vsbi-kontaktformular .vsbi-form textarea {
  resize: vertical;
  min-height: 200px;
  max-height: 500px;
}
.vsbi-kontaktformular .vsbi-form input,
.vsbi-kontaktformular .vsbi-form select,
.vsbi-kontaktformular .vsbi-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid #d4dfe7;
  font-size: 1rem;
  transition: box-shadow 0.15s ease;
}
.vsbi-kontaktformular .vsbi-form input:focus, .vsbi-kontaktformular .vsbi-form input:hover,
.vsbi-kontaktformular .vsbi-form select:focus,
.vsbi-kontaktformular .vsbi-form select:hover,
.vsbi-kontaktformular .vsbi-form textarea:focus,
.vsbi-kontaktformular .vsbi-form textarea:hover {
  box-shadow: inset 0 0 0 1px #0a5050;
  outline: none;
}
.vsbi-kontaktformular .vsbi-form input:focus-visible,
.vsbi-kontaktformular .vsbi-form select:focus-visible,
.vsbi-kontaktformular .vsbi-form textarea:focus-visible {
  box-shadow: inset 0 0 0 2px #0a5050;
}
.vsbi-kontaktformular .vsbi-form .vsbi-hp {
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  white-space: nowrap;
}
.vsbi-kontaktformular .vsbi-form .select-wrapper {
  position: relative;
  width: 100%;
  min-height: 50px;
  background-color: #ffffff;
  border-radius: var(--radius);
}
.vsbi-kontaktformular .vsbi-form .select-wrapper::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  pointer-events: none;
}
.vsbi-kontaktformular .vsbi-form .select-wrapper::before {
  content: "";
  position: absolute;
  background-color: #0a5050;
  width: 2.5rem;
  height: 100%;
  right: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid #0a5050;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.vsbi-kontaktformular .vsbi-form .select-wrapper select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 2.5rem;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: transparent;
  cursor: pointer;
}
.vsbi-kontaktformular .vsbi-form .select-wrapper:focus::before, .vsbi-kontaktformular .vsbi-form .select-wrapper:focus-visible::before, .vsbi-kontaktformular .vsbi-form .select-wrapper:focus-within::before, .vsbi-kontaktformular .vsbi-form .select-wrapper:hover::before {
  background-color: #06856c;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox {
  --cb-size: 1.4rem;
  --cb-gap: var(--gap, .75rem);
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check {
  position: relative;
  cursor: pointer;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  justify-content: flex-start;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check span {
  width: var(--cb-size);
  height: var(--cb-size);
  border-radius: 0.25rem;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color, #cbd5e1);
  transition: 0.15s ease;
  margin-top: 0.1rem;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check input:checked + span {
  background: #0a5050;
  border-color: #0a5050;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check input + span::after {
  content: "";
  font-size: 0.95rem;
  color: #ffffff;
  padding-top: 0.125rem;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check input:checked + span::after {
  content: "✓";
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check input:hover + span, .vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check:hover span {
  border-color: #0a5050;
  box-shadow: inset 0 0 0 1px #0a5050;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check input:focus-visible + span {
  box-shadow: inset 0 0 0 2px #0a5050;
  outline: none;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check.is-invalid {
  /* nur die Box rot, nicht Link etc. */
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check.is-invalid input + span {
  border-color: var(--error-color);
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check.is-invalid input:checked + span {
  border-color: transparent;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-check.is-invalid input:checked + span:hover {
  box-shadow: inset 0 0 0 2px #0a5050;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div {
  /* Linkblock unterhalb des Labels — gleicher Einzug wie Text im Label */
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-policy::before {
  content: "";
  width: var(--cb-size);
  height: 1px;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-policy a,
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-policy .vsbi-policy-link {
  color: #0a5050;
  text-decoration: underline;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-policy a:focus, .vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-policy a:focus-within, .vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > div .vsbi-policy a:focus-visible {
  outline: none;
}
.vsbi-kontaktformular .vsbi-form .vsbi-form__checkbox > .vsbi-field-error {
  position: static !important;
  display: block;
  margin: -0.625rem 0 0;
  padding-left: 2.125rem;
  color: var(--error-color);
  pointer-events: none;
}
.vsbi-kontaktformular .vsbi-form__submit {
  margin-top: 0.125rem;
  align-self: flex-start;
}
.vsbi-kontaktformular .vsbi-form__feedback {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
}
.vsbi-kontaktformular .vsbi-form__feedback--success {
  background: #e6f4ea;
  color: #06856c;
  border: 1px solid #0a5050;
}
.vsbi-kontaktformular .vsbi-form__feedback--error {
  background: #fee2e2;
  color: var(--error-color);
  border: 1px solid #f5b5b5;
}
.vsbi-kontaktformular .vsbi-form .is-invalid {
  position: relative;
}
.vsbi-kontaktformular .vsbi-form .is-invalid:not(:has(textarea)),
.vsbi-kontaktformular .vsbi-form .is-invalid select#vsbi_select_anrede {
  outline: 1px solid var(--error-color);
  outline-offset: -1px;
  border-radius: var(--radius);
}
.vsbi-kontaktformular .vsbi-form .is-invalid.vsbi-check {
  outline: none;
}
.vsbi-kontaktformular .vsbi-form .is-invalid:has(textarea) textarea {
  box-shadow: inset 0 0 0 1px var(--error-color);
}
.vsbi-kontaktformular .vsbi-form .vsbi-field-error {
  position: absolute;
  top: -1.5rem;
  left: 0.375rem;
  display: block;
  color: var(--error-color);
  font-size: 0.85rem;
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-kontaktformular .vsbi-form .vsbi-form__row {
    flex-direction: column;
  }
  .vsbi-kontaktformular .vsbi-form .vsbi-form__row:has(.is-invalid) {
    padding-top: 0;
  }
  .vsbi-kontaktformular .vsbi-form .is-invalid:not(.vsbi-check) {
    margin-top: 1.5rem;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-kontaktformular .vsbi-form .vsbi-form__button-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .vsbi-kontaktformular .vsbi-form .vsbi-form__button-group button {
    border-radius: 0;
  }
  .vsbi-kontaktformular .vsbi-form .vsbi-form__button-group button:first-of-type {
    border-radius: var(--radius) 0 0 0;
  }
  .vsbi-kontaktformular .vsbi-form .vsbi-form__button-group button:last-of-type {
    border-radius: 0 0 var(--radius) var(--radius);
  }
}
.vsbi-kontaktformular {
  /* ----------------------------------------------------
  DANKE-BOX (AJAX und PRG)
  ---------------------------------------------------- */
}
.vsbi-kontaktformular .vsbi-form__thank {
  --main-color: #ffffff;
  --bg-color: #0a3c3c;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--gap) 0 var(--gap) var(--gap);
  background: var(--bg-color);
  color: var(--main-color);
  text-align: center;
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-thank__title {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  margin: 0 0 0.35rem 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-thank__text {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}
.vsbi-kontaktformular .vsbi-form__thank {
  /* Echter Stepper */
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-stepper {
  margin: 0 auto 1rem auto;
  width: 100%;
  max-width: 750px;
  position: relative;
  height: 20px;
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-stepper__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #dbece1;
  transform: translateY(-50%);
  border-radius: 99px;
  overflow: hidden;
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-stepper__fill {
  height: 100%;
  width: 0%;
  background: var(--main-color);
  transition: width 0.1s linear;
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-stepper__dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--main-color);
  border-radius: 50%;
  transform: translateY(-50%);
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-stepper__cursor {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: var(--main-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.1s linear;
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-thank__link {
  margin: 0;
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-thank__link a {
  color: #ffffff;
  text-decoration: underline;
}
.vsbi-kontaktformular .vsbi-form__thank .vsbi-thank__link a:focus, .vsbi-kontaktformular .vsbi-form__thank .vsbi-thank__link a:focus-visible, .vsbi-kontaktformular .vsbi-form__thank .vsbi-thank__link a:hover {
  text-decoration: none;
}

/* =========================================
   Abschnitt: Mitteilungen (Slider + Cards)
   ========================================= */
.vsbi-meldungen {
  --radius: 0.75rem;
  --pad: clamp(0.75rem, 1.5vw, 1rem);
  --footer-bg: #ffffff;
  --footer-bg-hover: #0a5050;
  --footer-text: #0a5050;
  --footer-text-hover: #ffffff;
  --title-color: #0a5050;
  --gap: clamp(2rem, 4.5vw, 4rem);
  padding-left: var(--gap);
  padding-right: var(--gap);
  text-align: center;
}
.vsbi-meldungen.bg--white {
  --footer-bg: #0a5050;
  --footer-bg-hover: #06856c;
  --footer-text: #ffffff;
  --title-color: #ffffff;
}
.vsbi-meldungen[class*=primary] {
  --footer-bg-hover: #06856c;
}
.vsbi-meldungen {
  /* Überschrift deckungsgleich zu Terminen */
}
.vsbi-meldungen .vsbi-section__headline {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .vsbi-meldungen .vsbi-section__headline {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}
.vsbi-meldungen .vsbi-section__headline {
  hyphens: auto;
  margin-bottom: 3rem;
  text-align: center;
}
.vsbi-meldungen {
  /* Slider-Defaults (analog Termin) – vorhandene Utilities greifen */
}
.vsbi-meldungen .vsbi-slider {
  /* Anzahl Cards pro View – etwas konservativer als Termin */
  --ppv: 6;
}
@media (max-width: calc(120em - 1px)) {
  .vsbi-meldungen .vsbi-slider {
    --ppv: 5;
  }
}
@media (max-width: calc(96em - 1px)) {
  .vsbi-meldungen .vsbi-slider {
    --ppv: 4;
  }
}
@media (max-width: calc(80em - 1px)) {
  .vsbi-meldungen .vsbi-slider {
    --ppv: 3;
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-meldungen .vsbi-slider {
    --ppv: 2;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-meldungen .vsbi-slider {
    --ppv: 1;
  }
}
.vsbi-meldungen p.events__empty {
  text-align: center;
  font-family: "PT Sans";
  font-weight: 400;
  font-style: italic;
  color: var(--section-text-color, #0a3c3c);
  margin: 0;
}
.vsbi-meldungen {
  /* ============================
      Card-Basis (Overlay + Trigger)
      ============================ */
}
.vsbi-meldungen .event-card {
  position: relative;
  width: 100%;
  min-height: 300px;
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  overflow: hidden;
}
.vsbi-meldungen .event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.25) 60%), var(--event-cover, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: 0.5s ease-in-out all;
}
.vsbi-meldungen .event-card__top {
  position: relative;
  z-index: 1;
  padding: calc(var(--pad) + 0.25rem) var(--pad) 0.5rem var(--pad);
  color: var(--title-color);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  text-align: center;
  gap: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.vsbi-meldungen .event-card__title {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  line-height: 1.15;
  margin: 0;
  color: var(--title-color);
  text-transform: uppercase;
  transition: 0.125s ease-in-out transform;
}
.vsbi-meldungen .event-card__footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 0.75rem var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  transition: 0.125s ease-in-out all;
}
.vsbi-meldungen .event-card__date {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: block;
}
.vsbi-meldungen .event-card {
  /* Kategorie-Badge (optional, wenn gesetzt) */
}
.vsbi-meldungen .event-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 0.375rem;
  color: #ffffff;
  background: rgb(7.4, 114.45, 98.2);
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.vsbi-meldungen .event-card .vsbi-badge--date {
  position: absolute;
  bottom: 0.75rem;
  right: 0;
  padding: 0.25rem 0.55rem;
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 0.375rem 0 0 0.375rem;
  color: #0a3c3c;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.vsbi-meldungen .event-card__trigger {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 10;
  pointer-events: auto;
}
.vsbi-meldungen .event-card:focus::before, .vsbi-meldungen .event-card:focus-visible::before, .vsbi-meldungen .event-card:hover::before {
  transform: scale(1.2);
  filter: brightness(1.08);
}
.vsbi-meldungen .event-card:focus .vsbi-badge--date, .vsbi-meldungen .event-card:focus-visible .vsbi-badge--date, .vsbi-meldungen .event-card:hover .vsbi-badge--date {
  background-color: #ffffff;
}
.vsbi-meldungen .event-card:focus .event-card__footer, .vsbi-meldungen .event-card:focus-visible .event-card__footer, .vsbi-meldungen .event-card:hover .event-card__footer {
  background-color: #ffffff;
  color: #06856c;
}
.vsbi-meldungen .event-card--meldung .event-card__footer {
  padding: 0.875rem 1rem;
}
.vsbi-meldungen .event-card--meldung .event-card__teaser {
  margin: 0;
  font-family: "Mulish";
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.05rem, 2vw, 1.125rem);
  line-height: 1.35;
  color: var(--footer-text);
  text-transform: none;
}
.vsbi-meldungen .event-card--meldung:hover .event-card__footer, .vsbi-meldungen .event-card--meldung:focus-within .event-card__footer {
  background: var(--footer-bg-hover);
}
.vsbi-meldungen .event-card--meldung:hover .event-card__footer .event-card__teaser, .vsbi-meldungen .event-card--meldung:focus-within .event-card__footer .event-card__teaser {
  color: var(--footer-text-hover);
}
.vsbi-meldungen .event-card--meldung:hover .event-card__badge, .vsbi-meldungen .event-card--meldung:focus-within .event-card__badge {
  background: var(--footer-bg-hover);
}
.vsbi-meldungen {
  /* Pfeile auf sehr kleinen Screens ausblenden (wie beim Termin-Slider) */
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-meldungen .vsbi-slider__nav {
    display: none;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-meldungen .event-card {
    min-height: unset;
  }
  .vsbi-meldungen .event-card__top {
    min-height: 160px;
  }
  .vsbi-meldungen .event-card__top .event-card__title {
    font-size: clamp(1.05rem, 6vw, 1.375rem);
  }
  .vsbi-meldungen .event-card__footer {
    min-height: 80px;
  }
}

/* =========================================
   Kleine Hilfsklassen für Daten-getriebene Styles
   (Optional – wenn du im PHP Klassenschalter setzt)
   ========================================= */
.vsbi-meldungen .event-card--meldung.is-termin {
  /* z. B. Datum/Termin optisch mehr gewichten */
}
.vsbi-meldungen .event-card--meldung.is-termin .event-card__date {
  letter-spacing: 0.03em;
}

.vsbi-meldungen .event-card--meldung.is-mitteilung {
  /* z. B. etwas neutraler */
}
.vsbi-meldungen .event-card--meldung.is-mitteilung .event-card__date {
  opacity: 0.85;
}

/* =========================================================
   Meldungen – Galerie (Hauptbild + Thumbnails)
   ========================================================= */
.meldung-gallery {
  margin-top: 1.5rem;
  /* -----------------------------------------
      Hauptbild
      ----------------------------------------- */
}
.meldung-gallery__main {
  margin: 0;
  width: 100%;
  height: clamp(180px, min(55vw, 60vh), 575px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d4dfe7;
  padding: clamp(0.5rem, 2vw, 1.25rem) clamp(0.5rem, 1vw, 1rem);
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
}
.meldung-gallery__main figure {
  margin: 0;
}
.meldung-gallery__main img {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  -o-object-position: center;
     object-position: center;
  display: block;
  background-color: transparent;
  transition: opacity 0.2s ease;
}
.meldung-gallery__caption {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  margin-top: 0 !important;
  padding: 0.5rem;
  font-size: 0.975rem;
  line-height: 1.4;
  background-color: #06856c;
  color: #ffffff;
  text-align: center;
  border-radius: 0 0 0.75rem 0.75rem;
}
.meldung-gallery {
  /* -----------------------------------------
      Thumbnail-Leiste
      ----------------------------------------- */
}
.meldung-gallery__thumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* Mobile freundlich */
  overflow-x: auto;
  padding-bottom: 0.25rem;
  /* sanftes Scrollen */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.meldung-gallery {
  /* -----------------------------------------
      Einzelnes Thumbnail
      ----------------------------------------- */
}
.meldung-gallery__thumb {
  scroll-snap-align: start;
  margin-top: 0.25rem;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.6;
  border-radius: 0.2rem;
  transition: opacity 0.15s ease, transform 0.15s ease;
  /* Tastatur-Fokus */
}
.meldung-gallery__thumb:focus-visible {
  outline: none;
  opacity: 1;
  filter: none;
}
.meldung-gallery__thumb {
  /* Aktiv */
}
.meldung-gallery__thumb.is-active {
  opacity: 1;
  filter: none;
}
.meldung-gallery__thumb {
  /* Desktop-Hover (nur wenn sinnvoll) */
}
@media (hover: hover) {
  .meldung-gallery__thumb:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
}
.meldung-gallery__thumb img {
  display: block;
  width: 64px;
  height: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.2rem;
  border: 1px solid #b0bdc4;
}
.meldung-gallery {
  /* -----------------------------------------
      Kleine Optimierung bei vielen Bildern
      ----------------------------------------- */
}
.meldung-gallery__thumbs::-webkit-scrollbar {
  height: 6px;
}
.meldung-gallery__thumbs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}
.meldung-gallery__thumbs::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================
   Abschnitt: Mitteilungen (intern)
   ========================================= */
.vsbi-meldungen-intern {
  --bg-color-filter-buttons: #06856c;
  --bg-color-filter-buttons-hover: #0a5050;
  --fg-color-filter-buttons: #ffffff;
  --fg-color-filter-buttons-hover: #ffffff;
  --bg-color-body: #0a5050;
  --bg-color-body-hover: #06856c;
}
.vsbi-meldungen-intern[class*=secondary] {
  --bg-color-filter-buttons: #ffffff;
  --fg-color-filter-buttons: #0a3c3c;
  --bg-color-body-hover: #0a3c3c;
}
.vsbi-meldungen-intern[class*=primary] {
  --bg-color-filter-buttons-hover: #ffffff;
  --fg-color-filter-buttons-hover: #0a3c3c;
  --bg-color-body: #06856c;
  --bg-color-body-hover: #0aa582;
}
.vsbi-meldungen-intern[class*=white] .container .member-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.vsbi-meldungen-intern {
  padding: var(--section-pad-y) 0;
}
.vsbi-meldungen-intern .container {
  padding: 0 var(--gap);
}
.vsbi-meldungen-intern .container p.no-messages {
  font-family: "PT Sans";
  font-weight: 400;
  font-style: italic;
  text-align: center;
  margin: 0;
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-meldungen-intern .container {
    padding: 0.75rem;
  }
}
.vsbi-meldungen-intern.has-notch {
  --notch-w: 1.25rem;
  --notch-h: 1.5rem;
  clip-path: polygon(0 0, calc(50% - var(--notch-w)) 0, 50% var(--notch-h), calc(50% + var(--notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 480px) {
  .vsbi-meldungen-intern.has-notch {
    --notch-w: 10px;
    --notch-h: 16px;
  }
}
.vsbi-meldungen-intern.has-notch .container p.no-messages {
  margin-top: 1rem;
}
.vsbi-meldungen-intern.has-notch .meldungen-filter {
  margin-top: 1rem;
}
.vsbi-meldungen-intern:has(.vsbi-pagination) {
  padding-bottom: calc(var(--section-pad-y) / 1.875);
}
.vsbi-meldungen-intern .meldung-archive-grid {
  display: grid;
  grid-auto-rows: 1fr;
  /* Karten in einer Zeile gleich hoch machen */
  gap: clamp(0.75rem, 2vw, 1.875rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 160em) {
  .vsbi-meldungen-intern .meldung-archive-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.vsbi-meldungen-intern .meldung-archive-grid {
  /* NEU: genau zwischen xxlarge (inkl.) und < xxxlarge */
}
@media (min-width: 120em) and (max-width: calc(160em - 1px)) {
  .vsbi-meldungen-intern .meldung-archive-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: calc(120em - 1px)) {
  .vsbi-meldungen-intern .meldung-archive-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: calc(96em - 1px)) {
  .vsbi-meldungen-intern .meldung-archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-meldungen-intern .meldung-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-meldungen-intern .meldung-archive-grid {
    grid-template-columns: auto;
  }
}
.vsbi-meldungen-intern .event-card {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(var(--event-top-min, 160px), 1fr) minmax(var(--event-footer-min, 72px), auto);
}
.vsbi-meldungen-intern .vsbi-pagination {
  margin-top: 2rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.vsbi-meldungen-intern .vsbi-pagination .vsbi-pagination__prev,
.vsbi-meldungen-intern .vsbi-pagination .vsbi-pagination__next {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  display: inline-block;
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-primary);
  padding: 0 0.125rem;
}
.vsbi-meldungen-intern .vsbi-pagination .vsbi-pagination__prev:hover, .vsbi-meldungen-intern .vsbi-pagination .vsbi-pagination__prev:focus,
.vsbi-meldungen-intern .vsbi-pagination .vsbi-pagination__next:hover,
.vsbi-meldungen-intern .vsbi-pagination .vsbi-pagination__next:focus {
  color: var(--color-secondary);
}
.vsbi-meldungen-intern .vsbi-pagination .vsbi-pagination__info {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1.05rem;
  color: var(--color-primary);
  margin: 0 0.25rem;
}
.vsbi-meldungen-intern .vsbi-pagination:not(:has(.vsbi-pagination__info)) {
  display: none;
}
.vsbi-meldungen-intern.has-enhanced-filters {
  /* Labels visuell verstecken (A11y bleibt) */
}
.vsbi-meldungen-intern.has-enhanced-filters .meldungen-filter__row label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.vsbi-meldungen-intern.has-enhanced-filters {
  /* Native selects verstecken, wenn enhanced */
}
.vsbi-meldungen-intern.has-enhanced-filters .meldungen__select.is-enhanced {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.vsbi-meldungen-intern.has-enhanced-filters {
  /* Apply/Reset im JS-Modus ausblenden (No-JS bleibt) */
}
.vsbi-meldungen-intern.has-enhanced-filters .meldungen-filter__submit,
.vsbi-meldungen-intern.has-enhanced-filters .meldungen-filter__reset {
  display: none;
}
.vsbi-meldungen-intern {
  /* Filterrow Layout (an Members angelehnt, aber simpel) */
}
.vsbi-meldungen-intern .meldungen-filter__row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  max-width: 750px;
  margin: 0 auto;
}
.vsbi-meldungen-intern .meldungen-filter__row input[type=search] {
  width: 100%;
  max-width: 300px;
  height: 2.675rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}
.vsbi-meldungen-intern .meldungen-filter__row input[type=search]:focus-visible {
  outline: 2px solid #06856c;
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-meldungen-intern .meldungen-filter__row {
    flex-direction: column;
    gap: 0;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select {
    width: 100%;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select button {
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid #ffffff;
    display: grid;
    grid-template-columns: auto 1rem;
    outline: none !important;
    box-shadow: none !important;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select button:active {
    transform: none;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select:first-of-type {
    order: 2;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select:first-of-type button {
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select:last-of-type {
    order: 3;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select:last-of-type button:not([aria-expanded=true]) {
    border-radius: 0 0 0.5rem 0.5rem;
    border-bottom: none;
  }
  .vsbi-meldungen-intern .meldungen-filter__row .vsbi-select .vsbi-select__list {
    top: 100%;
    border-radius: 0 0 0.5rem 0.5rem;
    border: 0;
  }
  .vsbi-meldungen-intern .meldungen-filter__row input[type=search] {
    order: 1;
    max-width: unset;
    margin-top: 0;
    margin-bottom: 1.5rem;
  }
  .vsbi-meldungen-intern .meldungen-filter__row input[type=search]::-moz-placeholder {
    text-align: center;
  }
  .vsbi-meldungen-intern .meldungen-filter__row input[type=search]::placeholder {
    text-align: center;
  }
}
.vsbi-meldungen-intern {
  /* ---------- Compact Dropdown Widget (wie Members) ---------- */
}
.vsbi-meldungen-intern .vsbi-select {
  position: relative;
  display: inline-block;
}
.vsbi-meldungen-intern .vsbi-select__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--bg-color-filter-buttons);
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  color: var(--fg-color-filter-buttons);
  border: none;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.02s ease;
}
.vsbi-meldungen-intern .vsbi-select__button:hover {
  background: var(--bg-color-filter-buttons-hover);
  color: var(--fg-color-filter-buttons-hover);
}
.vsbi-meldungen-intern .vsbi-select__button:active {
  transform: translateY(1px);
}
.vsbi-meldungen-intern .vsbi-select__button::after {
  content: "▼";
  font-size: 0.8em;
}
.vsbi-meldungen-intern .vsbi-select__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1001;
  display: none;
  background: #ffffff;
  border: 1px solid #d4dfe7;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  max-width: 24rem;
  max-height: 14rem;
  overflow: auto;
  transform-origin: top left;
  transform: scale(0.98);
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.vsbi-meldungen-intern .vsbi-select__list[aria-hidden=false] {
  display: block;
  transform: scale(1);
  opacity: 1;
}
.vsbi-meldungen-intern .vsbi-select__option {
  padding: 0.375rem 0.625rem;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  color: #0a3c3c;
}
.vsbi-meldungen-intern .vsbi-select__option:hover, .vsbi-meldungen-intern .vsbi-select__option[aria-selected=true] {
  background: #0a5050;
  color: #ffffff;
}
.vsbi-meldungen-intern .vsbi-select {
  /* Disabled */
}
.vsbi-meldungen-intern .vsbi-select.is-disabled {
  pointer-events: none;
}
.vsbi-meldungen-intern .vsbi-select__button.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(15%);
}
.vsbi-meldungen-intern {
  /* Summary Chips */
}
.vsbi-meldungen-intern .meldungen__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.vsbi-meldungen-intern .meldungen__summary .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: #0a5050;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
}
.vsbi-meldungen-intern .meldungen__summary .filter-chip__label {
  opacity: 0.75;
  line-height: 1;
}
.vsbi-meldungen-intern .meldungen__summary .filter-chip__value {
  font-weight: 600;
  line-height: 1;
}
.vsbi-meldungen-intern .meldungen__summary .filter-chip__clear {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  text-align: center;
  line-height: 18px;
  font-weight: 700;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.vsbi-meldungen-intern .meldungen__summary .filter-chip__clear:hover {
  background: rgba(0, 0, 0, 0.18);
}
.vsbi-meldungen-intern .meldungen__summary:empty {
  margin: 0;
  height: 2.5rem;
}
.vsbi-meldungen-intern {
  /* Ergebnisse */
}
.vsbi-meldungen-intern .meldungen-filter__count {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  margin: 0 0 1.5rem 0.25rem;
  text-align: left;
  font-size: 0.95em;
}

/* ===========================
   Mitglieder – Cards & Grid
=========================== */
.vsbi-members,
.vsbi-partners {
  --gap: clamp(2rem, 4.5vw, 4rem);
  --bg-color-filter-buttons: #06856c;
  --bg-color-filter-buttons-hover: #0a5050;
  --fg-color-filter-buttons: #ffffff;
  --fg-color-filter-buttons-hover: #ffffff;
  --bg-color-body: #0a5050;
  --bg-color-body-hover: #06856c;
}
.vsbi-members[class*=secondary],
.vsbi-partners[class*=secondary] {
  --bg-color-filter-buttons: #ffffff;
  --fg-color-filter-buttons: #0a3c3c;
  --bg-color-body-hover: #0a3c3c;
}
.vsbi-members[class*=primary],
.vsbi-partners[class*=primary] {
  --bg-color-filter-buttons-hover: #ffffff;
  --fg-color-filter-buttons-hover: #0a3c3c;
  --bg-color-body: #06856c;
  --bg-color-body-hover: #0aa582;
}
.vsbi-members[class*=white] .container .member-card,
.vsbi-partners[class*=white] .container .member-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.vsbi-members .container,
.vsbi-partners .container {
  padding: 0 var(--gap);
}
.vsbi-members .container p.members__empty,
.vsbi-partners .container p.members__empty {
  font-family: "PT Sans";
  font-weight: 400;
  font-style: italic;
  text-align: center;
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-members .container,
  .vsbi-partners .container {
    padding: 0;
  }
}
.vsbi-members,
.vsbi-partners {
  /* GRID: 4 -> 3 -> 2 Spalten */
}
.vsbi-members .members__grid,
.vsbi-partners .members__grid {
  display: grid;
  grid-auto-rows: 1fr;
  /* Karten in einer Zeile gleich hoch machen */
  gap: clamp(0.75rem, 2vw, 1.875rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 160em) {
  .vsbi-members .members__grid,
  .vsbi-partners .members__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.vsbi-members .members__grid,
.vsbi-partners .members__grid {
  /* NEU: genau zwischen xxlarge (inkl.) und < xxxlarge */
}
@media (min-width: 120em) and (max-width: calc(160em - 1px)) {
  .vsbi-members .members__grid,
  .vsbi-partners .members__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: calc(120em - 1px)) {
  .vsbi-members .members__grid,
  .vsbi-partners .members__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: calc(96em - 1px)) {
  .vsbi-members .members__grid,
  .vsbi-partners .members__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-members .members__grid,
  .vsbi-partners .members__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-members .members__grid,
  .vsbi-partners .members__grid {
    grid-template-columns: auto;
  }
}
.vsbi-members .members__grid,
.vsbi-partners .members__grid {
  /* wenn geladen wird: leicht ausgrauen */
}
.vsbi-members .members__grid[aria-busy=true],
.vsbi-partners .members__grid[aria-busy=true] {
  opacity: 0.65;
  transition: opacity 0.2s ease-in-out;
}
.vsbi-members .members__grid,
.vsbi-partners .members__grid {
  /* NEU: nur <li> als direkte Kinder, keine Bullet/Einrückung */
}
.vsbi-members .members__grid > li,
.vsbi-partners .members__grid > li {
  list-style: none;
  margin: 0;
  padding: 0;
  /* NEU: damit die Karte (article) binnen des LI vollflächig strecken kann */
  display: flex;
  min-width: 0;
  /* wichtig für Overflow/ellipsis in Grid-Items */
}
.vsbi-members .members__grid,
.vsbi-partners .members__grid {
  /* NEU: Karte füllt das Grid-Item vollständig (gleich hohe Karten) */
}
.vsbi-members .members__grid > li > .member-card,
.vsbi-partners .members__grid > li > .member-card {
  width: 100%;
  height: 100%;
  display: flex;
  /* dein Stil: Flex-Spalte bleibt */
  flex-direction: column;
  /* (du setzt es unten ohnehin nochmal – hier für Sicherheit) */
}
.vsbi-members,
.vsbi-partners {
  /* CARD: Zwei Zeilen – Media (oben) + Footer (unten) */
}
.vsbi-members .member-card,
.vsbi-partners .member-card {
  position: relative;
  /* ➜ Statt CSS-Grid innen: Flex-Spalte für verlässliche Höhensteuerung */
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.75rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.125);
}
.vsbi-members .member-card__trigger,
.vsbi-partners .member-card__trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  text-indent: -9999px;
}
.vsbi-members .member-card__trigger:focus-visible,
.vsbi-partners .member-card__trigger:focus-visible {
  outline: 3px solid rgb(10.4028776978, 230.5971223022, 187.2517985612);
  outline-offset: 2px;
}
.vsbi-members .member-card,
.vsbi-partners .member-card {
  /* MEDIA: fixe, aber responsive Mindesthöhe, damit Logos nicht „schwimmen“ */
}
.vsbi-members .member-card__media,
.vsbi-partners .member-card__media {
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.4vw, 1.25rem);
  background: #ffffff;
  /* Höhe stabilisieren: wähle genau eine der drei Varianten */
  /* Variante A: fixe, responsive Mindesthöhe */
  min-height: clamp(120px, 22vw, 180px);
  /* Variante B (auskommentieren, falls bevorzugt): Bildfenster über Seitenverhältnis
   			aspect-ratio: 16 / 9;
   		*/
  /* Variante C (auskommentieren, falls bevorzugt): harte Höhe
   			height: 180px;
   		*/
}
.vsbi-members .member-card__logo, .vsbi-members .member-card__media img, .vsbi-members .member-card__media svg,
.vsbi-partners .member-card__logo,
.vsbi-partners .member-card__media img,
.vsbi-partners .member-card__media svg {
  display: block;
  max-width: 80%;
  height: auto;
  max-height: clamp(46px, 10vw, 96px);
  -o-object-fit: contain;
     object-fit: contain;
  transition: 0.5s ease-in-out transform;
}
.vsbi-members .member-card__logo--fallback,
.vsbi-partners .member-card__logo--fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(46px, 10vw, 96px);
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  color: #ffffff;
  background: #0a5050;
  border-radius: 0.25rem;
}
.vsbi-members .member-card,
.vsbi-partners .member-card {
  /* FOOTER: gleich hohe Titelzone (≈2 Zeilen) */
}
.vsbi-members .member-card__body,
.vsbi-partners .member-card__body {
  background-color: var(--bg-color-body);
  color: #ffffff;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: 0.25s ease-in-out all;
}
.vsbi-members .member-card,
.vsbi-partners .member-card {
  /* Titel: auf max. 2 Zeilen clampen + Ellipsis */
}
.vsbi-members .member-card__title,
.vsbi-partners .member-card__title {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  margin: 0;
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  line-height: 1.35;
  text-align: center;
  display: block;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* maximal 2 Zeilen */
  overflow: hidden;
  text-overflow: ellipsis;
  /* saubere Trennung für sehr lange Begriffe */
  word-break: break-word;
  hyphens: auto;
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-members .member-card,
  .vsbi-partners .member-card {
    /* Falls du mobil ein kompakteres Media-Fenster willst */
    /* min-height: clamp(90px, 30vw, 120px); */
  }
  .vsbi-members .member-card__title,
  .vsbi-partners .member-card__title {
    hyphens: auto;
    /* Bei Bedarf: nur 1 Zeile auf sehr kleinen Screens
         -webkit-line-clamp: 1;
      */
  }
}
.vsbi-members .member-card:focus .member-card__body, .vsbi-members .member-card:hover .member-card__body,
.vsbi-partners .member-card:focus .member-card__body,
.vsbi-partners .member-card:hover .member-card__body {
  background-color: var(--bg-color-body-hover);
  transition: 0.25s ease-in-out all;
}
.vsbi-members .member-card:focus .member-card__logo, .vsbi-members .member-card:focus .member-card__media img, .vsbi-members .member-card:focus .member-card__media svg, .vsbi-members .member-card:hover .member-card__logo, .vsbi-members .member-card:hover .member-card__media img, .vsbi-members .member-card:hover .member-card__media svg,
.vsbi-partners .member-card:focus .member-card__logo,
.vsbi-partners .member-card:focus .member-card__media img,
.vsbi-partners .member-card:focus .member-card__media svg,
.vsbi-partners .member-card:hover .member-card__logo,
.vsbi-partners .member-card:hover .member-card__media img,
.vsbi-partners .member-card:hover .member-card__media svg {
  transition: 0.5s ease-in-out transform;
  transform: scale(1.1);
}
.vsbi-members,
.vsbi-partners {
  /* HEADLINE */
}
.vsbi-members .members__headline,
.vsbi-partners .members__headline {
  margin-bottom: 1rem;
  text-align: center;
  color: var(--section-title-color);
}
.vsbi-members,
.vsbi-partners {
  /* ===========================================================
      FILTERLEISTE (kompakte grüne Trigger + weißes Dropdown)
      — sauber gescoped, keine Duplikate
   =========================================================== */
  /* JS-Flag: Labels visuell ausblenden (A11y bleibt intakt) */
}
.vsbi-members.has-enhanced-filters .members__filters .members__label,
.vsbi-partners.has-enhanced-filters .members__filters .members__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.vsbi-members .members__filters,
.vsbi-partners .members__filters {
  display: flex;
  justify-content: center;
}
.vsbi-members .members__filters .members__filters-row,
.vsbi-partners .members__filters .members__filters-row {
  border: 0;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.5rem;
}
.vsbi-members .members__filters .members__filters-row > div,
.vsbi-partners .members__filters .members__filters-row > div {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  /* No-JS: natives <select> als Chip */
}
.vsbi-members .members__filters .members__filters-row > div .members__select,
.vsbi-partners .members__filters .members__filters-row > div .members__select {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  height: auto;
  display: inline-flex;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-clip: padding-box;
  cursor: pointer;
}
.vsbi-members .members__filters .members__filters-row > div .members__select:focus, .vsbi-members .members__filters .members__filters-row > div .members__select:focus-visible, .vsbi-members .members__filters .members__filters-row > div .members__select:focus-within,
.vsbi-partners .members__filters .members__filters-row > div .members__select:focus,
.vsbi-partners .members__filters .members__filters-row > div .members__select:focus-visible,
.vsbi-partners .members__filters .members__filters-row > div .members__select:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
.vsbi-members .members__filters .members__filters-row > div,
.vsbi-partners .members__filters .members__filters-row > div {
  /* JS: natives <select> verstecken (A11y bleibt) */
}
.vsbi-members .members__filters .members__filters-row > div .members__select.is-enhanced,
.vsbi-partners .members__filters .members__filters-row > div .members__select.is-enhanced {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.vsbi-members .members__filters .members__filters-row > div,
.vsbi-partners .members__filters .members__filters-row > div {
  /* ---------- Compact Dropdown nur in der Filterleiste ---------- */
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select {
  position: relative;
  display: inline-block;
  /* Trigger: GRÜN gefüllt (Screenshot-Optik) */
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__button,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--bg-color-filter-buttons);
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  color: var(--fg-color-filter-buttons);
  border: none;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.02s ease;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__button:hover,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button:hover {
  background: var(--bg-color-filter-buttons-hover);
  color: var(--fg-color-filter-buttons-hover);
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__button:active,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button:active {
  transform: translateY(1px);
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__button::after,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button::after {
  position: relative;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "▼";
  font-size: 0.8em;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select {
  /* Popup: weiß, Radius, Shadow; min. Buttonbreite, kann wachsen */
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__list,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1001;
  display: none;
  /* via [aria-hidden="false"] -> block */
  background: #ffffff;
  border: 1px solid #d4dfe7;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  max-width: 24rem;
  max-height: 14rem;
  overflow: auto;
  scrollbar-width: thin;
  /* sanftes Aufklappen */
  transform-origin: top left;
  transform: scale(0.98);
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__list[aria-hidden=false],
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__list[aria-hidden=false] {
  display: block;
  transform: scale(1);
  opacity: 1;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select {
  /* Optionen: einzeilig + Ellipsis, Hover grün */
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__option,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__option {
  padding: 0.375rem 0.625rem;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  color: #0a3c3c;
  hyphens: none;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__option:hover, .vsbi-members .members__filters .members__filters-row > div .vsbi-select__option[aria-selected=true],
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__option:hover,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__option[aria-selected=true] {
  background: #0a5050;
  color: #ffffff;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__option[aria-selected=true]:hover,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__option[aria-selected=true]:hover {
  cursor: context-menu;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select {
  /* Mobil darf umbrechen */
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-members .members__filters .members__filters-row > div .vsbi-select__list,
  .vsbi-partners .members__filters .members__filters-row > div .vsbi-select__list {
    max-width: unset;
  }
  .vsbi-members .members__filters .members__filters-row > div .vsbi-select__option,
  .vsbi-partners .members__filters .members__filters-row > div .vsbi-select__option {
    white-space: normal;
    text-overflow: clip;
  }
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select {
  /* ============================
  Disabled-Zustände der Filter
  ============================ */
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select.is-disabled,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select.is-disabled {
  pointer-events: none;
  color: rgba(255, 255, 255, 0.85);
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__button.is-disabled,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(15%);
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select.is-disabled .vsbi-select__list,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select.is-disabled .vsbi-select__list {
  display: none !important;
  visibility: hidden;
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select {
  /* Optional: Fokusrahmen unterdrücken, wenn disabled */
}
.vsbi-members .members__filters .members__filters-row > div .vsbi-select__button.is-disabled:focus, .vsbi-members .members__filters .members__filters-row > div .vsbi-select__button.is-disabled:focus-visible, .vsbi-members .members__filters .members__filters-row > div .vsbi-select__button.is-disabled:hover,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button.is-disabled:focus,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button.is-disabled:focus-visible,
.vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button.is-disabled:hover {
  outline: none;
  box-shadow: none;
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-members .members__filters .members__filters-row,
  .vsbi-partners .members__filters .members__filters-row {
    grid-template-columns: auto;
    grid-template-rows: repeat(3, 1fr);
    gap: 0;
    width: 100%;
  }
  .vsbi-members .members__filters .members__filters-row > div,
  .vsbi-partners .members__filters .members__filters-row > div {
    justify-content: stretch;
  }
  .vsbi-members .members__filters .members__filters-row > div .vsbi-select,
  .vsbi-partners .members__filters .members__filters-row > div .vsbi-select {
    width: 100%;
  }
  .vsbi-members .members__filters .members__filters-row > div .vsbi-select__button,
  .vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button {
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid #ffffff;
    display: grid;
    grid-template-columns: auto 1rem;
    outline: none !important;
    box-shadow: none !important;
  }
  .vsbi-members .members__filters .members__filters-row > div .vsbi-select__button:active,
  .vsbi-partners .members__filters .members__filters-row > div .vsbi-select__button:active {
    transform: translateY(0);
  }
  .vsbi-members .members__filters .members__filters-row > div .vsbi-select .vsbi-select__list,
  .vsbi-partners .members__filters .members__filters-row > div .vsbi-select .vsbi-select__list {
    top: 100%;
    border-radius: 0 0 0.5rem 0.5rem;
    border: 0;
  }
  .vsbi-members .members__filters .members__filters-row > div:first-of-type .vsbi-select__button,
  .vsbi-partners .members__filters .members__filters-row > div:first-of-type .vsbi-select__button {
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .vsbi-members .members__filters .members__filters-row > div:last-of-type .vsbi-select__button,
  .vsbi-partners .members__filters .members__filters-row > div:last-of-type .vsbi-select__button {
    border-radius: 0 0 0.5rem 0.5rem;
    border-bottom: none;
  }
  .vsbi-members .members__filters .members__filters-row > div:last-of-type .vsbi-select__button[aria-expanded=true],
  .vsbi-partners .members__filters .members__filters-row > div:last-of-type .vsbi-select__button[aria-expanded=true] {
    border-radius: 0;
  }
}
.vsbi-members .members__filters,
.vsbi-partners .members__filters {
  /* No-JS Buttons ausblenden (JS-UX) */
}
.vsbi-members .members__filters .members__apply,
.vsbi-members .members__filters .members__reset,
.vsbi-partners .members__filters .members__apply,
.vsbi-partners .members__filters .members__reset {
  display: none;
}
.vsbi-members .members__filters noscript .members__apply,
.vsbi-members .members__filters noscript .members__reset,
.vsbi-partners .members__filters noscript .members__apply,
.vsbi-partners .members__filters noscript .members__reset {
  display: inline-block;
  justify-self: start;
  cursor: pointer;
}
.vsbi-members,
.vsbi-partners {
  /* Summary-Chips: gewählte Optionen unter der Filterleiste */
}
.vsbi-members .members__summary,
.vsbi-partners .members__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
.vsbi-members .members__summary .filter-chip,
.vsbi-partners .members__summary .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: #0a5050;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
}
.vsbi-members .members__summary .filter-chip__label,
.vsbi-partners .members__summary .filter-chip__label {
  opacity: 0.75;
  line-height: 1;
}
.vsbi-members .members__summary .filter-chip__value,
.vsbi-partners .members__summary .filter-chip__value {
  font-weight: 600;
  line-height: 1;
}
.vsbi-members .members__summary .filter-chip__clear,
.vsbi-partners .members__summary .filter-chip__clear {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  text-align: center;
  line-height: 18px;
  font-weight: 700;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.vsbi-members .members__summary .filter-chip__clear:hover,
.vsbi-partners .members__summary .filter-chip__clear:hover {
  background: rgba(0, 0, 0, 0.18);
}
.vsbi-members .members__meta,
.vsbi-partners .members__meta {
  display: none;
}

[data-anchor=members],
#members {
  /* passe den Offset an deine Header-Höhe an */
  scroll-margin-top: var(--sticky-offset, 0px);
}

/* =========================================================
   Mitgliederkarte – Komponente
   (wiederverwendbar: Section & Split-Slot)
   ========================================================= */
.members-map {
  width: 100%;
  position: relative;
}
.members-map svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: clamp(960px, 75vw, 1080px);
  margin-inline: auto;
}
.members-map svg path,
.members-map svg text {
  transition: fill 0.5s ease, stroke 0.5s ease;
}
.members-map svg g {
  transition: transform 120ms ease-out;
}
.members-map svg g.umriss {
  display: none;
}
.members-map svg g path {
  transition: fill 160ms ease-out;
}
.members-map svg g path.color-primary {
  fill: #0a5050;
}
.members-map svg g path.color-primary-light {
  fill: #0a7c7a;
}
.members-map svg g path.color-primary-dark {
  fill: #0a3c3c;
}
.members-map svg g path.color-secondary-light {
  fill: #0aa582;
}
.members-map svg g text {
  fill: #ffffff;
  pointer-events: none;
  transition: fill 160ms ease-out;
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
}
.members-map svg g text.size-11 {
  font-size: 0.7rem;
}
.members-map svg g text.size-14 {
  font-size: 0.875rem;
}
.members-map svg g text.size-16 {
  font-size: 1rem;
}
.members-map svg g text.size-18 {
  font-size: 1.125rem;
}
.members-map svg g text.size-20 {
  font-size: 1.25rem;
}
.members-map svg g text.size-23 {
  font-size: 1.4rem;
}
.members-map svg g text.size-24 {
  font-size: 1.5rem;
}
.members-map svg g text.size-25 {
  font-size: 1.6rem;
}
.members-map svg a {
  cursor: pointer;
  outline: none;
  text-decoration: none;
}
.members-map svg a:hover g path, .members-map svg a:focus g path, .members-map svg a:focus-visible g path {
  fill: #ffffff;
  stroke: #0a3c3c;
  stroke-width: 1;
}
.members-map svg a:hover g text, .members-map svg a:focus g text, .members-map svg a:focus-visible g text {
  fill: #0a3c3c;
}
.members-map svg a:focus-visible {
  outline: none;
}
.members-map__title {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.25rem, 3.25vw, 1.5rem);
  color: #0a5050;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .members-map__title {
    font-size: clamp(1.25rem, 3.25vw, 1.5rem);
  }
}
.members-map__title {
  margin-bottom: 1rem;
}
.members-map .members-map__overlay-link {
  display: none;
}
@media (max-width: 540px) {
  .members-map {
    cursor: pointer;
  }
  .members-map .members-map__overlay-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
  }
  .members-map .members-map__overlay-link:focus-within {
    outline: none;
  }
  .members-map {
    /* Einzelne SVG-Regionen deaktivieren */
  }
  .members-map svg a {
    pointer-events: none;
  }
}

.vsbi-split.has-map[class*=bg--primary] svg, .vsbi-split.has-map[class*=bg--secondary] svg,
.vsbi-members-map[class*=bg--primary] svg,
.vsbi-members-map[class*=bg--secondary] svg {
  filter: drop-shadow(0 0 5px rgb(255, 255, 255));
}
.vsbi-split.has-map[class*=bg--primary] svg g.umriss, .vsbi-split.has-map[class*=bg--secondary] svg g.umriss,
.vsbi-members-map[class*=bg--primary] svg g.umriss,
.vsbi-members-map[class*=bg--secondary] svg g.umriss {
  display: inline;
  fill: #ffffff;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 5;
}

/* =========================================================
   Mitgliederkarte – Section-Wrapper
   (Hintergrund, Headline, Container)
   ========================================================= */
.section.vsbi-members-map {
  position: relative;
}
.section.vsbi-members-map .section__headline {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .section.vsbi-members-map .section__headline {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}
.section.vsbi-members-map .section__headline {
  hyphens: auto;
  text-align: center;
  margin-bottom: 3rem;
}
.section.vsbi-members-map .container {
  max-width: 1440px;
  margin: 0 auto;
}

/* =========================================================
   Split-Layout – Anpassung
   ========================================================= */
.vsbi-split.has-map .vsbi-split__col--content {
  text-align: left;
}
.vsbi-split.has-map .vsbi-split__col--media .members-map {
  margin: 0;
}
.vsbi-split.has-map .vsbi-split__col--media .members-map svg {
  max-width: clamp(720px, 55vw, 760px);
  margin-inline: auto;
}

/* ===========================================================
   VSBI – Projekte (Section + Grid + Cards)
   - Notch-Mechanik wie bei .vsbi-infoblock
   - Projekte: eigenständiges Grid (3 -> 2 -> 1)
   - Karten: Logo -> Titel -> Kurztext (180 Zeichen via PHP)
   - KEIN Clamp: Text soll NICHT abgeschnitten werden
=========================================================== */
.vsbi-projects {
  position: relative;
  overflow: hidden;
  --project-card-title: #0a5050;
  --project-card-title-hover: #06856c;
  --project-card-body: #0a3c3c;
  /* Notch-Mechanik: nutzt deine globale CSS-Var */
  --notch-h: var(--vsbi-notch-h);
}
.vsbi-projects[class*=white] .project-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.vsbi-projects[class*=primary] {
  --project-card-title: #06856c;
  --project-card-title-hover: #0aa582;
}
.vsbi-projects[class*=primary] .project-card {
  box-shadow: 0 0px 6px rgba(255, 255, 255, 0.25);
}
.vsbi-projects[class*=secondary] {
  --project-card-title-hover: #0a5050;
}
.vsbi-projects {
  /* Nur wenn im Flex-Block die Notch aktiviert ist */
}
.vsbi-projects.has-notch {
  margin-top: calc(-1 * var(--notch-h));
}
.vsbi-projects.has-notch {
  --notch-w: 1.25rem;
  --notch-h: var(--vsbi-notch-h);
  clip-path: polygon(0 0, calc(50% - var(--notch-w)) 0, 50% var(--notch-h), calc(50% + var(--notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 480px) {
  .vsbi-projects.has-notch {
    --notch-w: 10px;
    --notch-h: 16px;
  }
}
.vsbi-projects {
  /* Container-Padding dezent, mobil schmaler */
}
.vsbi-projects .container {
  padding: 0 clamp(1rem, 3vw, 2rem);
}
.vsbi-projects {
  /* Section-Headline */
}
.vsbi-projects .projects__headline {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .vsbi-projects .projects__headline {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}
.vsbi-projects .projects__headline {
  text-align: center;
  margin-bottom: 3rem;
}
.vsbi-projects {
  /* ==========================================
      GRID: 4 -> 3 -> 2 -> 1 (nur für Projekte)
   ========================================== */
}
.vsbi-projects .projects__grid {
  display: grid;
  grid-auto-rows: 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: calc(120em - 1px)) {
  .vsbi-projects .projects__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: calc(80em - 1px)) {
  .vsbi-projects .projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-projects .projects__grid {
    grid-template-columns: 1fr;
  }
}
.vsbi-projects .projects__grid > li {
  list-style: none;
  display: flex;
  min-width: 0;
  align-items: self-start;
}
.vsbi-projects .projects__empty {
  text-align: center;
  font-family: "PT Sans";
  font-weight: 400;
  font-style: italic;
  color: var(--section-text-color, #0a3c3c);
  margin-bottom: 0;
}
.vsbi-projects {
  /* ==========================================
      CARD
   ========================================== */
}
.vsbi-projects .project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 0.75rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.125);
  /* Vollflächiger Trigger (gesamte Karte klickbar) */
}
.vsbi-projects .project-card__trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  text-indent: -9999px;
  cursor: pointer;
}
.vsbi-projects .project-card__trigger:focus-visible {
  outline: 3px solid rgb(10.4028776978, 230.5971223022, 187.2517985612);
  outline-offset: 2px;
}
.vsbi-projects .project-card {
  /* ---------- MEDIA ---------- */
}
.vsbi-projects .project-card__media {
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.4vw, 1.25rem);
  background: #ffffff;
  transition: 0.5s ease-in-out transform;
  min-height: clamp(120px, 22vw, 150px);
}
.vsbi-projects .project-card__media img, .vsbi-projects .project-card__media svg, .vsbi-projects .project-card__logo {
  display: block;
  max-width: 80%;
  height: auto;
  max-height: clamp(46px, 10vw, 96px);
  -o-object-fit: contain;
     object-fit: contain;
  transition: 0.5s ease transform;
}
.vsbi-projects .project-card__logo--fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(46px, 10vw, 96px);
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  color: #ffffff;
  background: #0a3c3c;
  border-radius: 0.25rem;
}
.vsbi-projects .project-card {
  /* ---------- BODY (Leiste + Text) ---------- */
}
.vsbi-projects .project-card__body {
  background-color: var(--project-card-body);
  color: #ffffff;
  display: grid;
  gap: 0.5rem;
}
.vsbi-projects .project-card {
  /* Titel – ohne Clamp! (nicht abschneiden) */
}
.vsbi-projects .project-card__title {
  background-color: var(--project-card-title);
  padding: 0.5rem;
  margin: 0;
  transition: 0.25s ease-in-out all;
  font-family: "EB Garamond";
  font-weight: 400;
  font-style: normal;
  font-size: 1.75rem;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
}
.vsbi-projects .project-card {
  /* Kurztext – ohne Clamp! (nicht abschneiden) */
}
.vsbi-projects .project-card__excerpt {
  padding: clamp(0.5rem, 1.2vw, 0.75rem) clamp(0.75rem, 1.5vw, 1.5rem) clamp(0.75rem, 1.5vw, 1rem);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.95;
  transition: 0.5s ease-in-out all;
  word-break: break-word;
  hyphens: auto;
}
.vsbi-projects .project-card__excerpt a {
  text-decoration: none;
}
.vsbi-projects .project-card__excerpt a:focus, .vsbi-projects .project-card__excerpt a:focus-within {
  outline: none;
}
.vsbi-projects .project-card:focus .project-card__title, .vsbi-projects .project-card:focus-visible .project-card__title, .vsbi-projects .project-card:hover .project-card__title {
  background-color: var(--project-card-title-hover);
  transition: 0.25s ease-in-out all;
}
.vsbi-projects .project-card:focus, .vsbi-projects .project-card:focus-visible, .vsbi-projects .project-card:hover {
  /* Hover-Effekt wie bei Members */
}
.vsbi-projects .project-card:focus .project-card__media img,
.vsbi-projects .project-card:focus .project-card__media svg, .vsbi-projects .project-card:focus-visible .project-card__media img,
.vsbi-projects .project-card:focus-visible .project-card__media svg, .vsbi-projects .project-card:hover .project-card__media img,
.vsbi-projects .project-card:hover .project-card__media svg {
  transform: scale(1.06);
  transition: 0.5s ease-in-out transform;
}
.vsbi-projects .project-card:focus .project-card__excerpt, .vsbi-projects .project-card:focus-visible .project-card__excerpt, .vsbi-projects .project-card:hover .project-card__excerpt {
  opacity: 1;
  transition: 0.5s ease-in-out all;
}
.vsbi-projects .project-card {
  /* Status-Modifier: optional unterschiedliche Grünnuancen */
}
.vsbi-projects .project-card.is-current .vsbi-projects .project-card__body {
  background-color: #0a5050;
}
.vsbi-projects .project-card.is-finished .vsbi-projects .project-card__body {
  background-color: #0a3c3c;
}

.introfeld.search .container {
  text-align: center;
}
.introfeld.search h2 {
  color: #0a5050;
  margin: 0 0 0.25rem;
}
.introfeld.search p {
  color: #0a3c3c;
  margin: 0 auto;
  max-width: 60ch;
}

/* Ergebnisliste */
.search-results__grid {
  --gap: 1.25rem;
  --cols: 1;
  --item: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
}
@media (min-width: 48em) {
  .search-results__grid {
    --cols: 2;
  }
}
@media (min-width: 80em) {
  .search-results__grid {
    --cols: 3;
  }
}
@media (min-width: 120em) {
  .search-results__grid {
    --cols: 4;
  }
}
.search-results__grid:has(.search-result-card:nth-child(4)), .search-results__grid:has(.search-result-card):not(:has(.search-result-card:nth-child(2))) {
  justify-content: flex-start;
}

.search-result-card {
  box-sizing: border-box;
  flex: 0 0 var(--item);
  max-width: var(--item);
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.125);
  border: none;
  transition: 0.125s ease-in-out all;
  margin-bottom: 0;
}
.search-result-card a {
  display: inline-block;
  padding: 1rem 1.25rem;
  color: inherit;
  text-decoration: none;
  width: 100%;
}
.search-result-card a h3.entry-title {
  margin: 0 0 0.375rem;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: #0a5050;
  line-height: 1.25;
  padding: 0;
  margin: 0;
}
.search-result-card a h3.entry-title span {
  font-family: "EB Garamond";
  font-weight: 500;
  font-style: normal;
  font-size: 0.75em;
}
.search-result-card a p.entry-subline {
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  color: #06856c;
  padding: 0;
  margin: 0;
}
.search-result-card a .entry-summary {
  color: #0a3c3c;
  font-size: 0.975rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}
.search-result-card:hover, .search-result-card:focus {
  background-color: #0a5050;
  transition: 0.125s ease-in-out all;
}
.search-result-card:hover a h3.entry-title,
.search-result-card:hover a p.entry-subline,
.search-result-card:hover a .entry-summary, .search-result-card:focus a h3.entry-title,
.search-result-card:focus a p.entry-subline,
.search-result-card:focus a .entry-summary {
  color: #ffffff;
}

/* Pagination unter dem Grid (zentriert, dezent) */
.nav-links {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.nav-links a,
.nav-links span {
  font-size: 0.95rem;
  color: #0a5050;
}

/* Split Section (Bild + Inhalt) – exakte 50% für die Medienspalte */
.vsbi-split {
  /* Basis-Padding unten (deins) als Variable kapseln */
  --split-decor-color: #0aa582;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}
.vsbi-split[class*=secondary] {
  --split-decor-color: #0a5050;
}
.vsbi-split {
  /* Wenn ein .vsbi-split__decor vorhanden ist, addieren wir dessen Top-Offset
      (hier 1rem) und ggf. einen kleinen Rotationspuffer (.25rem). */
}
.vsbi-split:has(.vsbi-split__decor) {
  --decor-extra: 0.375rem;
  --decor-rot-pad: .25rem;
  --padding-bottom: calc(var(--section-pad-y) + var(--decor-extra) + var(--decor-rot-pad));
  padding-bottom: var(--padding-bottom);
  padding-top: var(--section-pad-y);
}
.vsbi-split:has(.vsbi-split__decor):has(+ .vsbi-join.has-notch), .vsbi-split:has(.vsbi-split__decor):has(+ .has-notch) {
  padding-bottom: calc(var(--padding-bottom) + var(--vsbi-notch-h));
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split:has(.vsbi-split__decor) {
    padding-bottom: var(--section-pad-y);
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split__inner {
    gap: var(--padding-bottom);
  }
  .vsbi-split:has(.vsbi-split__decor):has(+ .vsbi-join.has-notch), .vsbi-split:has(.vsbi-split__decor):has(+ .has-notch) {
    padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
  }
  .vsbi-split:has(.vsbi-split__decor):has(+ .vsbi-join.has-notch) .vsbi-split__inner, .vsbi-split:has(.vsbi-split__decor):has(+ .has-notch) .vsbi-split__inner {
    gap: calc(var(--section-pad-y) + var(--decor-extra));
  }
}
@media (min-width: 64em) {
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split {
    padding-top: var(--section-pad-y);
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--primary + .vsbi-split.bg--primary {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--primary-dark + .vsbi-split.bg--primary-dark {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--secondary + .vsbi-split.bg--secondary {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--secondary-light + .vsbi-split.bg--secondary-light {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--gray + .vsbi-split.bg--gray {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--white + .vsbi-split.bg--white {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split {
    padding-top: var(--section-pad-y);
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--primary + .vsbi-split.bg--primary {
    padding-top: 2rem !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--primary-dark + .vsbi-split.bg--primary-dark {
    padding-top: 2rem !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--secondary + .vsbi-split.bg--secondary {
    padding-top: 2rem !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--secondary-light + .vsbi-split.bg--secondary-light {
    padding-top: 2rem !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--gray + .vsbi-split.bg--gray {
    padding-top: 2rem !important;
  }
  .vsbi-split:has(.vsbi-split__decor) .vsbi-split.bg--white + .vsbi-split.bg--white {
    padding-top: 2rem !important;
  }
}
.vsbi-split:not(:has(.vsbi-split__decor)) {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}
.vsbi-split:not(:has(.vsbi-split__decor)):has(+ .vsbi-join.has-notch), .vsbi-split:not(:has(.vsbi-split__decor)):has(+ .has-notch) {
  padding-bottom: calc(var(--section-pad-y) + var(--vsbi-notch-h));
}
@media (min-width: 64em) {
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split {
    padding-top: var(--section-pad-y);
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--primary + .vsbi-split.bg--primary {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--primary-dark + .vsbi-split.bg--primary-dark {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--secondary + .vsbi-split.bg--secondary {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--secondary-light + .vsbi-split.bg--secondary-light {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--gray + .vsbi-split.bg--gray {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--white + .vsbi-split.bg--white {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split {
    padding-top: var(--section-pad-y);
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--primary + .vsbi-split.bg--primary {
    padding-top: 2rem !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--primary-dark + .vsbi-split.bg--primary-dark {
    padding-top: 2rem !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--secondary + .vsbi-split.bg--secondary {
    padding-top: 2rem !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--secondary-light + .vsbi-split.bg--secondary-light {
    padding-top: 2rem !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--gray + .vsbi-split.bg--gray {
    padding-top: 2rem !important;
  }
  .vsbi-split:not(:has(.vsbi-split__decor)) .vsbi-split.bg--white + .vsbi-split.bg--white {
    padding-top: 2rem !important;
  }
}
.vsbi-split {
  /* flache Deklarationen zuerst (Sass 2.0 sicher) */
  --gap: clamp(2rem, 4.5vw, 4rem);
  overflow-x: hidden;
  padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
  padding-left: 0;
  padding-right: 0;
  /* Medien-Spalte ist Bezugspunkt */
}
.vsbi-split__col--media {
  position: relative;
}
.vsbi-split {
  /* Das dekorative Div hinter dem Bild */
}
.vsbi-split__decor {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--split-decor-color);
  border-radius: 0.75rem;
  bottom: 0;
  height: 95%;
  width: 102%;
  transform: rotate(2.75deg);
  top: 1rem;
}
.vsbi-split:has(.vsbi-split__decor) .vsbi-split__col--media {
  padding-top: 1rem;
}
.vsbi-split {
  /* Ausrichtung: an „innerer“ Bildkante andocken */
}
.vsbi-split.image-left .vsbi-split__decor {
  left: -1.75%;
}
.vsbi-split.image-right .vsbi-split__decor {
  right: -2%;
}
.vsbi-split {
  /* Basis-Grid: wir arbeiten mit Areas für zuverlässiges Swapping */
}
.vsbi-split__inner {
  display: grid;
  gap: var(--gap);
  align-items: center;
  grid-template-areas: "media content";
}
.vsbi-split {
  /* Spalten: jeweils eine Area zuweisen */
}
.vsbi-split__col {
  min-width: 0;
  /* verhindert „Aufspreizen“ */
}
.vsbi-split__col--media {
  grid-area: media;
  position: relative;
  z-index: 1;
}
.vsbi-split__col--content {
  grid-area: content;
}
.vsbi-split {
  /* Figure / Bild */
}
.vsbi-split__figure {
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #d4dfe7;
}
.vsbi-split__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(250px, 35vw, 400px);
  -o-object-fit: cover;
     object-fit: cover;
}
.vsbi-split.has-termins {
  text-align: left;
  padding: var(--gap) 0;
}
.vsbi-split.has-termins .vsbi-split__col--media {
  padding: 0;
}
.vsbi-split.has-termins .vsbi-slider {
  --ppv: 2;
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split.has-termins .vsbi-split__inner {
    padding-left: var(--gap);
    padding-right: var(--gap);
    grid-template-areas: "content" "media" !important;
  }
  .vsbi-split.has-termins .vsbi-split__inner > div,
  .vsbi-split.has-termins .vsbi-split__inner div.content_block {
    padding: 0;
    margin: 0;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-split.has-termins .vsbi-slider {
    --ppv: 1;
  }
  .vsbi-split.has-termins .event-card {
    min-height: unset;
  }
  .vsbi-split.has-termins .event-card__top {
    min-height: 160px;
  }
  .vsbi-split.has-termins .event-card__top .event-card__title {
    font-size: clamp(1.1rem, 6vw, 1.375rem);
  }
  .vsbi-split.has-termins .event-card__footer {
    min-height: 80px;
  }
}
.vsbi-split {
  /* Alias: visual-* verhält sich wie image-* */
}
.vsbi-split.visual-left .vsbi-split__inner {
  grid-template-areas: "media content";
  grid-template-columns: 50% 1fr;
}
@media (min-width: 64em) {
  .vsbi-split.visual-left .vsbi-split__inner .content_block {
    margin-right: var(--gap);
  }
  .vsbi-split.visual-left .vsbi-split__inner .vsbi-split__col--media {
    margin-left: var(--gap);
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split.visual-left .vsbi-split__inner .content_block {
    margin-left: var(--gap);
  }
  .vsbi-split.visual-left .vsbi-split__inner .vsbi-split__col--media {
    width: calc(100% - var(--gap));
    margin-left: var(--gap);
  }
  .vsbi-split.visual-left .vsbi-split__inner .vsbi-split__col--media .vsbi-split__figure {
    border-radius: var(--radius) 0 0 var(--radius);
  }
}
.vsbi-split.visual-right .vsbi-split__inner {
  grid-template-areas: "content media";
  grid-template-columns: 1fr 50%;
}
@media (min-width: 64em) {
  .vsbi-split.visual-right .vsbi-split__inner .content_block {
    margin-left: var(--gap);
  }
  .vsbi-split.visual-right .vsbi-split__inner .vsbi-split__col--media {
    margin-right: var(--gap);
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split.visual-right .vsbi-split__inner .content_block {
    margin-right: var(--gap);
  }
  .vsbi-split.visual-right .vsbi-split__inner .vsbi-split__col--media {
    width: calc(100% - var(--gap));
  }
  .vsbi-split.visual-right .vsbi-split__inner .vsbi-split__col--media .vsbi-split__figure {
    border-radius: 0 var(--radius) var(--radius) 0;
  }
}
.vsbi-split {
  /* Content-„Containergefühl“: seitliches Padding nur am Textspalten-Container */
}
.vsbi-split__col--content {
  display: flex;
  /* Innenabstand links/rechts: du hast --section-pad-x global definiert */
  padding-inline: var(--section-pad-x);
}
.vsbi-split {
  /* Typo */
}
.vsbi-split__title {
  margin: 0 0 0.75rem 0;
  font-family: "EB Garamond";
  font-weight: 500;
  font-style: normal;
  color: var(--section-title-color);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-split__title {
    hyphens: auto;
  }
}
.vsbi-split__text {
  color: var(--section-text-color);
}
.vsbi-split__text p {
  margin: 0 0 clamp(0.625rem, 1.2vw, 0.875rem) 0;
}
.vsbi-split__text strong {
  font-weight: 700;
}
.vsbi-split__lead {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--section-lead-color);
}
.vsbi-split__actions {
  margin-top: 1.25rem;
}
.vsbi-split {
  /* ---------- Alignment-Varianten ---------- */
  /* Bild links: 50% | Gap | Content */
}
.vsbi-split.image-left .vsbi-split__inner {
  grid-template-areas: "media content";
  grid-template-columns: 50% 1fr;
  /* exakte Breite für die Medien-Spalte */
}
.vsbi-split.image-left .vsbi-split__col--content {
  justify-content: start;
}
.vsbi-split.image-left .vsbi-split__col--content .content_block {
  margin-right: var(--gap);
}
.vsbi-split.image-left {
  /* Bild bündig am Außenrand: keine negative Margins nötig,
  denn die Spalte selbst ist 50% und liegt links. */
  /* (Content hat sein seitliches Padding via padding-inline) */
}
.vsbi-split.image-left .vsbi-split__col--media figure {
  border-radius: 0 0.75rem 0.75rem 0;
}
.vsbi-split {
  /* Bild rechts: Content | Gap | 50% */
}
.vsbi-split.image-right .vsbi-split__inner {
  grid-template-areas: "content media";
  grid-template-columns: 1fr 50%;
  /* exakte Breite rechts */
}
.vsbi-split.image-right .vsbi-split__col--content {
  justify-content: end;
}
.vsbi-split.image-right .vsbi-split__col--content .content_block {
  margin-left: var(--gap);
}
.vsbi-split.image-right {
  /* Bild bündig am Außenrand rechts: ebenfalls ohne Margins,
  die Spalte selbst ist 50% und liegt rechts. */
  /* (Content behält sein padding-inline) */
}
.vsbi-split.image-right .vsbi-split__col--media figure {
  border-radius: 0.75rem 0 0 0.75rem;
}
.vsbi-split {
  /* ---------- Responsive ---------- */
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split .vsbi-split__inner {
    grid-template-areas: "media" "content" !important;
    grid-template-columns: 1fr !important;
  }
  .vsbi-split .vsbi-split__col--media {
    padding-top: 0;
  }
  .vsbi-split {
    /* Mobil: Content-Padding reduzieren (falls gewünscht) */
  }
  .vsbi-split.image-left .vsbi-split__col--content, .vsbi-split.image-right .vsbi-split__col--content {
    padding: 1rem 1.5rem 0;
  }
  .vsbi-split.image-left .vsbi-split__col--content .content_block, .vsbi-split.image-right .vsbi-split__col--content .content_block {
    margin: 0;
  }
  .vsbi-split.image-left {
    padding-right: 2rem;
  }
  .vsbi-split.image-right {
    padding-left: 2rem;
  }
  .vsbi-split.has-map .vsbi-split__inner {
    display: flex;
    flex-direction: column;
  }
  .vsbi-split.has-map .vsbi-split__inner .vsbi-split__col--content {
    order: 1;
  }
  .vsbi-split.has-map .vsbi-split__inner .vsbi-split__col--media {
    order: 2;
    margin: 0;
    padding: 0;
  }
}
.vsbi-split {
  /* Default: große Screens → Aside sichtbar, Inline aus */
}
.vsbi-split .members-map--mobile {
  display: none;
}
.vsbi-split .members-map--aside {
  display: block;
}
@media (max-width: calc(80em - 1px)) {
  .vsbi-split {
    /* Sichtbarkeit: kleiner/ mittlerer Viewport → Inline an, Aside aus */
  }
  .vsbi-split .members-map--mobile {
    display: block;
    margin-block: clamp(1.25rem, 2.5vw, 2rem);
    margin-bottom: 0;
  }
  .vsbi-split .members-map--mobile svg {
    max-width: 720px;
    margin-inline: auto;
    height: auto;
    display: block;
  }
  .vsbi-split .members-map--aside {
    display: none;
  }
  .vsbi-split {
    /* Optional: dezentes Seitenpad für die Section im Map-Modus */
  }
  .vsbi-split.has-map {
    --gap: clamp(2rem, 4.5vw, 4rem);
    padding-left: var(--gap);
    padding-right: var(--gap);
  }
  .vsbi-split.has-map .vsbi-split__inner {
    display: flex !important;
    flex-direction: column;
  }
  .vsbi-split.has-map .vsbi-split__inner .vsbi-split__col--content {
    padding: 0;
  }
  .vsbi-split.has-map .vsbi-split__inner .content_block {
    margin-left: 0;
    display: flex;
    flex-direction: column;
  }
  .vsbi-split.has-map .vsbi-split__inner .content_block h2 {
    order: 1;
  }
  .vsbi-split.has-map .vsbi-split__inner .content_block .vsbi-split__text {
    order: 2;
  }
  .vsbi-split.has-map .vsbi-split__inner .content_block .vsbi-split__actions {
    order: 3;
    text-align: right;
    margin-bottom: 3rem;
  }
  .vsbi-split.has-map .vsbi-split__inner .content_block .members-map {
    order: 4;
  }
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-split.has-map .vsbi-split__inner .content_block .members-map {
    order: 3;
  }
  .vsbi-split.has-map .vsbi-split__inner .content_block .vsbi-split__actions {
    order: 4;
    margin-top: -2.5rem;
    margin-bottom: 0;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-split.has-map .vsbi-split__inner .content_block .vsbi-split__actions {
    text-align: center;
    margin-top: 1rem;
  }
  .vsbi-split.has-map .vsbi-split__inner .content_block .vsbi-split__actions a.btn {
    width: 100%;
  }
  .vsbi-split.has-map .members-map--mobile {
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  }
}

@media (min-width: 64em) {
  .vsbi-split {
    padding-top: var(--section-pad-y);
  }
  .vsbi-split.bg--primary + .vsbi-split.bg--primary {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split.bg--primary-dark + .vsbi-split.bg--primary-dark {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split.bg--secondary + .vsbi-split.bg--secondary {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split.bg--secondary-light + .vsbi-split.bg--secondary-light {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split.bg--gray + .vsbi-split.bg--gray {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
  .vsbi-split.bg--white + .vsbi-split.bg--white {
    padding-top: clamp(1rem, 2vw, 2.5rem) !important;
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-split {
    padding-top: var(--section-pad-y);
  }
  .vsbi-split.bg--primary + .vsbi-split.bg--primary {
    padding-top: 2rem !important;
  }
  .vsbi-split.bg--primary-dark + .vsbi-split.bg--primary-dark {
    padding-top: 2rem !important;
  }
  .vsbi-split.bg--secondary + .vsbi-split.bg--secondary {
    padding-top: 2rem !important;
  }
  .vsbi-split.bg--secondary-light + .vsbi-split.bg--secondary-light {
    padding-top: 2rem !important;
  }
  .vsbi-split.bg--gray + .vsbi-split.bg--gray {
    padding-top: 2rem !important;
  }
  .vsbi-split.bg--white + .vsbi-split.bg--white {
    padding-top: 2rem !important;
  }
}
/* ============================================================
   TEAM SECTION – Cards mit Crossfade & Badge-Foto
   ============================================================ */
.vsbi-team {
  /* zentrale Variablen für diese Sektion */
  --gap: clamp(2rem, 4.5vw, 4rem);
  --media-size: 120px;
  --fade-dur: .6s;
  --fade-ease: cubic-bezier(.22, .61, .36, 1);
  --team-corner-size: 1.5rem;
  --team-corner-distance: calc(var(--team-corner-size) + 1rem);
  --team-corner-color: #0aa582;
  --team-corner-shadow: rgba(0, 0, 0, .08);
  --gap-grid-horizontal: 1rem;
  --gap-grid-vertical: calc(var(--media-size) / 1.5);
}
.vsbi-team .container {
  padding: 0 var(--gap);
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-team .container {
    padding: 0;
  }
}
.vsbi-team h2 {
  text-align: center;
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .vsbi-team h2 {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}
.vsbi-team .team-grid {
  margin-top: calc(var(--media-size) - 1rem);
  display: grid;
  gap: var(--gap-grid-vertical) var(--gap-grid-horizontal);
}
@media (min-width: 160em) {
  .vsbi-team .team-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.vsbi-team .team-grid {
  /* NEU: genau zwischen xxlarge (inkl.) und < xxxlarge */
}
@media (min-width: 120em) and (max-width: calc(160em - 1px)) {
  .vsbi-team .team-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: calc(120em - 1px)) {
  .vsbi-team .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: calc(96em - 1px)) {
  .vsbi-team .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-team .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-team .team-grid {
    grid-template-columns: auto;
  }
}
.vsbi-team .team-grid .team-card {
  position: relative;
  border-radius: 0.75rem 0.75rem 0 0.75rem;
  background: #0a3c3c;
  color: #ffffff;
  /* Foto darf herausragen */
  overflow: visible;
  min-height: 240px;
  padding: 1rem 1rem 1.25rem;
  padding-top: 3.25rem;
  /* Platz unterm Badge */
  isolation: isolate;
  /* Fokus-Effekt (Hover bewusst ohne Translate, da Crossfade übernimmt) */
  transition: box-shadow var(--fade-dur) var(--fade-ease);
}
.vsbi-team .team-grid .team-card:focus-within {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.vsbi-team .team-grid .team-card {
  /* Nur für Mitglied + Ehrenamt */
}
.vsbi-team .team-grid .team-card--type-mitglied, .vsbi-team .team-grid .team-card--type-ehrenamt {
  background: #0a5050;
}
.vsbi-team .team-grid .team-card--type-mitglied::after, .vsbi-team .team-grid .team-card--type-ehrenamt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: var(--team-corner-size) solid var(--team-corner-color);
  border-left: var(--team-corner-size) solid transparent;
  z-index: 5;
  pointer-events: none;
}
.vsbi-team .team-grid .team-card--type-mitglied, .vsbi-team .team-grid .team-card--type-ehrenamt {
  /* ► dezente „Falt“-Schattierung (diagonaler Schatten) */
}
.vsbi-team .team-grid .team-card--type-mitglied::before, .vsbi-team .team-grid .team-card--type-ehrenamt::before {
  content: "";
  position: absolute;
  right: calc(var(--team-corner-size) * 0.15);
  /* leicht nach innen */
  bottom: 0;
  width: 0;
  height: 0;
  /* kleiner dunklerer Keil, der auf der Ecke liegt */
  border-bottom: calc(var(--team-corner-size) * 0.75) solid var(--team-corner-shadow);
  border-left: calc(var(--team-corner-size) * 0.75) solid transparent;
  z-index: 5;
  /* gleich wie ::after, Reihenfolge reicht */
  pointer-events: none;
}
.vsbi-team .team-grid .team-card--type-mitglied, .vsbi-team .team-grid .team-card--type-ehrenamt {
  /* optional: minimaler Hover-Effekt auf die Ecke */
}
.vsbi-team .team-grid .team-card--type-mitglied:hover::after, .vsbi-team .team-grid .team-card--type-mitglied:focus-within::after, .vsbi-team .team-grid .team-card--type-ehrenamt:hover::after, .vsbi-team .team-grid .team-card--type-ehrenamt:focus-within::after {
  filter: brightness(1.03);
}
.vsbi-team .team-grid .team-card--type-vorstand::after, .vsbi-team .team-grid .team-card--type-vorstand::before {
  content: none;
}
.vsbi-team .team-grid .team-card {
  /* ============================================================
  FOTO / AVATAR — schwebende Rundgrafik oben, 50% herausragend
  ============================================================ */
}
.vsbi-team .team-grid .team-card__media {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  /* ~50% außerhalb */
  width: var(--media-size);
  height: var(--media-size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  z-index: 6;
  /* über Front/Hover/Link */
  pointer-events: none;
  /* Klicks weiter auf die Card */
  box-shadow: 0 0 0 0 transparent, 0 2px 6px rgba(0, 0, 0, 0.12);
  /* Overlay nur zeigen, wenn ein echtes Foto vorhanden ist (kein Fallback) */
}
.vsbi-team .team-grid .team-card__media:has(.team-card__photo:not(.team-card__photo--fallback))::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  /* folgt der runden Badge */
  background: #0a5050;
  /* Brand-Primary */
  mix-blend-mode: multiply;
  /* Multiplikations-Tint */
  opacity: 0.1;
  filter: brightness(2.5);
  pointer-events: none;
  transition: opacity var(--fade-dur) var(--fade-ease);
}
.vsbi-team .team-grid .team-card__media .team-card__photo {
  width: var(--media-size);
  height: var(--media-size);
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  /* Grundzustand Foto: grau (leicht abgedunkelt) */
}
.vsbi-team .team-grid .team-card__media .team-card__photo:not(.team-card__photo--fallback) {
  filter: grayscale(100%) brightness(1.2);
  transition: filter var(--fade-dur) var(--fade-ease);
}
.vsbi-team .team-grid .team-card__media .team-card__photo {
  /* Fallback: Initialen mit primary-dark */
}
.vsbi-team .team-grid .team-card__media .team-card__photo.team-card__photo--fallback {
  display: grid;
  place-items: center;
  background: #06856c;
  font-family: "EB Garamond";
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  font-size: 1.625rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  /* Kein Filter auf Initialen */
  filter: none;
}
.vsbi-team .team-grid .team-card__media .team-card__photo {
  /* Motion-Reduction: (optional) Filterwechsel ohne Transition */
}
@media (prefers-reduced-motion: reduce) {
  .vsbi-team .team-grid .team-card__media .team-card__photo {
    transition: none;
  }
}
.vsbi-team .team-grid .team-card {
  /* Hover/Fokus: Foto wird farbig, Overlay blendet aus */
}
.vsbi-team .team-grid .team-card:hover .team-card__media::after, .vsbi-team .team-grid .team-card:focus-within .team-card__media::after {
  opacity: 0;
}
.vsbi-team .team-grid .team-card:hover .team-card__media .team-card__photo:not(.team-card__photo--fallback), .vsbi-team .team-grid .team-card:focus-within .team-card__media .team-card__photo:not(.team-card__photo--fallback) {
  filter: none;
}
.vsbi-team .team-grid .team-card {
  /* Falls Fallback-Initialen aktiv sind, bleibt Hintergrund primary-dark */
}
.vsbi-team .team-grid .team-card:hover .team-card__media .team-card__photo.team-card__photo--fallback, .vsbi-team .team-grid .team-card:focus-within .team-card__media .team-card__photo.team-card__photo--fallback {
  background: #0a5050;
}
.vsbi-team .team-grid .team-card {
  /* Motion-Reduction: Overlay ohne Transition */
}
@media (prefers-reduced-motion: reduce) {
  .vsbi-team .team-grid .team-card .team-card__media::after {
    transition: none;
  }
}
.vsbi-team .team-grid .team-card {
  /* ============================================================
  FRONT + HOVER — übereinander, Crossfade über Opacity
  ============================================================ */
}
.vsbi-team .team-grid .team-card__front, .vsbi-team .team-grid .team-card__hover {
  position: absolute;
  inset: 0;
  padding: 2.75rem 1rem 1.25rem;
  /* Abstand unter dem Badge */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity var(--fade-dur) var(--fade-ease);
  will-change: opacity;
}
.vsbi-team .team-grid .team-card {
  /* FRONT = sichtbar */
}
.vsbi-team .team-grid .team-card__front {
  z-index: 2;
  opacity: 1;
}
.vsbi-team .team-grid .team-card__front .team-card__name {
  margin: 0 0 0.25rem;
  font-family: "EB Garamond";
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  color: #ffffff;
}
.vsbi-team .team-grid .team-card__front .team-card__position {
  margin: 0;
  color: #ffffff;
}
.vsbi-team .team-grid .team-card {
  /* HOVER = unsichtbar, kommt per Crossfade */
}
.vsbi-team .team-grid .team-card__hover {
  z-index: 3;
  background: #06856c;
  border-radius: 0.75rem 0.75rem 0 0.75rem;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
}
.vsbi-team .team-grid .team-card__hover .team-card__company {
  margin: 0 0 0.15rem;
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  hyphens: none;
}
.vsbi-team .team-grid .team-card__hover .team-card__contact {
  margin: 0;
}
.vsbi-team .team-grid .team-card__hover .team-card__contact a {
  color: #ffffff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.vsbi-team .team-grid .team-card {
  /* Standard: Inline-Details verstecken (nur Desktop) */
}
.vsbi-team .team-grid .team-card .team-card__details {
  display: none;
}
.vsbi-team .team-grid .team-card {
  /* ============================================================
  Vollflächiger Link (unter Badge, über Front/Hover)
  ============================================================ */
}
.vsbi-team .team-grid .team-card__link {
  position: absolute;
  inset: 0;
  z-index: 4;
  /* Badge (6) > Link (4) > Hover (3) > Front (2) */
  border-radius: inherit;
}
.vsbi-team .team-grid .team-card__link:focus, .vsbi-team .team-grid .team-card__link:hover {
  outline: none;
}
.vsbi-team .team-grid .team-card {
  /* ============================================================
  Optionale Animation der Foto-Badge (zoomPan)
  ============================================================ */
}
.vsbi-team .team-grid .team-card:hover .vsbi-team .team-grid .team-card__media .team-card__photo, .vsbi-team .team-grid .team-card:focus-within .vsbi-team .team-grid .team-card__media .team-card__photo {
  animation: zoomPan 3.6s ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
  .vsbi-team .team-grid .team-card:hover .vsbi-team .team-grid .team-card__media .team-card__photo, .vsbi-team .team-grid .team-card:focus-within .vsbi-team .team-grid .team-card__media .team-card__photo {
    animation: none !important;
  }
}
.vsbi-team[class*=bg--primary] .team-grid .team-card {
  background-color: #0a3c3c;
}
.vsbi-team[class*=bg--primary] .team-grid .team-card:focus .team-card__media .team-card__photo.team-card__photo--fallback, .vsbi-team[class*=bg--primary] .team-grid .team-card:focus-within .team-card__media .team-card__photo.team-card__photo--fallback, .vsbi-team[class*=bg--primary] .team-grid .team-card:hover .team-card__media .team-card__photo.team-card__photo--fallback {
  background-color: #ffffff;
  color: #0a3c3c;
}
.vsbi-team[class*=bg--primary-dark] .team-grid .team-card {
  background-color: #0a5050;
}
.vsbi-team[class*=bg--secondary] .team-grid .team-card.team-card--type-mitglied .team-card__media .team-card__photo.team-card__photo--fallback {
  background-color: #0a3c3c;
}
.vsbi-team[class*=bg--secondary] .team-grid .team-card .team-card__media .team-card__photo.team-card__photo--fallback {
  background-color: #0a5050;
}
.vsbi-team[class*=bg--secondary] .team-grid .team-card:focus .team-card__hover, .vsbi-team[class*=bg--secondary] .team-grid .team-card:focus-within .team-card__hover, .vsbi-team[class*=bg--secondary] .team-grid .team-card:hover .team-card__hover {
  background-color: #0a3c3c;
}
.vsbi-team[class*=bg--secondary] .team-grid .team-card:focus .team-card__media .team-card__photo.team-card__photo--fallback, .vsbi-team[class*=bg--secondary] .team-grid .team-card:focus-within .team-card__media .team-card__photo.team-card__photo--fallback, .vsbi-team[class*=bg--secondary] .team-grid .team-card:hover .team-card__media .team-card__photo.team-card__photo--fallback {
  background-color: #ffffff;
  color: #0a3c3c;
}
.vsbi-team[class*=bg--secondary] .team-grid .team-card.team-card--type-vorstand:focus .team-card__hover, .vsbi-team[class*=bg--secondary] .team-grid .team-card.team-card--type-vorstand:focus-within .team-card__hover, .vsbi-team[class*=bg--secondary] .team-grid .team-card.team-card--type-vorstand:hover .team-card__hover {
  background-color: #0a5050;
}
.vsbi-team[class*=bg--secondary] .team-grid .team-card.team-card--type-mitglied:focus .team-card__media .team-card__photo.team-card__photo--fallback, .vsbi-team[class*=bg--secondary] .team-grid .team-card.team-card--type-mitglied:focus-within .team-card__media .team-card__photo.team-card__photo--fallback, .vsbi-team[class*=bg--secondary] .team-grid .team-card.team-card--type-mitglied:hover .team-card__media .team-card__photo.team-card__photo--fallback {
  background-color: #ffffff;
  color: #0a3c3c;
}
.vsbi-team[class*=bg--secondary-light] .team-grid .team-card--type-mitglied::after,
.vsbi-team[class*=bg--secondary-light] .vsbi-team .team-grid .team-card--type-ehrenamt::after {
  border-bottom: var(--team-corner-size) solid #0a3c3c;
}
.vsbi-team[class*=bg--secondary-light]:focus .team-grid .team-card--type-mitglied::after,
.vsbi-team[class*=bg--secondary-light]:focus .vsbi-team .team-grid .team-card--type-ehrenamt::after, .vsbi-team[class*=bg--secondary-light]:focus-within .team-grid .team-card--type-mitglied::after,
.vsbi-team[class*=bg--secondary-light]:focus-within .vsbi-team .team-grid .team-card--type-ehrenamt::after, .vsbi-team[class*=bg--secondary-light]:hover .team-grid .team-card--type-mitglied::after,
.vsbi-team[class*=bg--secondary-light]:hover .vsbi-team .team-grid .team-card--type-ehrenamt::after {
  border-bottom: var(--team-corner-size) solid #06856c;
}
.vsbi-team {
  /* ===========================================
  Tablet & darunter: Inline-Details aktiv,
  Hover-Layer & Overlay-Link aus
  =========================================== */
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-team {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-team {
    --media-size: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .vsbi-team .team-grid {
    grid-template-columns: auto;
    gap: var(--gap-grid-horizontal);
  }
  .vsbi-team .team-grid .team-card {
    /* Karte wächst mit Inhalt */
    min-height: calc(var(--media-size) + 2rem);
    padding-top: 1rem;
    /* Vorderseite läuft im Flow */
  }
  .vsbi-team .team-grid .team-card__front {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    padding: 1rem 2rem 1rem calc(var(--media-size) + 2rem);
    align-items: end;
    justify-content: flex-start;
  }
  .vsbi-team .team-grid .team-card__front p {
    text-align: right;
  }
  .vsbi-team .team-grid .team-card {
    /* Inline-Details sichtbar */
  }
  .vsbi-team .team-grid .team-card .team-card__details {
    display: block;
    margin-top: 0.5rem;
  }
  .vsbi-team .team-grid .team-card .team-card__details .team-card__company,
  .vsbi-team .team-grid .team-card .team-card__details .team-card__contact,
  .vsbi-team .team-grid .team-card .team-card__details .team-card__visit {
    margin: 0.25rem 0;
  }
  .vsbi-team .team-grid .team-card {
    /* Rückseite vollständig deaktivieren */
  }
  .vsbi-team .team-grid .team-card__hover {
    display: none !important;
  }
  .vsbi-team .team-grid .team-card {
    /* Badge mittig oben lassen */
  }
  .vsbi-team .team-grid .team-card .team-card__media {
    left: 1rem;
    top: unset;
    bottom: 1rem;
    transform: none;
  }
  .vsbi-team .team-grid .team-card .team-card__media,
  .vsbi-team .team-grid .team-card .team-card__media .team-card__photo {
    width: var(--media-size);
    height: var(--media-size);
  }
  .vsbi-team .team-grid .team-card {
    /* robuste Umbrüche auf kleineren Breiten */
  }
  .vsbi-team .team-grid .team-card .team-card__name,
  .vsbi-team .team-grid .team-card .team-card__company,
  .vsbi-team .team-grid .team-card .team-card__contact,
  .vsbi-team .team-grid .team-card .team-card__contact a {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-decoration: none;
    color: #ffffff;
  }
  .vsbi-team .team-grid .team-card {
    /* dezent kleinere Typo für Platz */
  }
  .vsbi-team .team-grid .team-card .team-card__name {
    font-size: 1.25rem;
  }
  .vsbi-team .team-grid .team-card .team-card__company {
    font-size: 1rem;
  }
  .vsbi-team .team-grid .team-card .team-card__contact {
    font-size: 0.95rem;
  }
  .vsbi-team .team-grid .team-card:focus, .vsbi-team .team-grid .team-card:focus-within, .vsbi-team .team-grid .team-card:hover {
    background: #06856c;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-team {
    --media-size: 90px;
  }
  .vsbi-team .team-grid .team-card__front {
    padding: calc(var(--media-size) + 1.375rem) 0.5rem 0;
    align-items: center;
  }
  .vsbi-team .team-grid .team-card__front p {
    text-align: center;
  }
  .vsbi-team .team-grid .team-card .team-card__media {
    left: 50%;
    top: 1.25rem;
    transform: translate(-50%, 0%);
  }
  .vsbi-team .team-grid .team-card .team-card__media,
  .vsbi-team .team-grid .team-card .team-card__media .team-card__photo {
    width: var(--media-size);
    height: var(--media-size);
  }
}

/* ============================================================
   ROBUSTE CROSSFADE-REGELN (gewinnen in der Cascade)
   – stellen sicher, dass Hover sichtbar wird, auch wenn
     andere Styles (z. B. aus components/cards.scss) existieren
   ============================================================ */
@media (min-width: 37.5em) {
  /* Standard-Zustand */
  .vsbi-team .team-card__front {
    opacity: 1;
  }
  .vsbi-team .team-card__hover {
    opacity: 0;
    pointer-events: none;
  }
  /* Hover/Fokus auf der Card */
  .vsbi-team .team-card:hover .team-card__front,
  .vsbi-team .team-card:focus-within .team-card__front {
    opacity: 0;
  }
  .vsbi-team .team-card:hover .team-card__hover,
  .vsbi-team .team-card:focus-within .team-card__hover {
    opacity: 1;
    pointer-events: auto;
  }
  /* Falls nur der Vollflächen-Link gehovt/fokussiert wird */
  .vsbi-team .team-card .team-card__link:hover ~ .team-card__hover,
  .vsbi-team .team-card .team-card__link:focus-visible ~ .team-card__hover {
    opacity: 1;
    pointer-events: auto;
  }
  .vsbi-team .team-card .team-card__link:hover ~ .team-card__front,
  .vsbi-team .team-card .team-card__link:focus-visible ~ .team-card__front {
    opacity: 0;
  }
}
/* ==========================================
   Terminslider – Kartenlayout
   ========================================== */
.vsbi-termins,
.vsbi-split {
  --radius: 0.75rem;
  --pad: clamp(0.75rem, 1.5vw, 1rem);
  --footer-bg: #06856c;
  --footer-bg-hover: #ffffff;
  --footer-text: #ffffff;
  --footer-text-hover: #06856c;
  --title-color: #ffffff;
  --kicker-color: #ffffff;
  --shadow-a: 0 10px 20px rgba(0, 0, 0, .18);
  --shadow-b: 0 3px 8px rgba(0, 0, 0, .10);
}
.vsbi-termins[class*=secondary],
.vsbi-split[class*=secondary] {
  --footer-bg: #0a5050;
}
.vsbi-termins[class*=white],
.vsbi-split[class*=white] {
  --footer-bg-hover: #0a5050;
  --footer-text-hover: #ffffff;
}
.vsbi-termins .container,
.vsbi-split .container {
  padding: 0;
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-termins .container,
  .vsbi-split .container {
    padding: 0;
  }
}
.vsbi-termins p.events__empty,
.vsbi-split p.events__empty {
  text-align: center;
  font-family: "PT Sans";
  font-weight: 400;
  font-style: italic;
  color: var(--section-text-color, #0a3c3c);
}
.vsbi-termins .event-card,
.vsbi-split .event-card {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  overflow: hidden;
}
.vsbi-termins .event-card::before,
.vsbi-split .event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.25) 60%), var(--event-cover, none);
  background-size: cover;
  background-position: center;
  filter: none;
  z-index: 0;
  transition: 0.25s ease-in-out all;
}
.vsbi-termins .event-card__top,
.vsbi-split .event-card__top {
  position: relative;
  z-index: 1;
  padding: calc(var(--pad) + 0.25rem) var(--pad) 0.5rem var(--pad);
  color: var(--title-color);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  text-align: center;
  gap: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.vsbi-termins .event-card__kicker,
.vsbi-split .event-card__kicker {
  font-family: "Mulish";
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.375rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kicker-color);
  opacity: 0.95;
  min-height: 2rem;
  display: flex;
  align-items: center;
}
.vsbi-termins .event-card__title,
.vsbi-split .event-card__title {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.1rem, 2.8vw, 1.475rem);
  line-height: 1.15;
  margin: 0;
  color: var(--title-color);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  height: 100%;
  transition: 0.5s ease-in-out transform;
}
.vsbi-termins .event-card__footer,
.vsbi-split .event-card__footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 0.75rem var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  transition: 0.5s ease-in-out all;
}
.vsbi-termins .event-card__date,
.vsbi-split .event-card__date {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: block;
}
.vsbi-termins .event-card__meta,
.vsbi-split .event-card__meta {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.975rem, 1.25vw, 1.125rem);
  margin: 0;
  opacity: 0.95;
}
.vsbi-termins .event-card:focus .event-card__footer, .vsbi-termins .event-card:focus-visible .event-card__footer, .vsbi-termins .event-card:hover .event-card__footer,
.vsbi-split .event-card:focus .event-card__footer,
.vsbi-split .event-card:focus-visible .event-card__footer,
.vsbi-split .event-card:hover .event-card__footer {
  transition: 0.5s ease-in-out all;
  background-color: var(--footer-bg-hover);
  color: var(--footer-text-hover);
}
.vsbi-termins .event-card:focus::before, .vsbi-termins .event-card:focus-visible::before, .vsbi-termins .event-card:hover::before,
.vsbi-split .event-card:focus::before,
.vsbi-split .event-card:focus-visible::before,
.vsbi-split .event-card:hover::before {
  transform: scale(1.2);
  transition: 0.5s ease-in-out all;
  filter: brightness(1.1);
}

/* Als eigener Abschnitt – Überschrift-Stil */
.vsbi-termins .vsbi-section__headline {
  margin: 0;
  font-family: "EBGaramond-Regular";
  font-weight: 400;
  font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  color: var(--section-title-color);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .vsbi-termins .vsbi-section__headline {
    font-size: clamp(1.875rem, 3.25vw, 2.375rem);
  }
}
.vsbi-termins .vsbi-section__headline {
  hyphens: auto;
  text-align: center;
  margin-bottom: 3rem;
}

/* Basis für alle Karten mit Overlay-Trigger (Project/Members/Termins) */
.event-card,
.project-card,
.member-card,
.termin-card {
  position: relative;
  /* eigener Kontext */
  z-index: 0;
  /* Basis-Stack */
  /* Vollflächiger Overlay-Trigger garantiert oben */
}
.event-card__trigger,
.project-card__trigger,
.member-card__trigger,
.termin-card__trigger {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 10;
  /* über Body/Media */
  pointer-events: auto;
  /* Sicherheit */
}

/* Sicherheit: Track/List niemals über Items legen */
.vsbi-slider__track,
.vsbi-slider__list {
  position: relative;
  z-index: 0;
}

/* Nur wenn du auf Nummer sicher gehen willst:
   Pfeile über Track/List, aber UNTER Modals/Bubbles etc. */
.vsbi-slider__nav {
  position: relative;
  z-index: 5;
}

/* Grid */
.vsbi-termins {
  --gap: clamp(2rem, 4.5vw, 4rem);
  padding-left: var(--gap);
  padding-right: var(--gap);
}
.vsbi-termins .vsbi-slider {
  --ppv: 7;
}
@media (max-width: calc(160em - 1px)) {
  .vsbi-termins .vsbi-slider {
    --ppv: 6;
  }
}
@media (max-width: calc(120em - 1px)) {
  .vsbi-termins .vsbi-slider {
    --ppv: 5;
  }
}
@media (max-width: calc(96em - 1px)) {
  .vsbi-termins .vsbi-slider {
    --ppv: 4;
  }
}
@media (max-width: calc(80em - 1px)) {
  .vsbi-termins .vsbi-slider {
    --ppv: 3;
  }
}
@media (max-width: calc(64em - 1px)) {
  .vsbi-termins .vsbi-slider {
    --ppv: 2;
  }
  .vsbi-termins .vsbi-slider .event-card__top .event-card__title {
    font-size: clamp(1.2rem, 7vw, 1.5rem);
  }
}
@media (max-width: calc(48em - 1px)) {
  .vsbi-termins .vsbi-slider__nav {
    display: none;
  }
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-termins .vsbi-slider {
    --ppv: 1;
  }
  .vsbi-termins .event-card {
    min-height: unset;
  }
  .vsbi-termins .event-card__top {
    min-height: 160px;
  }
  .vsbi-termins .event-card__top .event-card__title {
    font-size: clamp(1.1rem, 6vw, 1.375rem);
  }
  .vsbi-termins .event-card__footer {
    min-height: 80px;
  }
}

/* Grundgerüst */
.vsbi-timeline {
  position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.vsbi-timeline .timeline__headline {
  font-family: "EB Garamond";
  font-weight: 400;
  font-style: normal;
  color: #0a5050;
  margin: 0 0 clamp(3.5rem, 6vw, 4.5rem) 0;
}
.vsbi-timeline {
  /* Liste */
}
.vsbi-timeline .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  /* mehr Luft unten für Abschluss-Punkt */
  padding: 2rem 0 2.5rem;
  /* falls Eltern-Container overflow: hidden; hat */
  overflow: visible;
  /* Zentrale Achse (Linie + Abschluss-Punkt) */
}
.vsbi-timeline .timeline::before {
  content: "";
  position: absolute;
  top: 0;
  /* Luft für Pfeil oben */
  bottom: 0;
  /* bis ganz unten laufen lassen */
  left: 50%;
  transform: translateX(-50%);
  /* Zeichenbereich für Background-Layer (Linie bleibt 2px) */
  width: 16px;
  /* 2 Background-Layer: Kreis (unten) + Linie (voll) */
  background: radial-gradient(circle 4px at 50% calc(100% - 4px), #0a5050 99%, transparent 100%) no-repeat, linear-gradient(#0a5050, #0a5050) no-repeat;
  /* Layer-Größen (Kreis-Durchmesser, Linienbreite × Höhe) */
  background-size: 8px 8px, 2px 100%;
  /* Positionen (Kreis mittig unten, Linie mittig oben->unten) */
  background-position: 50% 100%, 50% 0;
}
.vsbi-timeline .timeline {
  /* Pfeil nach oben */
}
.vsbi-timeline .timeline::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #0a5050;
}
.vsbi-timeline {
  /* Eintrag = Grid: left | axis | right */
}
.vsbi-timeline .timeline__item {
  position: relative;
  max-width: 1440px;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  /* linke Spalte | Achse | rechte Spalte */
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 3.25vw, 1.75rem) 0;
  margin: 0 auto;
  /* Dot auf der Achse */
}
.vsbi-timeline .timeline__item .timeline__axis {
  position: relative;
  display: grid;
  place-items: center;
}
.vsbi-timeline .timeline__item .timeline__axis .timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #0a5050;
  box-shadow: 0 0 0 2px #ffffff;
  /* optische „Luft“ zum Hintergrund */
}
.vsbi-timeline .timeline__item {
  /* Inhalt + Titel + Text */
}
.vsbi-timeline .timeline__item .timeline__content {
  background: transparent;
  color: #0a3c3c;
}
.vsbi-timeline .timeline__item .timeline__content .timeline__title {
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
  color: #0a5050;
  margin: 0 0 0.35rem 0;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}
.vsbi-timeline .timeline__item .timeline__content .timeline__desc {
  font-family: "Mulish";
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.3em;
  color: #0a3c3c;
}
.vsbi-timeline .timeline__item .timeline__content .timeline__desc p {
  margin-top: 0;
}
.vsbi-timeline .timeline__item {
  /* Year-Badge (rechts oder links) */
}
.vsbi-timeline .timeline__item .timeline__year-badge {
  font-family: "Mulish";
  font-weight: 200;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 1rem 3rem;
  color: #ffffff;
  background: #0a5050;
  border-radius: 0.75rem;
  /* abgerundete Ecken */
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}
.vsbi-timeline .timeline__item {
  /* Standard: Content links, Jahr rechts (odd) */
}
.vsbi-timeline .timeline__item:nth-child(odd) .timeline__side--left {
  order: 1;
  text-align: right;
}
.vsbi-timeline .timeline__item:nth-child(odd) .timeline__axis {
  order: 2;
}
.vsbi-timeline .timeline__item:nth-child(odd) .timeline__side--right {
  order: 3;
  text-align: left;
}
.vsbi-timeline .timeline__item:nth-child(odd) .timeline__year-badge {
  background: #0a3c3c;
}
.vsbi-timeline .timeline__item {
  /* Even: Jahr links, Content rechts */
}
.vsbi-timeline .timeline__item:nth-child(even) .timeline__side--left {
  order: 3;
  text-align: left;
}
.vsbi-timeline .timeline__item:nth-child(even) .timeline__axis {
  order: 2;
}
.vsbi-timeline .timeline__item:nth-child(even) .timeline__side--right {
  order: 1;
  text-align: right;
}
.vsbi-timeline .timeline__item:nth-child(even) .timeline__year-badge {
  background: #0a5050;
}
.vsbi-timeline {
  /* --- SMALL: Achse mittig, alle Jahre links, alle Beschreibungen rechts --- */
}
@media (max-width: calc(37.5em - 1px)) {
  .vsbi-timeline {
    /* Achse mittig lassen */
  }
  .vsbi-timeline ol.timeline {
    padding: 2rem 0.25rem 2.5rem;
  }
  .vsbi-timeline ol.timeline::before, .vsbi-timeline ol.timeline::after {
    left: 6.75rem;
  }
  .vsbi-timeline .timeline__item {
    grid-template-columns: auto 1.5rem 1fr;
    /* Jahr | Achse | Content */
    gap: 0 0.75rem;
    /* Für alle Items identische Reihenfolge (kein Alternieren) */
  }
  .vsbi-timeline .timeline__item:nth-child(odd) .timeline__side--right, .vsbi-timeline .timeline__item:nth-child(even) .timeline__side--right {
    order: 1;
    text-align: right;
  }
  .vsbi-timeline .timeline__item:nth-child(odd), .vsbi-timeline .timeline__item:nth-child(even) {
    /* Jahr links (zum Axis hin) */
  }
  .vsbi-timeline .timeline__item:nth-child(odd) .timeline__axis, .vsbi-timeline .timeline__item:nth-child(even) .timeline__axis {
    order: 2;
  }
  .vsbi-timeline .timeline__item:nth-child(odd), .vsbi-timeline .timeline__item:nth-child(even) {
    /* Achse Mitte */
  }
  .vsbi-timeline .timeline__item:nth-child(odd) .timeline__side--left, .vsbi-timeline .timeline__item:nth-child(even) .timeline__side--left {
    order: 3;
    text-align: left;
  }
  .vsbi-timeline .timeline__item:nth-child(odd), .vsbi-timeline .timeline__item:nth-child(even) {
    /* Content rechts */
  }
  .vsbi-timeline .timeline__item {
    /* Badge kompakter */
  }
  .vsbi-timeline .timeline__item .timeline__year-badge {
    min-width: 80px;
    padding: 0.5rem 0.75rem;
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  }
}
.vsbi-timeline {
  /* --- XSMALL: Achse links, Jahr über Content --- */
}
@media (max-width: calc(30em - 1px)) {
  .vsbi-timeline {
    /* Achse + Pfeil exakt auf 12px (Mitte der 24px-Achsspalte) */
  }
  .vsbi-timeline ol.timeline::before, .vsbi-timeline ol.timeline::after {
    left: 1rem;
  }
  .vsbi-timeline .timeline__item {
    grid-template-columns: 24px 1fr;
    /* Achse | Inhalt */
    gap: 0.75rem 1rem;
    /* Reihenfolge & Layout mobil: Dot links, Badge oben, Content darunter */
  }
  .vsbi-timeline .timeline__item:nth-child(odd) .timeline__axis, .vsbi-timeline .timeline__item:nth-child(even) .timeline__axis {
    order: 1;
  }
  .vsbi-timeline .timeline__item:nth-child(odd) .timeline__side--right, .vsbi-timeline .timeline__item:nth-child(even) .timeline__side--right {
    order: 2;
    text-align: left;
  }
  .vsbi-timeline .timeline__item:nth-child(odd) .timeline__side--left, .vsbi-timeline .timeline__item:nth-child(even) .timeline__side--left {
    order: 3;
    text-align: left;
    width: calc(100vw - 3.75rem);
    padding-left: 2.75rem;
  }
  .vsbi-timeline .timeline__item:nth-child(odd), .vsbi-timeline .timeline__item:nth-child(even) {
    /* Year-Badge */
  }
  .vsbi-timeline .timeline__item .timeline__year-badge {
    margin: 0 0 0.35rem 0;
    /* etwas Abstand vor Content */
    min-width: 120px;
    padding: 0.5rem 0.75rem;
  }
}
.vsbi-timeline {
  /* Dark Theme: Farben konsistent für Linie + Punkt + Pfeil */
}
.vsbi-timeline.section--theme-dark .timeline__headline,
.vsbi-timeline.section--theme-dark .timeline__title {
  color: #ffffff;
}
.vsbi-timeline.section--theme-dark {
  /* Achse mit Layern (Linie + Abschluss-Punkt) in Sekundärfarbe */
}
.vsbi-timeline.section--theme-dark .timeline::before {
  background: radial-gradient(circle 4px at 50% calc(100% - 4px), #06856c 99%, transparent 100%) no-repeat, linear-gradient(#06856c, #06856c) no-repeat;
  background-size: 8px 8px, 2px 100%;
  background-position: 50% 100%, 50% 0;
}
.vsbi-timeline.section--theme-dark .timeline::after {
  border-bottom-color: #06856c;
}
.vsbi-timeline.section--theme-dark .timeline__axis .timeline__dot {
  background: rgb(8.5428571429, 51.2571428571, 51.2571428571);
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgb(8.5428571429, 51.2571428571, 51.2571428571);
}
.vsbi-timeline.section--theme-dark .timeline__content {
  color: #ffffff;
}
.vsbi-timeline.section--theme-dark .timeline__year-badge {
  background: #06856c;
  color: #ffffff;
}
.vsbi-timeline.bg--secondary-light {
  /* Textfarben auf dunkel */
}
.vsbi-timeline.bg--secondary-light .timeline__headline {
  color: rgb(7.9, 47.4, 47.4);
}
.vsbi-timeline.bg--secondary-light .timeline__item .timeline__content .timeline__title,
.vsbi-timeline.bg--secondary-light .timeline__item .timeline__content .timeline__desc {
  color: rgb(7.9, 47.4, 47.4);
}
.vsbi-timeline.bg--secondary-light {
  /* Kleine Zwischen-Dots: weißer Rand + Halo in Sekundär-Light */
}
.vsbi-timeline.bg--secondary-light .timeline__axis .timeline__dot {
  border: 2px solid rgb(7.9, 47.4, 47.4);
  /* weißer Kreisrand */
  background: #0aa582;
  /* „Innen“ = Section-Hintergrund */
  box-shadow: 0 0 0 2px #0aa582;
  /* Halo gegen die Achse/Umgebung */
}
.vsbi-timeline.bg--secondary-light ol.timeline::before {
  background: radial-gradient(circle 4px at 50% calc(100% - 4px), rgb(7.9, 47.4, 47.4) 99%, transparent 100%) no-repeat, linear-gradient(rgb(7.9, 47.4, 47.4), rgb(7.9, 47.4, 47.4)) no-repeat;
  background-size: 8px 8px, 2px 100%;
  background-position: 50% 100%, 50% 0;
}
.vsbi-timeline.bg--secondary-light ol.timeline::after {
  border-bottom-color: rgb(7.9, 47.4, 47.4);
}
.vsbi-timeline {
  /* ===== Dark section variants: white text + white axis ===== */
}
.vsbi-timeline.bg--secondary, .vsbi-timeline[class*=bg--primary] {
  /* Texte hell */
}
.vsbi-timeline.bg--secondary .timeline__headline, .vsbi-timeline[class*=bg--primary] .timeline__headline {
  color: #ffffff;
}
.vsbi-timeline.bg--secondary .timeline__item .timeline__content .timeline__title,
.vsbi-timeline.bg--secondary .timeline__item .timeline__content .timeline__desc, .vsbi-timeline[class*=bg--primary] .timeline__item .timeline__content .timeline__title,
.vsbi-timeline[class*=bg--primary] .timeline__item .timeline__content .timeline__desc {
  color: #ffffff;
}
.vsbi-timeline.bg--secondary, .vsbi-timeline[class*=bg--primary] {
  /* Achse (Linie + Abschluss-Punkt) + Pfeil in Weiß */
}
.vsbi-timeline.bg--secondary ol.timeline::before, .vsbi-timeline[class*=bg--primary] ol.timeline::before {
  background: radial-gradient(circle 4px at 50% calc(100% - 4px), #ffffff 99%, transparent 100%) no-repeat, linear-gradient(#ffffff, #ffffff) no-repeat;
  background-size: 8px 8px, 2px 100%;
  background-position: 50% 100%, 50% 0;
}
.vsbi-timeline.bg--secondary ol.timeline::after, .vsbi-timeline[class*=bg--primary] ol.timeline::after {
  border-bottom-color: #ffffff;
  /* Pfeilspitze */
}
.vsbi-timeline.bg--secondary, .vsbi-timeline[class*=bg--primary] {
  /* Hohle Zwischen-Dots: weißer Rand + "Halo" in Section-Farbe */
}
.vsbi-timeline.bg--secondary .timeline__axis .timeline__dot, .vsbi-timeline[class*=bg--primary] .timeline__axis .timeline__dot {
  border: 2px solid #ffffff;
}
.vsbi-timeline {
  /* Spezifisch je Abschnittsfarbe den Dot „füllen“ (= wie Hintergrund),
  damit er hohl wirkt und einen Halo bekommt. */
}
.vsbi-timeline.bg--secondary .timeline__axis .timeline__dot {
  background: #06856c;
  /* „Innenfarbe“ = Section-Background */
  box-shadow: 0 0 0 2px #06856c;
  /* Halo gegen die Achse/Umgebung */
}
.vsbi-timeline[class*=bg--primary] .timeline__item .timeline__year-badge {
  background-color: #06856c;
  color: #ffffff;
}
.vsbi-timeline.bg--gray .timeline__axis .timeline__dot {
  background: #d4dfe7;
  box-shadow: 0 0 0 2px #d4dfe7;
}
.vsbi-timeline.bg--primary-dark .timeline__axis .timeline__dot {
  background: #0a3c3c;
  box-shadow: 0 0 0 2px #0a3c3c;
}
.vsbi-timeline.bg--primary .timeline__axis .timeline__dot, .vsbi-timeline.bg--primary-gradient .timeline__axis .timeline__dot {
  background: #0a5050;
  box-shadow: 0 0 0 2px #0a5050;
}

.vsbi-login-page {
  --error-color: #991b1b;
  --error-bg-color: #dfc0c0;
  --success-color: #0b6f5b;
  --link-color: #0a5050;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
  border: solid #0a5050;
  border-width: 0.125rem 0;
}
.vsbi-login-page .container {
  max-width: 720px;
  margin: 0 auto;
}
.vsbi-login-page__header {
  margin-bottom: 1.25rem;
  background-color: transparent;
}
.vsbi-login-page__intro {
  margin: 0.5rem 0 0 0;
  color: rgba(10, 60, 60, 0.85);
  font-size: 1.05rem;
  line-height: 1.5;
}
.vsbi-login-page__card {
  background: transparent;
  color: #0a3c3c;
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}
.vsbi-login-page .vsbi-form__row {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.vsbi-login-page .vsbi-form__row.vsbi-form__row--inline {
  gap: 0;
  margin-bottom: 1.5rem;
}
.vsbi-login-page .vsbi-form__row.vsbi-form__row--inline .vsbi-btn-link {
  font-size: 0.9rem !important;
  background: none;
  border: 0;
  padding: 0;
  color: var(--success-color);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  text-align: left;
  line-height: 1;
}
.vsbi-login-page .vsbi-form__row.vsbi-form__row--inline .vsbi-btn-link:focus, .vsbi-login-page .vsbi-form__row.vsbi-form__row--inline .vsbi-btn-link:focus-within, .vsbi-login-page .vsbi-form__row.vsbi-form__row--inline .vsbi-btn-link:hover {
  color: #0aa582;
  text-decoration: none;
}
.vsbi-login-page label {
  color: #0a3c3c;
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
}
.vsbi-login-page input[type=text],
.vsbi-login-page input[type=password] {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  line-height: 1.2;
  outline: none;
  background: #ffffff;
}
.vsbi-login-page input[type=text]:focus,
.vsbi-login-page input[type=password]:focus {
  border-color: #06856c;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.vsbi-login-page .btn {
  justify-self: start;
  margin-top: 1rem;
}
.vsbi-login-page a {
  color: var(--link-color);
}
.vsbi-login-page a:focus, .vsbi-login-page a:focus-visible, .vsbi-login-page a:hover {
  color: #0a7c7a;
  text-decoration: none;
  outline: none;
}
.vsbi-login-page .vsbi-form__hint {
  display: block;
  font-size: 0.9rem;
  opacity: 0.85;
}
.vsbi-login-page .vsbi-form__pw-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}
.vsbi-login-page .vsbi-form__pw-list .is-ok {
  color: var(--success-color);
}
.vsbi-login-page .vsbi-form__pw-list .is-bad {
  color: var(--error-color);
}
.vsbi-login-page .vsbi-form__pw-meter {
  margin-bottom: 0.75rem;
}
.vsbi-login-page .vsbi-form__pw-meter p {
  margin: 0;
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
}
.vsbi-login-page .vsbi-form__pw-meter p,
.vsbi-login-page .vsbi-form__pw-meter ul,
.vsbi-login-page .vsbi-form__pw-meter li {
  font-size: 0.95rem;
}
.vsbi-login-page .vsbi-form__pw-meter ul {
  margin-top: 0;
}
.vsbi-login-page .vsbi-form__pw-meter ul li {
  padding-bottom: 0.125rem;
}
.vsbi-login-page .vsbi-form__feedback {
  border-radius: 0.25rem;
  padding: 0.5rem 0.25rem;
  margin-top: 1rem;
  text-align: center;
}
.vsbi-login-page .vsbi-form__feedback--error {
  background: var(--error-bg-color);
  color: var(--error-color);
  margin-bottom: 1.5rem;
}
.vsbi-login-page .vsbi-form__feedback--success {
  background: #0a5050;
  color: #ffffff;
}
.vsbi-login-page .vsbi-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  right: auto;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  /* Extra-Sicherheit: selbst wenn ein Browser es "irgendwie" rendert */
}
.vsbi-login-page .vsbi-hp input {
  pointer-events: none;
}
.vsbi-login-page[data-anchor=anmeldung] .vsbi-form__row:has(+ .vsbi-hp) {
  margin-bottom: 0.25rem;
}
.vsbi-login-page[data-anchor=anmeldung] .vsbi-form__hint {
  text-align: right;
  margin: 0;
}
.vsbi-login-page[data-anchor=passwort-vergessen] .vsbi-form__hint {
  margin-top: 0;
}
.vsbi-login-page[data-anchor=passwort-vergessen] .vsbi-login-page__card {
  flex-direction: column;
}
.vsbi-login-page[data-anchor=passwort-vergessen] .vsbi-login-page__card .vsbi-form__hint {
  margin: 1rem 0 0;
  font-family: "Mulish";
  font-weight: 700;
  font-style: normal;
}
.vsbi-login-page[data-anchor=passwort-vergessen] .vsbi-form__feedback {
  margin: 0.25rem 0 1rem;
}/*# sourceMappingURL=style.css.map */