/* source: local font cache */
/* Local Google Fonts cache: c7b93b9b6f41. */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/cache/font-a5d38fe99f93.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/cache/font-9fea608a947e.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/cache/font-c163c536f68b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/cache/font-fa26406eeda9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Local Google Fonts cache: 50f706840c53. */
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/cache/font-ef054651197a.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* source: /app/components/Button/Button.css */
/* /app/components/Button/Button.css */

.btn-component {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  line-height: 1.5;
  width: max-content;

  /* Theme-Variablen mit sicheren Komponenten-Fallbacks. */
  font-family: var(--btn-font, inherit);
  color: var(--btn-text-color, #ffffff);
  background-color: var(--btn-bg-color, var(--color-primary));
  border-width: var(--btn-border-width, 0px);
  border-style: var(--btn-border-style, solid);
  border-color: var(--btn-border-color, var(--btn-bg-color, transparent));
}

.btn-component:hover {
  text-decoration: none;
}

/* Farbverlauf über der gewählten beziehungsweise vom Theme geerbten Farbe. */
.btn-gradient {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%);
}

/* Ecken: Ohne Klasse bleibt die Einstellung vollständig beim Theme. */
.btn-corner-square { border-radius: 0; }
.btn-corner-rounded { border-radius: 6px; }
.btn-corner-pill { border-radius: 50px; }

/* Hover-Effekte */
.btn-hover-opacity:hover {
  opacity: 0.85;
}

.btn-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.btn-hover-glow:hover {
  box-shadow: 0 0 15px var(--btn-bg-color, var(--color-primary));
}

@keyframes rotateButton {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* source: /app/components/CoverBlock/CoverBlock.css */
/* /app/components/CoverBlock/CoverBlock.css */

.cover-component-wrapper {
  display: flex;
  width: 100%;
  min-height: var(--wb-cover-min-height-desktop, 60vh);
  position: relative;
  overflow: hidden;
}

.cover-bg-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: var(--wb-cover-object-fit-desktop, cover);
  background-position: var(--wb-cover-position-x-desktop, center) var(--wb-cover-position-y-desktop, center);
  background-attachment: var(--wb-cover-bg-attachment-desktop, scroll);
  z-index: 0;
}

/* Backward-compatible modifier classes for older content. */
.cover-bg-fit-cover { --wb-cover-object-fit-desktop: cover; }
.cover-bg-fit-contain { --wb-cover-object-fit-desktop: contain; }

.cover-bg-pos-center-top { --wb-cover-position-x-desktop: center; --wb-cover-position-y-desktop: top; }
.cover-bg-pos-center-center { --wb-cover-position-x-desktop: center; --wb-cover-position-y-desktop: center; }
.cover-bg-pos-center-bottom { --wb-cover-position-x-desktop: center; --wb-cover-position-y-desktop: bottom; }
.cover-bg-pos-left-center { --wb-cover-position-x-desktop: left; --wb-cover-position-y-desktop: center; }
.cover-bg-pos-right-center { --wb-cover-position-x-desktop: right; --wb-cover-position-y-desktop: center; }
.cover-bg-pos-left-top { --wb-cover-position-x-desktop: left; --wb-cover-position-y-desktop: top; }
.cover-bg-pos-right-bottom { --wb-cover-position-x-desktop: right; --wb-cover-position-y-desktop: bottom; }
.cover-bg-pos-left-bottom { --wb-cover-position-x-desktop: left; --wb-cover-position-y-desktop: bottom; }
.cover-bg-pos-right-top { --wb-cover-position-x-desktop: right; --wb-cover-position-y-desktop: top; }

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cover-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-alt, #e9ecef);
  color: var(--color-text-muted, #6c757d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  border: 2px dashed #ccc;
  z-index: 0;
}

.cover-content-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--layout-max-width, 1200px);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: var(--wb-cover-align-x-desktop, center);
  justify-content: var(--wb-cover-align-y-desktop, center);
  text-align: var(--wb-cover-text-align-desktop, center);
}

.cover-content-x-left { --wb-cover-align-x-desktop: flex-start; --wb-cover-text-align-desktop: left; }
.cover-content-x-center { --wb-cover-align-x-desktop: center; --wb-cover-text-align-desktop: center; }
.cover-content-x-right { --wb-cover-align-x-desktop: flex-end; --wb-cover-text-align-desktop: right; }

.cover-content-y-top { --wb-cover-align-y-desktop: flex-start; }
.cover-content-y-center { --wb-cover-align-y-desktop: center; }
.cover-content-y-bottom { --wb-cover-align-y-desktop: flex-end; }

.cover-bg-fixed {
  --wb-cover-bg-attachment-desktop: fixed;
}

@media (max-width: 991.98px) {
  .cover-component-wrapper {
    min-height: var(--wb-cover-min-height-tablet, var(--wb-cover-min-height-desktop, 60vh));
  }

  .cover-bg-element {
    background-size: var(--wb-cover-object-fit-tablet, var(--wb-cover-object-fit-desktop, cover));
    background-position:
      var(--wb-cover-position-x-tablet, var(--wb-cover-position-x-desktop, center))
      var(--wb-cover-position-y-tablet, var(--wb-cover-position-y-desktop, center));
    background-attachment: var(--wb-cover-bg-attachment-tablet, var(--wb-cover-bg-attachment-desktop, scroll));
  }

  .cover-content-inner {
    align-items: var(--wb-cover-align-x-tablet, var(--wb-cover-align-x-desktop, center));
    justify-content: var(--wb-cover-align-y-tablet, var(--wb-cover-align-y-desktop, center));
    text-align: var(--wb-cover-text-align-tablet, var(--wb-cover-text-align-desktop, center));
  }
}

@media (max-width: 767.98px) {
  .cover-component-wrapper {
    min-height: var(--wb-cover-min-height-mobile, var(--wb-cover-min-height-tablet, var(--wb-cover-min-height-desktop, 60vh)));
  }

  .cover-bg-element {
    background-size: var(--wb-cover-object-fit-mobile, var(--wb-cover-object-fit-tablet, var(--wb-cover-object-fit-desktop, cover)));
    background-position:
      var(--wb-cover-position-x-mobile, var(--wb-cover-position-x-tablet, var(--wb-cover-position-x-desktop, center)))
      var(--wb-cover-position-y-mobile, var(--wb-cover-position-y-tablet, var(--wb-cover-position-y-desktop, center)));
    background-attachment: var(--wb-cover-bg-attachment-mobile, var(--wb-cover-bg-attachment-tablet, var(--wb-cover-bg-attachment-desktop, scroll)));
  }

  .cover-content-inner {
    align-items: var(--wb-cover-align-x-mobile, var(--wb-cover-align-x-tablet, var(--wb-cover-align-x-desktop, center)));
    justify-content: var(--wb-cover-align-y-mobile, var(--wb-cover-align-y-tablet, var(--wb-cover-align-y-desktop, center)));
    text-align: var(--wb-cover-text-align-mobile, var(--wb-cover-text-align-tablet, var(--wb-cover-text-align-desktop, center)));
  }
}

/* source: /app/components/DefaultContainer/DefaultContainer.css */
/* Das Basis-Gerüst für den Container */
.default-container {
  position: relative;
  display: grid;
  gap: 20px; /* Der Standard-Abstand zwischen den Spalten */
  width: 100%;
  margin: 0 auto; /* Zentriert den Container */
}

/*Abstand für Scroll to id definieren*/
.default-container-wrapper {
    /* Wenn der Header z. B. 80px hoch ist, nimm 100px für etwas Luft zum Atmen */
    scroll-margin-top: 100px; 
}

/* Manueller Sprunganker des DefaultContainers. Absolut positioniert, damit
   er weder eine zusätzliche Flex-Spalte noch einen Abstand erzeugt. */
.wb-scroll-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-margin-top: 100px;
  pointer-events: none;
}

.default-container.layout-boxed {
    /* Einheitliches Boxed-Verhalten für top-level und verschachtelte Container */
    width: min(calc(100% - (2 * var(--layout-side-padding, 16px))), var(--layout-max-width, 1200px));
    margin-left: auto; 
    margin-right: auto; 
}

/* In verschachtelten Spalten soll "boxed" die volle Spaltenbreite nutzen */
.container-col > .default-container.layout-boxed {
    width: min(100%, var(--layout-max-width, 1200px));
}

/* Verschachtelte Container nicht per Auto-Margin zentrieren – die horizontale
   Position steuert die Spalte über align-items (Inhalt-Ausrichtung X). */
.container-col > .default-container,
.container-col > .default-container.layout-boxed,
.container-col > .default-container.container-depth-1.layout-boxed,
.container-col > .default-container.container-depth-2.layout-boxed,
.container-col > .default-container.container-depth-3.layout-boxed {
    margin-left: unset;
    margin-right: unset;
}

/* Ebene 2 bekommt wieder den normalen Boxed-Seitenabstand.
   Tiefer verschachtelte Container bleiben volle Spaltenbreite, damit kein doppelter Abstand entsteht. */
.default-container.container-depth-1.layout-boxed {
    width: min(
        var(--layout-max-width, 1200px),
        calc(100% - var(--layout-page-gap, 40px))
    );
    margin-left: auto;
    margin-right: auto;
}

.default-container {
    position: relative;
    z-index: 0;
    width: 100%;
    display: flex; /* Flexbox aktivieren */
    flex-direction: row; 
    flex-wrap: wrap; /* Wichtig für später auf Mobile! */
}

.wb-scroll-io-anchor {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
}

/* --- HORIZONTALE VERTEILUNG --- */
.default-container.align-x-start,
.wb-loop-anim-target.align-x-start { justify-content: flex-start; }
.default-container.align-x-center,
.wb-loop-anim-target.align-x-center { justify-content: center; }
.default-container.align-x-space-between,
.wb-loop-anim-target.align-x-space-between { justify-content: space-between; }

/* --- SPALTEN-VERHALTEN --- */
.default-container.col-width-equal .container-col,
.wb-loop-anim-target.col-width-equal .container-col {
    flex: 1;
}

.default-container.col-width-auto .container-col,
.wb-loop-anim-target.col-width-auto .container-col {
    flex: 0 1 auto;
}

.default-container.layout-1-col.col-width-auto > .container-col.container-content-align-x-center,
.wb-loop-anim-target.layout-1-col.col-width-auto > .container-col.container-content-align-x-center {
    margin-left: auto;
    margin-right: auto;
}

.default-container.layout-1-col.col-width-auto > .container-col.container-content-align-x-right,
.wb-loop-anim-target.layout-1-col.col-width-auto > .container-col.container-content-align-x-right {
    margin-left: auto;
    margin-right: 0;
}

.default-container.layout-2-col-1-2 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-1-2 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-2-col-1-2 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-1-2 > .container-col:nth-child(2) { flex: 2 1 0; }

.default-container.layout-2-col-2-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-2-1 > .container-col:nth-child(1) { flex: 2 1 0; }
.default-container.layout-2-col-2-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-2-1 > .container-col:nth-child(2) { flex: 1 1 0; }

.default-container.layout-2-col-1-3 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-1-3 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-2-col-1-3 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-1-3 > .container-col:nth-child(2) { flex: 3 1 0; }

.default-container.layout-2-col-3-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-3-1 > .container-col:nth-child(1) { flex: 3 1 0; }
.default-container.layout-2-col-3-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-3-1 > .container-col:nth-child(2) { flex: 1 1 0; }

.default-container.layout-3-col-2-1-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-3-col-2-1-1 > .container-col:nth-child(1) { flex: 2 1 0; }
.default-container.layout-3-col-2-1-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-3-col-2-1-1 > .container-col:nth-child(2) { flex: 1 1 0; }
.default-container.layout-3-col-2-1-1 > .container-col:nth-child(3),
.wb-loop-anim-target.layout-3-col-2-1-1 > .container-col:nth-child(3) { flex: 1 1 0; }

.default-container.layout-3-col-1-2-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-3-col-1-2-1 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-3-col-1-2-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-3-col-1-2-1 > .container-col:nth-child(2) { flex: 2 1 0; }
.default-container.layout-3-col-1-2-1 > .container-col:nth-child(3),
.wb-loop-anim-target.layout-3-col-1-2-1 > .container-col:nth-child(3) { flex: 1 1 0; }

.default-container.layout-3-col-1-1-2 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-3-col-1-1-2 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-3-col-1-1-2 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-3-col-1-1-2 > .container-col:nth-child(2) { flex: 1 1 0; }
.default-container.layout-3-col-1-1-2 > .container-col:nth-child(3),
.wb-loop-anim-target.layout-3-col-1-1-2 > .container-col:nth-child(3) { flex: 2 1 0; }

.wb-loop-anim-target {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  will-change: transform;
}

.wb-loop-anim-target.wb-loop-anim--rotate {
  transform-origin: center center;
}


.container-content-align-x-center {
	align-items: center;
	text-align: center;
}

.container-content-align-x-left {
	align-items: flex-start;
	text-align: left;
}

.container-content-align-x-right {
	align-items: flex-end;
	text-align: right;
}

.container-content-align-y-top {
	justify-content: flex-start;
}

.container-content-align-y-center {
	justify-content: center;
}

.container-content-align-y-bottom {
	justify-content: flex-end;
}



/* Die innere Spalte (kann später z.B. für Padding genutzt werden) */
.container-col {
  display: flex;
  flex-direction: column;
  column-gap: 25px;
  row-gap: 15px;
  /* Wichtig als Bezugsrahmen für absolut positionierte Geschwister-Instanzen
     innerhalb derselben Spalte, z.B. AnimatedBgContainer (siehe dessen CSS). */
  position: relative;
}

/* ACHTUNG: ".container-col" ist KEIN nur für DefaultContainer reservierter
   Klassenname - AnimatedBgContainer verwendet dieselbe Klasse. Deshalb nur
   Direktkinder von .default-container (siehe DefaultContainer_error.css). */
/* Optionaler Inhaltsfluss innerhalb eines Slots. Die Komponenten behalten
   ihre eigene Breite und wechseln erst dann in die naechste Zeile, wenn die
   verfuegbare Slot-Breite nicht mehr ausreicht. */
.container-col.container-content-flow-row-wrap {
  flex-direction: row;
  flex-wrap: wrap;
}

.container-col.container-content-flow-row-wrap > * {
  max-width: 100%;
}

/* Bei horizontalem Inhaltsfluss liegen X und Y auf den jeweils anderen
   Flexbox-Achsen als im bisherigen Spaltenmodus. */
.container-col.container-content-flow-row-wrap.container-content-align-x-left {
  justify-content: flex-start;
}

.container-col.container-content-flow-row-wrap.container-content-align-x-center {
  justify-content: center;
}

.container-col.container-content-flow-row-wrap.container-content-align-x-right {
  justify-content: flex-end;
}

.container-col.container-content-flow-row-wrap.container-content-align-y-top {
  align-items: flex-start;
  align-content: flex-start;
}

.container-col.container-content-flow-row-wrap.container-content-align-y-center {
  align-items: center;
  align-content: center;
}

.container-col.container-content-flow-row-wrap.container-content-align-y-bottom {
  align-items: flex-end;
  align-content: flex-end;
}

/* Der Hinzufuegen-Platzhalter soll im leeren Slot auch im Zeilenmodus die
   komplette nutzbare Breite fuer den PageBuilder belegen. */
.container-col.container-content-flow-row-wrap > .wb-empty-slot {
  flex-basis: 100%;
  width: 100%;
}

.default-container > .container-col {
  /* Ohne min-height: 0 nutzt die Spalte als Flex-Item min-height: auto und
     lässt sich nicht unter die intrinsische Inhaltsgröße schrumpfen. Bei
     Hochformat-Bildern in gestreckten Zeilen wird die Zeilenhöhe zu groß;
     beim gestapelten Tablet/Mobile-Layout kann die umgekehrte Kombination
     aus flex-basis: 0 (Spalten-Verhältnis-Regeln) dagegen zu kollabierten
     Spaltenhöhen führen – der Inhalt ragt heraus und wirkt „verdeckt". */
  min-height: 0;
  min-width: 0;
}

/* --- DIE LAYOUT VARIANTEN --- */

.layout-1-col {
  grid-template-columns: 1fr;
}

.layout-2-col-equal {
  grid-template-columns: 1fr 1fr;
}

.layout-2-col-1-2 {
  /* Linke Spalte schmal (1/3), Rechte Spalte breit (2/3) */
  grid-template-columns: 1fr 2fr;
}

.layout-2-col-2-1 {
  /* Linke Spalte breit (2/3), Rechte Spalte schmal (1/3) */
  grid-template-columns: 2fr 1fr;
}

.layout-3-col {
  grid-template-columns: repeat(3, 1fr);
}

.layout-4-col {
  grid-template-columns: repeat(4, 1fr);
}

/* --- RESPONSIVE DESIGN (Für Smartphones) --- */
/* Auf kleinen Bildschirmen brechen wir alle Spalten untereinander um.
   Hinweis: .default-container ist ein Flexbox-Container (siehe display: flex weiter oben),
   daher muss hier flex-direction/flex-basis gesetzt werden statt grid-template-columns. */
/* --- SCROLL-ANIMATION (Intersection Observer + CSS) --- */
.default-container.wb-scroll-anim {
  transition:
    opacity var(--wb-scroll-duration, 600ms) ease,
    transform var(--wb-scroll-duration, 600ms) ease;
}

.default-container.wb-scroll-anim.wb-scroll-anim--scrub {
  transition: none !important;
}

.default-container.wb-scroll-anim.wb-scroll-anim--scrub.wb-scroll-anim--visibility-fade,
.default-container.wb-scroll-anim.wb-scroll-anim--scrub.wb-scroll-anim--visibility-both {
  opacity: 0;
}

.default-container.wb-scroll-anim.wb-scroll-anim--from-up {
  transform: translateY(var(--wb-scroll-distance, 40px));
}

.default-container.wb-scroll-anim.wb-scroll-anim--from-down {
  transform: translateY(calc(-1 * var(--wb-scroll-distance, 40px)));
}

.default-container.wb-scroll-anim.wb-scroll-anim--from-up.wb-scroll-anim--invert-y:not(.wb-scroll-anim--in) {
  transform: translateY(calc(-1 * var(--wb-scroll-distance, 40px)));
}

.default-container.wb-scroll-anim.wb-scroll-anim--from-down.wb-scroll-anim--invert-y:not(.wb-scroll-anim--in) {
  transform: translateY(var(--wb-scroll-distance, 40px));
}

.default-container.wb-scroll-anim.wb-scroll-anim--from-left {
  transform: translateX(var(--wb-scroll-distance, 40px));
}

.default-container.wb-scroll-anim.wb-scroll-anim--from-right {
  transform: translateX(calc(-1 * var(--wb-scroll-distance, 40px)));
}

.default-container.wb-scroll-anim.wb-scroll-anim--visibility-fade,
.default-container.wb-scroll-anim.wb-scroll-anim--visibility-both {
  opacity: 0;
}

.default-container.wb-scroll-anim.wb-scroll-anim--in {
  transform: none;
}

.default-container.wb-scroll-anim.wb-scroll-anim--in.wb-scroll-anim--visibility-fade,
.default-container.wb-scroll-anim.wb-scroll-anim--in.wb-scroll-anim--visibility-both {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .default-container.wb-scroll-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .default-container.wb-scroll-anim.wb-scroll-anim--scrub {
    opacity: 1 !important;
  }

  .wb-loop-anim-target {
    transform: none !important;
  }
}

/* source: /app/components/HeaderBlock/HeaderBlock.css */
/* /app/components/HeaderBlock/HeaderBlock.css */

/* --- DER WRAPPER (Layout) --- */
.header-block-wrapper {
  display: block;
  width: 100%;
}

/* Steuerung der Ausrichtung (wie beim Button) */
.header-block-wrapper.align-left { --wb-align-desktop: left; }
.header-block-wrapper.align-center { --wb-align-desktop: center; }
.header-block-wrapper.align-right { --wb-align-desktop: right; }

/* --- DAS ELEMENT (Typografie) --- */
.header-element {
  /* Setzt den Margin des Tags selbst zurück, da der Wrapper den Abstand regelt */
  margin: 0; 
  word-break: break-word; /* Verhindert, dass ultralange Wörter auf Handys das Layout sprengen */
}

/* Optional: Optische Überschreibungen */
/* Wenn der Kunde sagt: "Es ist zwar ein SEO-H2, soll aber riesig wie ein H1 aussehen!" */
:where(h1.header-element, .header-element.look-h1) {
  font-size: var(--font-size-h1, 2.5rem);
}

:where(h2.header-element, .header-element.look-h2) {
  font-size: var(--font-size-h2, 2rem);
}

:where(h3.header-element, .header-element.look-h3) {
  font-size: var(--font-size-h3, 1.75rem);
}

:where(h4.header-element, .header-element.look-h4) {
  font-size: var(--font-size-h4, 1.5rem);
}

:where(h5.header-element, .header-element.look-h5) {
  font-size: var(--font-size-h5, 1.25rem);
}

:where(h6.header-element, .header-element.look-h6) {
  font-size: var(--font-size-h6, 1rem);
}

@media (max-width: 991.98px) {
  :where(h1.header-element, .header-element.look-h1) {
    font-size: var(--font-size-h1, 2.5rem);
  }

  :where(h2.header-element, .header-element.look-h2) {
    font-size: var(--font-size-h2, 2rem);
  }

  :where(h3.header-element, .header-element.look-h3) {
    font-size: var(--font-size-h3, 1.75rem);
  }

  :where(h4.header-element, .header-element.look-h4) {
    font-size: var(--font-size-h4, 1.5rem);
  }

  :where(h5.header-element, .header-element.look-h5) {
    font-size: var(--font-size-h5, 1.25rem);
  }

  :where(h6.header-element, .header-element.look-h6) {
    font-size: var(--font-size-h6, 1rem);
  }
}

@media (max-width: 767.98px) {
  :where(h1.header-element, .header-element.look-h1) {
    font-size: var(--font-size-h1, 2.5rem);
  }

  :where(h2.header-element, .header-element.look-h2) {
    font-size: var(--font-size-h2, 2rem);
  }

  :where(h3.header-element, .header-element.look-h3) {
    font-size: var(--font-size-h3, 1.75rem);
  }

  :where(h4.header-element, .header-element.look-h4) {
    font-size: var(--font-size-h4, 1.5rem);
  }

  :where(h5.header-element, .header-element.look-h5) {
    font-size: var(--font-size-h5, 1.25rem);
  }

  :where(h6.header-element, .header-element.look-h6) {
    font-size: var(--font-size-h6, 1rem);
  }
}

/* source: /app/components/Image/Image.css */
/* /app/components/Image/Image.css */

.image-component-wrapper {
  /* Standardmäßig passt sich der Wrapper dem Inhalt an, 
     außer es wird eine feste Höhe über den $styleString injiziert */
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden; /* Verhindert, dass Ecken herausragen, falls border-radius genutzt wird */
  /* Ist dieser Wrapper selbst ein Flex-Item (z.B. per "flex: 1" via styles
     einer Spalte einer anderen angepasst, statt eine feste aspect-ratio zu
     nutzen - siehe DefaultContainer.css), verhindert das browserseitige
     Standard-"min-height: auto" sonst, dass er unter die intrinsische
     Höhe des eingebetteten <img> schrumpft. Bei Hochformat-Bildern (großes
     natürliches Höhe/Breite-Verhältnis) fällt das besonders stark auf. */
  min-height: 0;
  min-width: 0;
}

.image-element {
  display: block;
  width: 100%;
  height: 100%; /* Wichtig, falls der Wrapper eine feste Höhe hat! */
}

/* --- DIE FIT-MODIFIER --- */

/* FÜLLEN: Das Bild füllt den ganzen Platz aus und wird notfalls beschnitten (wie ein Hintergrundbild) */
.img-fit-cover {
  object-fit: cover;
}

/* EINPASSEN: Das Bild wird komplett angezeigt, auch wenn dadurch links/rechts oder oben/unten Leerräume entstehen */
.img-fit-contain {
  object-fit: contain;
}

/* --- RAHMENFORM (Ecken-Presets) --- */
/* Ergänzt die manuell über "styles" setzbare border-radius um feste Presets.
   Da ein per Styles gesetzter Radius als Inline-Style ausgegeben wird und
   Inline-Styles CSS-Klassen immer schlagen, brauchen die Presets hier
   !important - sonst hätte eine früher gesetzte manuelle border-radius
   trotz aktiver Auswahl von Pill/Circle/Ellipse weiterhin Vorrang. */

/* PILL: Stark abgerundete Enden, ideal für schmale/breite Bildboxen (z.B. Badges, Tags) */
.img-corner-pill {
  border-radius: 999px !important;
}

/* CIRCLE: Erzwingt ein 1:1-Seitenverhältnis, das Bild wird per object-fit: cover zum Kreis zugeschnitten */
.img-corner-circle {
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  /* In Flex-Spalten darf min-height: 0 am Wrapper sonst den Kreis unter die
     aspect-ratio-Höhe schrumpfen; overflow:hidden schneidet dann unten ab. */
  flex-shrink: 0;
  min-height: auto;
}

/* ELLIPSE: Behält die vorhandene Breite/Höhe der Box bei und rundet komplett ab -> ovale Form */
.img-corner-ellipse {
  border-radius: 50% !important;
}

/* --- DER PLATZHALTER (Für den Editor) --- */
.image-placeholder {
  width: 100%;
  min-height: 250px;
  background-color: var(--color-bg-alt, #e9ecef);
  color: var(--color-text-muted, #6c757d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  border: 2px dashed #ccc;
  border-radius: 4px;
}

/* --- DIE NEUEN POSITIONS-MODIFIER --- */

/* --- VERTIKALE AUSRICHTUNG (Y-Achse) --- */
.img-pos-center-top { object-position: var(--custom-img-pos-x, center) var(--custom-img-pos-y, top); }
.img-pos-center-center { object-position: var(--custom-img-pos-x, center) var(--custom-img-pos-y, center); }
.img-pos-center-bottom { object-position: var(--custom-img-pos-x, center) var(--custom-img-pos-y, bottom); }

/* --- HORIZONTALE AUSRICHTUNG (X-Achse) --- */
.img-pos-left-center { object-position: var(--custom-img-pos-x, left) var(--custom-img-pos-y, center); }
.img-pos-right-center { object-position: var(--custom-img-pos-x, right) var(--custom-img-pos-y, center); }

/* --- KOMBINIERTE ECKEN --- */
.img-pos-left-top { object-position: var(--custom-img-pos-x, left) var(--custom-img-pos-y, top); }
.img-pos-right-bottom { object-position: var(--custom-img-pos-x, right) var(--custom-img-pos-y, bottom); }
.img-pos-left-bottom { object-position: var(--custom-img-pos-x, left) var(--custom-img-pos-y, bottom); }
.img-pos-right-top { object-position: var(--custom-img-pos-x, right) var(--custom-img-pos-y, top); }


/* --- RESPONSIVE FALLBACK für "position: absolute" via styles ---
   Der "Höhe an Nachbar-Spalte anpassen"-Trick (styles: {"position":"absolute",
   "inset":"0"}, siehe DefaultContainer-Instanzen mit mehreren Bildspalten)
   funktioniert nur, SOLANGE die Spalten nebeneinander stehen - dann "leiht"
   sich die Spalte über align-items:stretch die Höhe der Nachbar-Spalte.
   Sobald DefaultContainer.css bei max-width:768px auf gestapelte Spalten
   umschaltet, gibt es diese Nachbar-Höhe nicht mehr: Der (absolut positionierte,
   damit aus dem Fluss genommene) Bild-Wrapper trägt dann nichts mehr zur
   Spaltenhöhe bei, die Spalte kollabiert auf 0px.

   WICHTIG: Der Fallback-Wert darf NICHT direkt als "aspect-ratio" mit in
   dieselben "styles" geschrieben werden! Bei absolut positionierten Elementen
   mit inset:0 auf allen 4 Seiten überschreibt ein gesetztes aspect-ratio das
   "auf allen Seiten strecken"-Verhalten wieder und erzwingt stattdessen exakt
   dieses Verhältnis als Größe - das würde den Desktop-Trick sofort wieder
   kaputt machen. Stattdessen wird der Fallback nur als (auf Desktop völlig
   wirkungsloser) CSS-Variablen-Wert mitgegeben, z.B.:
     {"--fallback-aspect-ratio": "1 / 1", "position": "absolute", "inset": "0"}
   und erst HIER, ausschließlich innerhalb dieser Media Query, tatsächlich als
   aspect-ratio "scharf geschaltet". !important ist nötig, weil position/inset
   als Inline-Style (höhere Prio als jede Klasse) ausgegeben werden.

   WICHTIG: Der Attribut-Selektor "[style*=\"position: absolute\"]" ist bewusst
   kein bloßes ".image-component-wrapper", sondern trifft NUR Wrapper, die
   diesen Trick per "styles" tatsächlich aktiviert haben! Ohne diese
   Einschränkung hätte "aspect-ratio: ... !important" hier JEDES Bild auf
   Mobile getroffen - auch ganz normale Rahmenform-Presets wie "Circle"
   (.img-corner-circle, erzwingt aspect-ratio:1/1 OHNE !important). Deren
   Verhältnis wäre dann auf Mobile durch den (nicht zutreffenden) Fallback
   "auto" überschrieben worden - aus dem Kreis wäre eine verzerrte Ellipse
   geworden, weil border-radius:50% dann auf eine nicht-quadratische Box
   trifft. */
@media (max-width: 768px) {
  .image-component-wrapper[style*="position: absolute"] {
    position: static !important;
    inset: auto !important;
    aspect-ratio: var(--fallback-aspect-ratio, auto) !important;
  }
}

/* --- Image Animation --- */

/* Der Grundzustand des Bildes */
.image-element-zoom-in {
  /* Bestimmt, WIE weich die Animation abläuft:
     - transform: gibt an, dass wir nur die Skalierung animieren wollen (besser für die Performance)
     - 0.3s: Dauer der Animation (300 Millisekunden)
     - ease: Sorgt für ein sanftes Anfahren und Abbremsen der Bewegung */
  transition: transform 0.5s ease;
}

/* Der Zustand, wenn die Maus über dem Bild schwebt */
.image-element-zoom-in:hover {
  /* transform: scale(1.05) vergrößert das Bild auf 105% der Originalgröße. 
     Ein Wert von 1.1 wäre 110%, was oft schon etwas zu aggressiv wirkt. */
  transform: scale(1.05);
}

/* source: /app/components/NavMenu/NavMenu.css */
.nav-menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-menu-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-list,
.nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--nav-menu-gap, 30px);
}

.nav-menu-layout-horizontal .nav-list {
    flex-direction: row;
}

.nav-menu-layout-vertical .nav-menu-inner {
    flex-direction: column;
    align-items: flex-start;
}

.nav-menu-layout-vertical .nav-list {
    align-items: flex-start;
    flex-direction: column;
}

.nav-menu-align-start .nav-menu-inner {
    justify-content: flex-start;
}

.nav-menu-align-center .nav-menu-inner {
    justify-content: center;
}

.nav-menu-align-end .nav-menu-inner {
    justify-content: flex-end;
}

.nav-menu-align-space-between .nav-menu-inner {
    justify-content: space-between;
}

.nav-menu-align-space-between .nav-list {
    width: 100%;
    justify-content: space-between;
}

.nav-menu-layout-vertical.nav-menu-align-center .nav-menu-inner,
.nav-menu-layout-vertical.nav-menu-align-center .nav-list {
    align-items: center;
}

.nav-menu-layout-vertical.nav-menu-align-end .nav-menu-inner,
.nav-menu-layout-vertical.nav-menu-align-end .nav-list {
    align-items: flex-end;
}

.nav-menu-layout-vertical.nav-menu-align-space-between .nav-list {
    width: auto;
    justify-content: flex-start;
}

.nav-item {
    position: relative;
}

:where(.nav-menu-wrapper) {
    color: var(--color-nav, var(--color-text, inherit));
    font-family: var(--font-nav, var(--font-primary, inherit));
    font-size: var(--font-size-nav, var(--font-size-body, inherit));
    font-weight: var(--font-weight-nav, var(--font-weight-body, 500));
    letter-spacing: var(--letter-spacing-nav, var(--letter-spacing-body, inherit));
}

.nav-link {
    color: inherit;
    text-decoration: none;
}

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 180px;
    padding: 10px 0;
    background-color: var(--color-secondary);
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.nav-submenu .nav-link {
    display: block;
    padding: 8px 14px;
    white-space: nowrap;
}

.nav-item--has-children:hover > .nav-submenu,
.nav-item--has-children:focus-within > .nav-submenu {
    display: block;
}

.nav-menu-layout-vertical .nav-submenu {
    top: 0;
    left: 100%;
}

.mobile-toggle-btn {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-inline: var(--wb-nav-menu-mobile-toggle-margin-inline, auto 0);
    cursor: pointer;
	padding: 0;
    background: transparent;
    border: 0;
}

.hamburger-line {
    width: 30px;
    height: 3px;
    background-color: var(--wb-nav-menu-mobile-toggle-color, #212529);
    border-radius: 2px;
    transition: 0.3s ease;
}

@media (max-width: 576px) {
    .nav-menu-breakpoint-sm.nav-menu-mobile-collapse .mobile-toggle-btn {
        display: flex;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-inline: var(--wb-nav-menu-mobile-panel-margin-inline, auto 0);
        z-index: 999;
        width: var(--wb-nav-menu-mobile-width, 250px);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--wb-nav-menu-mobile-padding, 18px);
        background-color: var(--wb-nav-menu-mobile-background, #ffffff);
        border-radius: var(--wb-nav-menu-mobile-border-radius, 8px);
        box-shadow: var(--wb-nav-menu-mobile-box-shadow, 0 10px 20px rgba(0, 0, 0, 0.1));
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-link {
        color: var(--wb-nav-menu-mobile-link-color, #212529);
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-link:hover,
    .nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-link:focus-visible {
        color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-collapse.is-open .nav-list {
        display: flex;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-submenu {
        position: static;
        display: block;
        min-width: 0;
        padding: 8px 0 0 12px;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    .nav-menu-breakpoint-md.nav-menu-mobile-collapse .mobile-toggle-btn {
        display: flex;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-inline: var(--wb-nav-menu-mobile-panel-margin-inline, auto 0);
        z-index: 999;
        width: var(--wb-nav-menu-mobile-width, 250px);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--wb-nav-menu-mobile-padding, 18px);
        background-color: var(--wb-nav-menu-mobile-background, #ffffff);
        border-radius: var(--wb-nav-menu-mobile-border-radius, 8px);
        box-shadow: var(--wb-nav-menu-mobile-box-shadow, 0 10px 20px rgba(0, 0, 0, 0.1));
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-link {
        /*color: var(--wb-nav-menu-mobile-link-color);*/
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-link:hover,
    .nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-link:focus-visible {
        color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-collapse.is-open .nav-list {
        display: flex;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-submenu {
        position: static;
        display: block;
        min-width: 0;
        padding: 8px 0 0 12px;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 992px) {
    .nav-menu-breakpoint-lg.nav-menu-mobile-collapse .mobile-toggle-btn {
        display: flex;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-inline: var(--wb-nav-menu-mobile-panel-margin-inline, auto 0);
        z-index: 999;
        width: var(--wb-nav-menu-mobile-width, 250px);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--wb-nav-menu-mobile-padding, 18px);
        background-color: var(--wb-nav-menu-mobile-background, #ffffff);
        border-radius: var(--wb-nav-menu-mobile-border-radius, 8px);
        box-shadow: var(--wb-nav-menu-mobile-box-shadow, 0 10px 20px rgba(0, 0, 0, 0.1));
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-link {
        color: var(--wb-nav-menu-mobile-link-color, #212529);
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-link:hover,
    .nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-link:focus-visible {
        color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-collapse.is-open .nav-list {
        display: flex;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-submenu {
        position: static;
        display: block;
        min-width: 0;
        padding: 8px 0 0 12px;
        background: transparent;
        box-shadow: none;
    }
}

/* Full-Ansicht und transparente Panel-Hintergründe */
.mobile-nav-close-btn {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--wb-nav-menu-mobile-toggle-color, #212529);
    font: inherit;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
}

body.wb-nav-menu-full-open {
    overflow: hidden;
}

@media (max-width: 576px) {
    .nav-menu-breakpoint-sm:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
        background-color: transparent;
        isolation: isolate;
    }

    .nav-menu-breakpoint-sm:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        pointer-events: none;
        background-color: var(--wb-nav-menu-mobile-background, #ffffff);
        border-radius: inherit;
        opacity: var(--wb-nav-menu-mobile-background-opacity, 1);
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-full .mobile-toggle-btn {
        display: flex;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-list {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        box-sizing: border-box;
        width: 100vw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        overflow-y: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: max(var(--wb-nav-menu-mobile-padding, 18px), 72px) var(--wb-nav-menu-mobile-padding, 18px) var(--wb-nav-menu-mobile-padding, 18px);
        border-radius: 0;
        box-shadow: none;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-full.is-open .nav-list {
        display: flex;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-full.is-open .mobile-nav-close-btn {
        display: flex;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-link {
        color: var(--wb-nav-menu-mobile-link-color, #212529);
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-link:hover,
    .nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-link:focus-visible {
        color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-submenu {
        position: static;
        display: block;
        min-width: 0;
        padding: 8px 0 0 12px;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    .nav-menu-breakpoint-md:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
        background-color: transparent;
        isolation: isolate;
    }

    .nav-menu-breakpoint-md:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        pointer-events: none;
        background-color: var(--wb-nav-menu-mobile-background, #ffffff);
        border-radius: inherit;
        opacity: var(--wb-nav-menu-mobile-background-opacity, 1);
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-full .mobile-toggle-btn {
        display: flex;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-full .nav-list {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        box-sizing: border-box;
        width: 100vw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        overflow-y: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: max(var(--wb-nav-menu-mobile-padding, 18px), 72px) var(--wb-nav-menu-mobile-padding, 18px) var(--wb-nav-menu-mobile-padding, 18px);
        border-radius: 0;
        box-shadow: none;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-full.is-open .nav-list {
        display: flex;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-full.is-open .mobile-nav-close-btn {
        display: flex;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-full .nav-link {
        /*color: var(--wb-nav-menu-mobile-link-color, #212529);*/
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-full .nav-link:hover,
    .nav-menu-breakpoint-md.nav-menu-mobile-full .nav-link:focus-visible {
        /*color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);*/
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-full .nav-submenu {
        position: static;
        display: block;
        min-width: 0;
        padding: 8px 0 0 12px;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 992px) {
    .nav-menu-breakpoint-lg:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
        background-color: transparent;
        isolation: isolate;
    }

    .nav-menu-breakpoint-lg:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        pointer-events: none;
        background-color: var(--wb-nav-menu-mobile-background, #ffffff);
        border-radius: inherit;
        opacity: var(--wb-nav-menu-mobile-background-opacity, 1);
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-full .mobile-toggle-btn {
        display: flex;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-list {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        box-sizing: border-box;
        width: 100vw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        overflow-y: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: max(var(--wb-nav-menu-mobile-padding, 18px), 72px) var(--wb-nav-menu-mobile-padding, 18px) var(--wb-nav-menu-mobile-padding, 18px);
        border-radius: 0;
        box-shadow: none;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-full.is-open .nav-list {
        display: flex;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-full.is-open .mobile-nav-close-btn {
        display: flex;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-link {
        color: var(--wb-nav-menu-mobile-link-color, #212529);
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-link:hover,
    .nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-link:focus-visible {
        color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-submenu {
        position: static;
        display: block;
        min-width: 0;
        padding: 8px 0 0 12px;
        background: transparent;
        box-shadow: none;
    }
}

/* Optionale Aufdeck-Animation der mobilen Navigation. */
.nav-menu-animation-direction-right {
    --wb-nav-menu-mobile-closed-clip: inset(0 100% 0 0);
}

.nav-menu-animation-direction-left {
    --wb-nav-menu-mobile-closed-clip: inset(0 0 0 100%);
}

.nav-menu-animation-direction-down {
    --wb-nav-menu-mobile-closed-clip: inset(0 0 100% 0);
}

.nav-menu-animation-direction-up {
    --wb-nav-menu-mobile-closed-clip: inset(100% 0 0 0);
}

@media (max-width: 576px) {
    .nav-menu-breakpoint-sm.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
        display: flex;
        visibility: hidden;
        pointer-events: none;
        clip-path: var(--wb-nav-menu-mobile-closed-clip, inset(0 0 100% 0));
        transition:
            clip-path var(--wb-nav-menu-mobile-animation-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear var(--wb-nav-menu-mobile-animation-duration, 350ms);
        will-change: clip-path;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full).is-open .nav-list {
        visibility: visible;
        pointer-events: auto;
        clip-path: inset(0);
        transition-delay: 0s;
    }
}

@media (max-width: 768px) {
    .nav-menu-breakpoint-md.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
        display: flex;
        visibility: hidden;
        pointer-events: none;
        clip-path: var(--wb-nav-menu-mobile-closed-clip, inset(0 0 100% 0));
        transition:
            clip-path var(--wb-nav-menu-mobile-animation-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear var(--wb-nav-menu-mobile-animation-duration, 350ms);
        will-change: clip-path;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full).is-open .nav-list {
        visibility: visible;
        pointer-events: auto;
        clip-path: inset(0);
        transition-delay: 0s;
    }
}

@media (max-width: 992px) {
    .nav-menu-breakpoint-lg.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
        display: flex;
        visibility: hidden;
        pointer-events: none;
        clip-path: var(--wb-nav-menu-mobile-closed-clip, inset(0 0 100% 0));
        transition:
            clip-path var(--wb-nav-menu-mobile-animation-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear var(--wb-nav-menu-mobile-animation-duration, 350ms);
        will-change: clip-path;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full).is-open .nav-list {
        visibility: visible;
        pointer-events: auto;
        clip-path: inset(0);
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu-mobile-animate.nav-menu-animation-spread .nav-list {
        transition: none !important;
    }
}

/* Zeilenabstand, Ausrichtung und optionale Trennlinien der mobilen Navigation. */
@media (max-width: 576px) {
    .nav-menu-breakpoint-sm.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
    .nav-menu-breakpoint-sm.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
    .nav-menu-breakpoint-sm.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        box-sizing: border-box;
        width: 100%;
        margin-block: var(--wb-nav-menu-mobile-gap, 12px);
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: left;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: center;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: right;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-separators .nav-list > .nav-item {
        box-sizing: border-box;
        width: 100%;
    }

    .nav-menu-breakpoint-sm.nav-menu-mobile-separators .nav-list > .nav-item:not(:last-child)::after {
        position: absolute;
        inset-inline: 0;
        bottom: calc(0px - var(--wb-nav-menu-mobile-gap, 12px));
        height: 0;
        content: "";
        pointer-events: none;
        border-block-start-width: var(--wb-nav-menu-mobile-separator-width, 1px);
        border-block-start-style: var(--wb-nav-menu-mobile-separator-style, solid);
        border-block-start-color: var(--wb-nav-menu-mobile-separator-color, #dee2e6);
    }
}

@media (max-width: 768px) {
    .nav-menu-breakpoint-md.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
    .nav-menu-breakpoint-md.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
    .nav-menu-breakpoint-md.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        box-sizing: border-box;
        width: 100%;
        margin-block: var(--wb-nav-menu-mobile-gap, 12px);
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: left;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: center;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: right;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-separators .nav-list > .nav-item {
        box-sizing: border-box;
        width: 100%;
    }

    .nav-menu-breakpoint-md.nav-menu-mobile-separators .nav-list > .nav-item:not(:last-child)::after {
        position: absolute;
        inset-inline: 0;
        bottom: calc(0px - var(--wb-nav-menu-mobile-gap, 12px));
        height: 0;
        content: "";
        pointer-events: none;
        border-block-start-width: var(--wb-nav-menu-mobile-separator-width, 1px);
        border-block-start-style: var(--wb-nav-menu-mobile-separator-style, solid);
        border-block-start-color: var(--wb-nav-menu-mobile-separator-color, #dee2e6);
    }
}

@media (max-width: 992px) {
    .nav-menu-breakpoint-lg.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
    .nav-menu-breakpoint-lg.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
    .nav-menu-breakpoint-lg.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        box-sizing: border-box;
        width: 100%;
        margin-block: var(--wb-nav-menu-mobile-gap, 12px);
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: left;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: center;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
        text-align: right;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-separators .nav-list > .nav-item {
        box-sizing: border-box;
        width: 100%;
    }

    .nav-menu-breakpoint-lg.nav-menu-mobile-separators .nav-list > .nav-item:not(:last-child)::after {
        position: absolute;
        inset-inline: 0;
        bottom: calc(0px - var(--wb-nav-menu-mobile-gap, 12px));
        height: 0;
        content: "";
        pointer-events: none;
        border-block-start-width: var(--wb-nav-menu-mobile-separator-width, 1px);
        border-block-start-style: var(--wb-nav-menu-mobile-separator-style, solid);
        border-block-start-color: var(--wb-nav-menu-mobile-separator-color, #dee2e6);
    }
}

/* source: /app/components/TextBlock/TextBlock.css */
/* /app/components/TextBlock/TextBlock.css */

.text-block-wrapper {
  /* Nutzt die Standard-Textfarbe */
  color: var(--color-text);
  padding: 0px 0px;
}

:where(.text-block-wrapper.wb-responsive-text) {
  font-size: var(--font-size-body, inherit);
  font-weight: var(--font-weight-body, inherit);
  letter-spacing: var(--letter-spacing-body, inherit);
}

/* Die WYSIWYG-Bold-Markierung muss ein konkretes Schriftgewicht erhalten.
   Das Browser-Keyword "bolder" kann bei einem Body-Gewicht von 300 auf 400
   fallen und dadurch optisch dem ersatzweise geladenen Regular-Schnitt
   entsprechen. Themes können das Zielgewicht weiterhin zentral anpassen. */
.text-block-wrapper b,
.text-block-wrapper strong {
  font-weight: var(--font-weight-bold, 700);
}

/* Innerhalb einer Container-Spalte darf "boxed" nicht erneut den globalen
   Seitenabstand abziehen. Der Text nutzt seine natürliche Breite und bricht
   erst um, wenn die verfügbare Spaltenbreite erreicht ist. */
.container-col > .text-block-wrapper.layout-boxed {
  width: auto;
  max-width: 100%;
  margin-inline: 0;
}

.text-block-wrapper .subtitle {
  /* Unwichtigere Texte nutzen die abgeschwächte Farbe */
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* --- DIE MODIFIER FÜR DIE AUSRICHTUNG --- */

.text-block-wrapper.align-left {
  --wb-align-desktop: left;
}

.text-block-wrapper.align-center {
  --wb-align-desktop: center;
}

.text-block-wrapper.align-right {
  --wb-align-desktop: right;
}

@media (max-width: 991.98px) {
  :where(.text-block-wrapper.wb-responsive-text) {
    font-size: var(--font-size-body, inherit);
  }
}

@media (max-width: 767.98px) {
  :where(.text-block-wrapper.wb-responsive-text) {
    font-size: var(--font-size-body, inherit);
  }
}

/* Optionale Ausnahmen von den globalen Linkvorgaben aus base.css. */
.text-block-wrapper.wb-text-links-inherit-color a,
.text-block-wrapper.wb-text-links-inherit-color a:hover,
.text-block-wrapper.wb-text-links-inherit-color a:focus-visible {
  color: inherit;
}

.text-block-wrapper.wb-text-links-no-hover-underline a:hover {
  text-decoration: none;
}

/* Inline-Icons sitzen wie ein Schriftzeichen in der Textzeile. Groesse und
   Farbe werden vom streng validierten Server-Renderer gesetzt. */
.text-block-wrapper .wb-inline-svg-icon {
  color: var(--wb-inline-svg-color, inherit);
  display: inline-block;
  flex: 0 0 auto;
  height: var(--wb-inline-svg-size, 1em);
  line-height: 1;
  overflow: visible;
  vertical-align: -0.125em;
  width: var(--wb-inline-svg-size, 1em);
}

.text-block-wrapper .wb-inline-svg-icon > svg {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%;
}

.text-block-wrapper .wb-inline-svg-icon--fill > svg {
  fill: currentColor;
}

.text-block-wrapper .wb-inline-svg-icon--fill > svg [fill]:not([fill="none"]):not([fill="transparent"]) {
  fill: currentColor !important;
}

.text-block-wrapper .wb-inline-svg-icon--fill > svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
  stroke: currentColor !important;
}

.text-block-wrapper .wb-inline-svg-icon--stroke > svg {
  fill: none;
  stroke: currentColor;
}

.text-block-wrapper .wb-inline-svg-icon--stroke > svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
  stroke: currentColor !important;
}

/* source: /public/assets/base.css */
/* ==========================================================================
   1. BOX-SIZING & GRUNDLAGEN (Überlebenswichtig für Pagebuilder!)
   ========================================================================== */
/* Versteckt die Warnung, wenn die CSS-Datei erfolgreich geladen wurde */
.css-debugger {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/*Globale Randabstand aller Boxed-Elemente*/
:root {
  --layout-page-gap: 40px;

  /* Mobile Navigation: neutrale Systemwerte fuer alle Themes */
  --wb-nav-menu-mobile-width: 250px;
  --wb-nav-menu-mobile-gap: 12px;
  --wb-nav-menu-mobile-padding: 18px;
  --wb-nav-menu-mobile-background: #ffffff;
  --wb-nav-menu-mobile-background-opacity: 1;
  --wb-nav-menu-mobile-link-color: #212529;
  --wb-nav-menu-mobile-link-hover-color: #0055ff;
  --wb-nav-menu-mobile-toggle-color: #212529;
  --wb-nav-menu-mobile-border-radius: 8px;
  --wb-nav-menu-mobile-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  --wb-nav-menu-mobile-separator-color: #dee2e6;
  --wb-nav-menu-mobile-separator-width: 1px;
  --wb-nav-menu-mobile-separator-style: solid;
  /* links: 0 auto | zentriert: auto | rechts: auto 0 */
  --wb-nav-menu-mobile-toggle-margin-inline: auto 0;
  --wb-nav-menu-mobile-panel-margin-inline: auto 0;
}

/*
 * Webbase Responsive-Vertrag
 * --------------------------
 * Desktop:    ab 992px
 * Tablet:     768px bis 991.98px
 * Smartphone: bis 767.98px
 *
 * Komponenten geben nur CSS-Variablen aus. Alignment wird hier zentral
 * ausgewertet; manuelle Fontgroessen gewinnen nur, wenn eine Instanz sie
 * inline als --wb-font-size-* setzt.
 */
.wb-responsive-text {
  text-align: var(--wb-align-desktop, inherit);
}

.wb-responsive-text[style*="--wb-font-size-desktop"] {
  font-size: var(--wb-font-size-desktop);
}

.wb-responsive-width {
  max-width: var(--wb-max-width-desktop, 100%);
}

/*
 * Responsive Spaltensteuerung fuer DefaultContainer. Die Kombination aus
 * Element- und Modusklasse ist absichtlich spezifischer als die Basisregeln
 * in DefaultContainer.css, das nach base.css geladen wird.
 */
.default-container.wb-columns-break-none,
.default-container.wb-columns-break-tablet,
.default-container.wb-columns-break-mobile,
.wb-loop-anim-target.wb-columns-break-none,
.wb-loop-anim-target.wb-columns-break-tablet,
.wb-loop-anim-target.wb-columns-break-mobile {
  flex-wrap: nowrap;
}

/*OLD: 991.98px*/
@media (max-width: 991.98px) {
  .wb-responsive-text {
    text-align: var(--wb-align-tablet, var(--wb-align-desktop, inherit));
  }

  .wb-responsive-text[style*="--wb-font-size-desktop"],
  .wb-responsive-text[style*="--wb-font-size-tablet"] {
    font-size: var(--wb-font-size-tablet, var(--wb-font-size-desktop));
  }

  .wb-responsive-width {
    max-width: var(--wb-max-width-tablet, var(--wb-max-width-desktop, 100%));
  }

  .default-container.wb-columns-break-tablet,
  .wb-loop-anim-target.wb-columns-break-tablet {
    flex-direction: column;
  }

  .default-container.wb-columns-break-tablet > .container-col,
  .wb-loop-anim-target.wb-columns-break-tablet > .container-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    /* Gestapelte Spalten brauchen wieder min-height: auto, sonst kollabiert
       die Höhe (flex-basis: 0 aus Desktop-Verhältnis-Regeln) und der Inhalt
       überlappt optisch mit der nächsten Sektion darunter. */
    min-height: auto !important;
    min-width: auto !important;
  }
}

@media (max-width: 767.98px) {
  .wb-responsive-text {
    text-align: var(--wb-align-mobile, var(--wb-align-tablet, var(--wb-align-desktop, inherit)));
  }

  .wb-responsive-text[style*="--wb-font-size-desktop"],
  .wb-responsive-text[style*="--wb-font-size-tablet"],
  .wb-responsive-text[style*="--wb-font-size-mobile"] {
    font-size: var(--wb-font-size-mobile, var(--wb-font-size-tablet, var(--wb-font-size-desktop)));
  }

  .wb-responsive-width {
    max-width: var(--wb-max-width-mobile, var(--wb-max-width-tablet, var(--wb-max-width-desktop, 100%)));
  }

  .default-container.wb-columns-break-mobile,
  .wb-loop-anim-target.wb-columns-break-mobile {
    flex-direction: column;
  }

  .default-container.wb-columns-break-mobile > .container-col,
  .wb-loop-anim-target.wb-columns-break-mobile > .container-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: auto !important;
    min-width: auto !important;
  }
}

/* Standard: Auf 1200px begrenzen und mittig zentrieren */
.layout-boxed {
  width: min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px)));
  max-width: var(--layout-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.layout-boxed:not(.layout-full) {
  width: min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px)));
  max-width: var(--layout-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.site-content > .layout-boxed:not(.layout-full) {
  width: 100%;
}

/* Fullscreen: Nimmt den gesamten Platz ein */
.layout-full {
  width: 100%;
  max-width: 100%;
}

/* Das ist der Haupt-Container in deiner master.php, der alle Komponenten umschließt */
.site-content {
  display: grid;
  /* Bezugsrahmen für absolut positionierte Top-Level-Instanzen (z.B. AnimatedBgContainer
     direkt auf Seitenebene, ohne umgebenden Container) - siehe deren CSS. */
  position: relative;
  /* 
	 Die geniale 3-Spalten-Formel: 
     1fr = flexibler Rand links
     min(...) = Die Mitte ist maximal 1200px breit, auf Handys 100% minus 40px Rand
     1fr = flexibler Rand rechts
  */
  grid-template-columns: 
    1fr 
    min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px))) 
    1fr;
}

/* REGEL 1: ALLE direkten Kinder landen standardmäßig in der mittleren (2.) Spalte! */
.site-content > * {
  grid-column: 2;
}

/* REGEL 2: Nur Komponenten mit dieser Klasse dürfen von Rand zu Rand (Spalte 1 bis Ende) gehen! */
.site-content > .layout-full {
  grid-column: 1 / -1;
}

.site-header {
  position: relative;
  z-index: var(--site-header-z-index, 10001);
}

.site-header-info {
  position: relative;
  z-index: var(--site-header-info-z-index, 10000);
}

.site-header--sticky {
  position: sticky;
  top: var(--site-header-sticky-top, 0px);
  right: 0;
  left: 0;
  width: 100%;
}

.site-header--overlay {
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
}

.site-header-overlay-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.site-header-overlay-stack > .site-header,
.site-header-overlay-stack > main {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
}

.site-header-overlay-stack > .site-header {
  align-self: start;
}

.site-header--background-blur {
  -webkit-backdrop-filter: blur(var(--site-header-background-blur, 12px));
  backdrop-filter: blur(var(--site-header-background-blur, 12px));
}

.site-header--background-transparent {
  background: transparent;
}

.site-header--fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
}


/* Sorgt dafür, dass Rahmen (Border) und Innenabstände (Padding) 
   die Elemente nicht breiter machen als definiert. 
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*Test*/

/* Entfernt Standard-Abstände aller gängigen HTML-Elemente */
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* Sanftes Scrollen für Anker-Links (z.B. von Navigation zu Sektion) */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   2. BODY & GLOBALE TYPOGRAFIE
   ========================================================================== */

body {
  /* Wir greifen hier auf unsere Theme-Variablen zu!
     Falls die Datenbank nichts liefert, nutzen wir moderne Systemschriften als Fallback.
  */
  font-family: var(--font-primary, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  color: var(--color-text, #1a1a1a);
  background-color: var(--color-bg, #ffffff);
  
  /* Bessere Lesbarkeit für Texte */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Verhindert horizontales Scrollen, falls ein Element ausbricht */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* Überschriften heben sich oft optisch ab */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-header, var(--font-primary, sans-serif));
  line-height: 1.2;
  font-weight: bold;
  /* Kleiner Standard-Abstand nach unten, den Komponenten überschreiben können */
  margin-bottom: 0.5em; 
}

h1 { font-family: var(--font-header-h1, var(--font-header, var(--font-primary, sans-serif))); }
h2 { font-family: var(--font-header-h2, var(--font-header, var(--font-primary, sans-serif))); }
h3 { font-family: var(--font-header-h3, var(--font-header, var(--font-primary, sans-serif))); }
h4 { font-family: var(--font-header-h4, var(--font-header, var(--font-primary, sans-serif))); }
h5 { font-family: var(--font-header-h5, var(--font-header, var(--font-primary, sans-serif))); }
h6 { font-family: var(--font-header-h6, var(--font-header, var(--font-primary, sans-serif))); }

.font-highlight {
  font-family: var(--font-highlight, var(--font-primary, sans-serif));
}

/* ==========================================================================
   3. MEDIA SAFEGUARDS (Bilder & Videos bändigen)
   ========================================================================== */

/* Verhindert, dass Bilder oder Videos über ihre Container (Spalten/Rows) 
   hinausragen. Sie passen sich maximal der Breite an. 
*/
img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   4. FORMULARE & BUTTONS
   ========================================================================== */

/* Buttons und Inputs erben im Browser standardmäßig KEINE Schriften. 
   Hiermit zwingen wir sie dazu, sich dem Theme anzupassen. 
*/
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button, 
[role="button"] {
  cursor: pointer;
}

/* Verhindert, dass Textareas über das Layout hinausgezogen werden können */
textarea {
  resize: vertical;
}

/* ==========================================================================
   5. LISTEN & LINKS
   ========================================================================== */

/* Entfernt Standard-Punkte von Listen, wenn sie keine normale Text-Liste sind */
ul[class],
ol[class] {
  list-style: none;
}

/* Links bekommen standardmäßig die Theme-Primärfarbe (falls nicht anders definiert) */
a {
  color: var(--primary-color, #0055ff);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   6. ACCESSIBILITY (Barrierefreiheit) & UTILITIES
   ========================================================================== */

/* Respektiert das HTML5 [hidden] Attribut (sonst wird es oft von CSS überschrieben) */
[hidden] {
  display: none !important;
}

/* Respektiert Nutzer, die in ihrem Betriebssystem "Animationen reduzieren" aktiviert haben */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.legal-document-content {
  width: min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px)));
  max-width: var(--layout-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 0 3rem;
}

.legal-document-content h1,
.legal-document-content h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.legal-document-content p {
  margin-bottom: 1rem;
}

/*DEBUG FRAME**********************************/
/*
.default-container {
    border: 3px solid red !important;
}
.cover-component-wrapper {
    border: 3px solid blue !important;
}*/

/* source: /app/themes/zen-silence/theme.css */
/* /app/themes/sushi-express/theme.css */

:root {
	
  --layout-max-width: 1200px;
  /* ==========================================================================
     1. PRIMÄRFARBEN (Die Marken-Identität)
     Einsatz: Haupt-Buttons, wichtige Links, Header-Hintergrund
     ========================================================================== */
  --color-primary: #e63946;
  --color-primary-alt: #d62828; /* Meistens etwas dunkler für Button-Hover-Effekte */

  /* ==========================================================================
     2. SEKUNDÄRFARBEN (Die unterstützende Identität)
     Einsatz: Zweite Button-Art ("Abbrechen"), Footer-Hintergrund, Rahmen
     ========================================================================== */
  --color-secondary: #457b9d;
  --color-secondary-alt: #1d3557;

  /* ==========================================================================
     3. AKZENTFARBEN (Der Blickfang)
     Einsatz: Badges, Icons, Checkboxen, Call-to-Action Details
     ========================================================================== */
  --color-accent: #CCB889;
  --color-accent-alt: #e76f51;

  /* ==========================================================================
     4. HINTERGRUNDFARBEN (Die Leinwand)
     Einsatz: Body-Background, Sections, Cards
     ========================================================================== */
  --color-bg: #000000; /* Ein sehr helles Grau ist oft besser als reines Weiß */
  --color-bg-alt: #252525; /* Für Boxen/Cards, die auf dem grauen Body liegen */

  /* ==========================================================================
     5. TEXTFARBEN (Lesbarkeit)
     Einsatz: Fließtext, Überschriften, Meta-Daten
     ========================================================================== */
  --color-text: #ffffff; /* Ein weiches, dunkles Anthrazit (reines #000 ist zu hart für die Augen) */
  --color-text-muted: #454545; /* Grau für Untertitel, Datumsangaben, Platzhalter */
	
  /* FONTSSSSSSS  ==========================================================================*/
  --font-primary: 'DM Sans', sans-serif;
  --font-header: 'Sora', sans-serif;
  --font-highlight: 'Sora', cursive;
	  
  /* 3. Spezifische Überschriften (Optional, hier nur als Beispiel für h1 aktiviert) */
  --font-header-h1: 'Sora', sans-serif;
  --font-header-h2:  'Sora', sans-serif;
  /* --font-header-h3: ... */
  
	/* TYPO **********/
	--font-size-body: 14px;
	--font-size-h1: 36px;
	--font-size-h2: 24px;
	--font-weight-body: 300;
	--font-weight-heading: 500;
	--letter-spacing-heading: 0.06em;
	--letter-spacing-body: 0.06em;

  /* Mobile Navigation: Theme-Ebene (ueberschreibt public/assets/base.css) */
  --wb-nav-menu-mobile-width: 250px;
  --wb-nav-menu-mobile-gap: 12px;
  --wb-nav-menu-mobile-padding: 18px;
  --wb-nav-menu-mobile-background: var(--color-bg-alt);
  --wb-nav-menu-mobile-background-opacity: 1;
  --wb-nav-menu-mobile-link-color: var(--color-text);
  --wb-nav-menu-mobile-link-hover-color: var(--color-primary);
  --wb-nav-menu-mobile-toggle-color: var(--color-text);
  --wb-nav-menu-mobile-border-radius: 8px;
  --wb-nav-menu-mobile-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  --wb-nav-menu-mobile-separator-color: var(--color-text-muted);
  --wb-nav-menu-mobile-separator-width: 1px;
  --wb-nav-menu-mobile-separator-style: solid;
  /* links: 0 auto | zentriert: auto | rechts: auto 0 */
  --wb-nav-menu-mobile-toggle-margin-inline: auto 0;
  --wb-nav-menu-mobile-panel-margin-inline: auto 0;
	
}

background-color: var(--color-bg);
body {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	letter-spacing: var(--letter-spacing-body);
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-heading);
	letter-spacing: var(--letter-spacing-heading);
	
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-heading);
	letter-spacing: var(--letter-spacing-heading);
	
}

.nav-item a:hover {
	text-underline-offset: 5px;
	color: var(--color-accent);

}

/* Button Style START **********************************************/

.btn-component {
	border-radius: 0px;
	border-color: var(--color-text);
	border-style: solid;
	border-width: 1px;
	background-color: transparent;
	font-weight: var(--font-weight-heading);
	font-family: var(--font-primary);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}


/* Button Style END ************************************************/


/* Image Style START **********************************************/

.image-component-wrapper {
	border-radius: 0px;
}

/* Image Style END ************************************************/