@charset "UTF-8";
/* ==========================================================================
   screenfox – Elemente-Module (19–28) und Erweiterungen der Module 04, 07, 08, 09, 11
   Gestaltung nach den Canvas-Beispielen, eigene Umsetzung. Alle Farbpaare mit Kontrast ≥ 4,5:1 (Text)
   bzw. ≥ 3:1 (Icons, große Schrift, Bedienelemente) in Hell und Dunkel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Farbtöne (sfx-tone--*): Fläche, Text auf der Fläche, Ton als Schrift-/Iconfarbe
   -------------------------------------------------------------------------- */
.sfx-tone--accent { --sfx-tone: #c8331f; --sfx-tone-on: #ffffff; --sfx-tone-fg: #9c2416; --sfx-tone-icon: #e34735; --sfx-tone-soft: #fdecea; }
.sfx-tone--dark   { --sfx-tone: #2f3338; --sfx-tone-on: #ffffff; --sfx-tone-fg: #2f3338; --sfx-tone-icon: #2f3338; --sfx-tone-soft: #eceef0; }
.sfx-tone--blue   { --sfx-tone: #1d5fbf; --sfx-tone-on: #ffffff; --sfx-tone-fg: #1a56ad; --sfx-tone-icon: #1d5fbf; --sfx-tone-soft: #e7f0fc; }
.sfx-tone--green  { --sfx-tone: #1f7a4d; --sfx-tone-on: #ffffff; --sfx-tone-fg: #1b6d45; --sfx-tone-icon: #1f7a4d; --sfx-tone-soft: #e5f4ec; }
.sfx-tone--amber  { --sfx-tone: #f2b01e; --sfx-tone-on: #241a00; --sfx-tone-fg: #7f5200; --sfx-tone-icon: #b77a00; --sfx-tone-soft: #fff5d9; }
.sfx-tone--purple { --sfx-tone: #6d3fc0; --sfx-tone-on: #ffffff; --sfx-tone-fg: #6237b0; --sfx-tone-icon: #6d3fc0; --sfx-tone-soft: #f0eafb; }
.sfx-tone--teal   { --sfx-tone: #0f766e; --sfx-tone-on: #ffffff; --sfx-tone-fg: #0d6b64; --sfx-tone-icon: #0f766e; --sfx-tone-soft: #e2f4f2; }
[data-bs-theme="dark"] .sfx-tone--accent { --sfx-tone-fg: #f08a7e; --sfx-tone-soft: #3a2422; }
[data-bs-theme="dark"] .sfx-tone--dark   { --sfx-tone: #4a5057; --sfx-tone-fg: #d6d9db; --sfx-tone-icon: #c9cdd1; --sfx-tone-soft: #2b2f33; }
[data-bs-theme="dark"] .sfx-tone--blue   { --sfx-tone-fg: #8db8ff; --sfx-tone-icon: #6aa1ff; --sfx-tone-soft: #1d2a3d; }
[data-bs-theme="dark"] .sfx-tone--green  { --sfx-tone-fg: #74d3a2; --sfx-tone-icon: #4fbf86; --sfx-tone-soft: #1c3127; }
[data-bs-theme="dark"] .sfx-tone--amber  { --sfx-tone-fg: #f5c451; --sfx-tone-icon: #f2b01e; --sfx-tone-soft: #3a3016; }
[data-bs-theme="dark"] .sfx-tone--purple { --sfx-tone-fg: #bba1ff; --sfx-tone-icon: #a383f2; --sfx-tone-soft: #2c2440; }
[data-bs-theme="dark"] .sfx-tone--teal   { --sfx-tone-fg: #63d0c5; --sfx-tone-icon: #39b5a9; --sfx-tone-soft: #17302e; }
.sfx-on-dark .sfx-tone--accent, .sfx-on-dark.sfx-tone--accent { --sfx-tone-fg: #ffb3a9; }
.sfx-bg-dark [class*="sfx-tone--"] { --sfx-tone-fg: #ffffff; }

/* Bildformate */
.sfx-ratio--4x3 { --sfx-ratio: 4 / 3; }
.sfx-ratio--1x1 { --sfx-ratio: 1 / 1; }
.sfx-ratio--3x2 { --sfx-ratio: 3 / 2; }
.sfx-ratio--16x9 { --sfx-ratio: 16 / 9; }
.sfx-ratio--21x9 { --sfx-ratio: 21 / 9; }
.sfx-ratio--3x4 { --sfx-ratio: 3 / 4; }

/* Kartenfläche: eigene Farben, auch auf dunklen Sections lesbar */
.sfx-carousel__card, .sfx-counters--card .sfx-counter, .sfx-counters--bordered .sfx-counter, .sfx-counters--horizontal .sfx-counter,
.sfx-countdown--card .sfx-countdown__item, .sfx-countdown--bordered .sfx-countdown__item, .sfx-readmore--frame-card, .sfx-readmore--frame-bordered,
.sfx-readmore--frame-accent, .sfx-logos--card .sfx-logos__item, .sfx-logos--tagline .sfx-logos__item, .sfx-iconboxes--bordered .sfx-iconbox, .sfx-iconboxes--media .sfx-iconbox {
  --bs-heading-color: var(--sfx-heading);
  color: var(--sfx-text);
}
.sfx-bg-dark .sfx-carousel__card :is(h2, h3, h4), .sfx-bg-accent .sfx-carousel__card :is(h2, h3, h4),
.sfx-bg-dark .sfx-iconboxes--bordered .sfx-iconbox :is(h2, h3, h4), .sfx-bg-dark .sfx-iconboxes--media .sfx-iconbox :is(h2, h3, h4),
.sfx-bg-dark .sfx-readmore[class*="frame-"]:not(.sfx-readmore--frame-none) :is(h2, h3, h4) { color: var(--sfx-heading); }
.sfx-bg-dark .sfx-carousel__card a:not(.btn), .sfx-bg-accent .sfx-carousel__card a:not(.btn),
.sfx-bg-dark .sfx-iconboxes--bordered .sfx-iconbox a:not(.btn), .sfx-bg-dark .sfx-iconboxes--media .sfx-iconbox a:not(.btn) { color: var(--sfx-heading); }

/* --------------------------------------------------------------------------
   1. Karussell (Modul 19, Icon-Boxen- und Logo-Karussell)
   -------------------------------------------------------------------------- */
.sfx-carousel { --sfx-per: var(--sfx-per-xs, 1); --sfx-gap: 1.5rem; position: relative; }
@media (min-width: 576px) { .sfx-carousel { --sfx-per: var(--sfx-per-md, 2); } }
@media (min-width: 992px) { .sfx-carousel { --sfx-per: var(--sfx-per-lg, 4); } }
.sfx-carousel__track {
  display: flex;
  gap: var(--sfx-gap);
  margin: 0;
  padding: .25rem .125rem 1rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .125rem;
  scrollbar-width: thin;
}
.sfx-carousel__track:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; }
.sfx-carousel.is-enhanced .sfx-carousel__track { scrollbar-width: none; }
.sfx-carousel.is-enhanced .sfx-carousel__track::-webkit-scrollbar { display: none; }
.sfx-carousel__item {
  flex: 0 0 calc((100% - (var(--sfx-per) - 1) * var(--sfx-gap)) / var(--sfx-per));
  min-width: 0;
  scroll-snap-align: start;
}
.sfx-carousel__controls { display: none; align-items: center; justify-content: center; gap: .5rem; margin-top: .25rem; }
.sfx-carousel.is-enhanced .sfx-carousel__controls { display: flex; }
.sfx-carousel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--sfx-border); border-radius: 50%;
  background: var(--sfx-main-bg); color: var(--sfx-heading);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  transition: background-color .15s, color .15s, border-color .15s;
}
.sfx-carousel__btn:hover:not(:disabled) { border-color: var(--sfx-accent-strong); background: var(--sfx-accent-strong); color: #ffffff; }
.sfx-carousel__btn:disabled { opacity: .45; cursor: default; }
.sfx-carousel__btn[hidden] { display: none; }
.sfx-carousel__btn--prev { order: 1; }
.sfx-carousel__dots { order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .125rem; }
.sfx-carousel__btn--next { order: 3; }
.sfx-carousel__btn--toggle { order: 0; }
.sfx-carousel__dot {
  position: relative; width: 1.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent;
}
.sfx-carousel__dot::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: .625rem; height: .625rem; margin: -.3125rem 0 0 -.3125rem;
  border: 2px solid #767a7e; border-radius: 50%; background: transparent; transition: background-color .15s, transform .15s;
}
.sfx-carousel__dot[aria-current="true"]::before { border-color: var(--sfx-accent-strong); background: var(--sfx-accent-strong); transform: scale(1.15); }
.sfx-carousel__dot:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: -4px; border-radius: 4px; }
.sfx-on-dark .sfx-carousel__dot::before { border-color: #c9cccf; }
.sfx-on-dark .sfx-carousel__dot[aria-current="true"]::before { border-color: #ffffff; background: #ffffff; }

.sfx-carousel__media { position: relative; display: block; overflow: hidden; border-radius: var(--sfx-radius); background: var(--sfx-section-grey-bg); aspect-ratio: var(--sfx-ratio, 4 / 3); }
.sfx-carousel__media img, .sfx-carousel__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.sfx-carousel__media:hover img, a.sfx-carousel__media:focus-visible img, .sfx-carousel__card.is-linked:hover .sfx-carousel__media img { transform: scale(1.05); }
a.sfx-carousel__media:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; }
.sfx-carousel__zoom, .sfx-gallery__zoom {
  position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #ffffff; opacity: 0; transition: opacity .2s;
}
a:hover > .sfx-carousel__zoom, a:focus-visible > .sfx-carousel__zoom { opacity: 1; }
.sfx-carousel__zoom-link {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #ffffff !important;
}
.sfx-carousel__zoom-link:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.sfx-carousel__caption { margin-top: .5rem; color: var(--sfx-text-muted); font-size: .875rem; }
.sfx-carousel__figure { margin: 0; }

.sfx-carousel__card { position: relative; display: flex; flex-direction: column; height: 100%; }
.sfx-carousel--posts .sfx-carousel__card, .sfx-carousel--products .sfx-carousel__card { background: transparent; }
.sfx-carousel--events .sfx-carousel__card {
  padding: 1.5rem; border: 1px solid var(--sfx-border); border-radius: calc(var(--sfx-radius) * 3);
  background: var(--sfx-main-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.sfx-carousel--events .sfx-carousel__media { margin: -1.5rem -1.5rem 1.25rem; border-radius: calc(var(--sfx-radius) * 3) calc(var(--sfx-radius) * 3) 0 0; }
.sfx-carousel__body { padding-top: .875rem; }
.sfx-carousel--events .sfx-carousel__body { padding-top: 0; }
.sfx-carousel__title { margin: 0 0 .25rem; font-size: 1.125rem; line-height: 1.3; }
.sfx-carousel--events .sfx-carousel__title { font-size: 1.375rem; }
.sfx-carousel__title a { color: var(--sfx-heading); text-decoration: none; }
.sfx-carousel__card.is-linked:hover .sfx-carousel__title a, .sfx-carousel__title a:focus-visible { color: var(--sfx-link-hover); text-decoration: underline; }
.sfx-carousel__title a.stretched-link:focus-visible { outline: none; }
.sfx-carousel__title a.stretched-link:focus-visible::after { outline: 3px solid var(--sfx-focus); outline-offset: 3px; border-radius: var(--sfx-radius); }
.sfx-carousel__meta, .sfx-carousel__date, .sfx-carousel__place { margin: 0 0 .5rem; color: var(--sfx-text-muted); font-size: .875rem; }
.sfx-carousel__date { color: var(--sfx-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.sfx-carousel__text { margin: .5rem 0; font-size: .9375rem; }
.sfx-carousel__more { margin-top: auto; color: var(--sfx-link); font-size: .875rem; font-weight: 600; }
.sfx-carousel__badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 1; padding: .25rem .5rem; border-radius: var(--sfx-radius);
  background: #1f7a4d; color: #ffffff; font-size: .75rem; font-weight: 700;
}
.sfx-carousel--products .sfx-carousel__body { text-align: center; }
.sfx-carousel__rating { margin: 0 0 .25rem; color: #2f3338; font-size: .8125rem; letter-spacing: .1em; }
[data-bs-theme="dark"] .sfx-carousel__rating { color: #eef0f1; }
.sfx-carousel__price { margin: 0; font-size: 1.0625rem; }
.sfx-carousel__price strong { color: var(--sfx-tone-fg, #1b6d45); }
.sfx-carousel--products { --sfx-tone-fg: #1b6d45; }
[data-bs-theme="dark"] .sfx-carousel--products { --sfx-tone-fg: #74d3a2; }
.sfx-carousel__price del { margin-right: .375rem; color: var(--sfx-text-muted); }
.sfx-container-fluid-gap .sfx-carousel__track, .container-fluid > .sfx-carousel .sfx-carousel__track { gap: .5rem; }

/* --------------------------------------------------------------------------
   2. Kaskadierende Bilder (Modul 20)
   -------------------------------------------------------------------------- */
.sfx-cascade { position: relative; width: 100%; aspect-ratio: 5 / 4; }
.sfx-cascade__img { position: absolute; overflow: hidden; border-radius: calc(var(--sfx-radius) * 3); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .22); background: var(--sfx-section-grey-bg); }
.sfx-cascade__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sfx-cascade--stack .sfx-cascade__img--1 { left: 22%; top: 34%; width: 70%; aspect-ratio: 3 / 2; z-index: 3; }
.sfx-cascade--stack .sfx-cascade__img--2 { left: 3%; top: 22%; width: 52%; aspect-ratio: 3 / 2; z-index: 2; }
.sfx-cascade--stack .sfx-cascade__img--3 { left: 30%; top: 2%; width: 44%; aspect-ratio: 3 / 2; z-index: 1; }
.sfx-cascade--stack.sfx-cascade--n1 .sfx-cascade__img--1 { left: 10%; top: 10%; width: 80%; }
.sfx-cascade--pair .sfx-cascade__img--1 { right: 2%; top: 28%; width: 70%; aspect-ratio: 3 / 2; z-index: 2; }
.sfx-cascade--pair .sfx-cascade__img--2 { left: 2%; top: 4%; width: 46%; aspect-ratio: 3 / 2; z-index: 1; }
.sfx-cascade--colorbg .sfx-cascade__bg { position: absolute; left: 4%; top: 6%; width: 66%; height: 64%; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-tone); }
.sfx-cascade--colorbg .sfx-cascade__img--1 { right: 4%; bottom: 6%; width: 72%; aspect-ratio: 3 / 2; }
.sfx-cascade--tinted .sfx-cascade__bg { position: absolute; left: 6%; top: 18%; width: 22%; height: 64%; border-radius: calc(var(--sfx-radius) * 3) 0 0 calc(var(--sfx-radius) * 3); background: var(--sfx-tone); }
.sfx-cascade--tinted .sfx-cascade__img--1 { left: 14%; top: 18%; width: 80%; aspect-ratio: 3 / 2; }
.sfx-cascade-wrap--center { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.sfx-cascade-wrap__text { max-width: 44rem; }
.sfx-cascade--layers { max-width: 46rem; aspect-ratio: 16 / 10; margin-block: 3.5rem 2rem; }
.sfx-cascade--layers .sfx-cascade__img--1 { left: 14%; top: 14%; width: 72%; aspect-ratio: 3 / 2; z-index: 2; }
.sfx-cascade--layers .sfx-cascade__img--2 { left: 0; top: 0; width: 38%; aspect-ratio: 4 / 3; z-index: 3; }
.sfx-cascade--layers .sfx-cascade__img--3 { right: 0; bottom: 0; width: 34%; aspect-ratio: 4 / 3; z-index: 3; }
.sfx-cascade--layers.sfx-cascade--n1 .sfx-cascade__img--1 { left: 10%; width: 80%; }

/* --------------------------------------------------------------------------
   3. Code (Modul 21, Prism)
   -------------------------------------------------------------------------- */
.sfx-code { --sfx-code-bg: #1e2227; --sfx-code-bar: #2a2f36; --sfx-code-text: #e6e8ea; --sfx-code-muted: #a8b0b8; --sfx-code-line: #3b424b;
  --c-comment: #9aa4ae; --c-punct: #c8ccd0; --c-tag: #ff9d8f; --c-attr: #ffd27a; --c-string: #a9e08a; --c-keyword: #d5a6ff; --c-func: #8cc8ff; --c-number: #ffb86c; --c-selector: #7ee0d0; --c-var: #ffcc8a;
  margin: 0; overflow: hidden; border: 1px solid var(--sfx-code-line); border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-code-bg); color: var(--sfx-code-text); }
.sfx-code--light { --sfx-code-bg: #f6f8fa; --sfx-code-bar: #eaeef2; --sfx-code-text: #24292f; --sfx-code-muted: #57606a; --sfx-code-line: #d0d7de;
  --c-comment: #5c6670; --c-punct: #3d444d; --c-tag: #a6250f; --c-attr: #7a4b00; --c-string: #0a5c2b; --c-keyword: #6b2fb3; --c-func: #0b54a6; --c-number: #8a3d00; --c-selector: #0a6159; --c-var: #8a3d00; }
.sfx-code__bar { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .25rem .5rem .25rem 1rem; border-bottom: 1px solid var(--sfx-code-line); background: var(--sfx-code-bar); font-size: .8125rem; }
.sfx-code__title { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--sfx-code-text); }
.sfx-code__lang { color: var(--sfx-code-muted); text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.sfx-code__copy { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.25rem; margin-left: auto; padding: .25rem .75rem; border: 1px solid var(--sfx-code-line); border-radius: var(--sfx-radius); background: transparent; color: var(--sfx-code-text); font-size: .8125rem; }
.sfx-code__copy:hover { background: rgba(127, 127, 127, .18); }
.sfx-code__copy.is-done { border-color: #4fbf86; color: var(--sfx-code-text); }
.sfx-code__copy:focus-visible { outline: 3px solid var(--sfx-focus-on-dark); outline-offset: 2px; }
.sfx-code--light .sfx-code__copy:focus-visible { outline-color: var(--sfx-focus); }
.sfx-code__pre { margin: 0; padding: 1rem 1.25rem; overflow: auto; background: transparent; color: var(--sfx-code-text); font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .875rem; line-height: 1.6; tab-size: 4; }
.sfx-code__pre:focus-visible { outline: 3px solid var(--sfx-focus-on-dark); outline-offset: -3px; }
.sfx-code--light .sfx-code__pre:focus-visible { outline-color: var(--sfx-focus); }
.sfx-code__pre code { font: inherit; color: inherit; white-space: pre; }
.sfx-code + .sfx-figure__caption, .sfx-code .sfx-figure__caption { padding: .75rem 1rem; border-top: 1px solid var(--sfx-code-line); background: var(--sfx-code-bar); color: var(--sfx-code-muted); font-size: .875rem; }
/* Zeilennummern (Prism-Plugin line-numbers) */
.sfx-code__pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; }
.sfx-code__pre.line-numbers > code { position: relative; white-space: inherit; }
.sfx-code .line-numbers .line-numbers-rows { position: absolute; top: 0; left: -3.8em; width: 3em; border-right: 1px solid var(--sfx-code-line); font-size: 100%; letter-spacing: -1px; pointer-events: none; user-select: none; }
.sfx-code .line-numbers-rows > span { display: block; counter-increment: linenumber; }
.sfx-code .line-numbers-rows > span::before { content: counter(linenumber); display: block; padding-right: .8em; color: var(--sfx-code-muted); text-align: right; }
/* Token-Farben */
.sfx-code .token.comment, .sfx-code .token.prolog, .sfx-code .token.doctype, .sfx-code .token.cdata { color: var(--c-comment); font-style: italic; }
.sfx-code .token.punctuation { color: var(--c-punct); }
.sfx-code .token.tag, .sfx-code .token.deleted, .sfx-code .token.important { color: var(--c-tag); }
.sfx-code .token.attr-name, .sfx-code .token.property, .sfx-code .token.constant, .sfx-code .token.symbol { color: var(--c-attr); }
.sfx-code .token.string, .sfx-code .token.char, .sfx-code .token.attr-value, .sfx-code .token.inserted, .sfx-code .token.url { color: var(--c-string); }
.sfx-code .token.keyword, .sfx-code .token.atrule, .sfx-code .token.boolean { color: var(--c-keyword); }
.sfx-code .token.function, .sfx-code .token.class-name { color: var(--c-func); }
.sfx-code .token.number, .sfx-code .token.operator, .sfx-code .token.entity { color: var(--c-number); }
.sfx-code .token.selector, .sfx-code .token.builtin { color: var(--c-selector); }
.sfx-code .token.variable, .sfx-code .token.regex { color: var(--c-var); }
.sfx-code .token.bold { font-weight: 700; }

/* --------------------------------------------------------------------------
   4. Datentabelle (Modul 22)
   -------------------------------------------------------------------------- */
.sfx-dt__tools { display: none; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.sfx-dt.is-enhanced .sfx-dt__tools, .sfx-dt:not([data-sfx-datatable]) .sfx-dt__tools { display: flex; }
.sfx-dt__tools .form-label { margin-bottom: .25rem; font-size: .875rem; font-weight: 600; color: var(--sfx-heading); }
.sfx-dt__size .form-select { width: auto; min-width: 5.5rem; min-height: 2.5rem; }
.sfx-dt__search { margin-left: auto; min-width: min(18rem, 100%); }
.sfx-dt__search .form-control { min-height: 2.5rem; border-color: #8a8e92; }
.sfx-dt__export { min-height: 2.5rem; }
.sfx-dt__caption { caption-side: top; padding: 0 0 .75rem; color: var(--sfx-heading); font-weight: 600; font-size: 1.0625rem; }
.sfx-dt .table { --bs-table-bg: var(--sfx-main-bg); --bs-table-color: var(--sfx-text); --bs-table-border-color: var(--sfx-border); --bs-table-striped-bg: rgba(0, 0, 0, .035); }
[data-bs-theme="dark"] .sfx-dt .table { --bs-table-striped-bg: rgba(255, 255, 255, .04); --bs-table-striped-color: var(--sfx-text); }
.sfx-dt thead th { background: var(--sfx-section-grey-bg); color: var(--sfx-heading); font-weight: 700; vertical-align: bottom; white-space: nowrap; }
.sfx-dt__sort { display: inline-flex; align-items: center; gap: .5rem; width: 100%; min-height: 2rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; }
th.text-end .sfx-dt__sort { justify-content: flex-end; }
.sfx-dt__sort i { color: var(--sfx-text-muted); font-size: .8125rem; }
th[aria-sort] .sfx-dt__sort i { color: var(--sfx-tone-fg, #9c2416); }
[data-bs-theme="dark"] th[aria-sort] .sfx-dt__sort i { color: #f08a7e; }
.sfx-dt__sort:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; border-radius: 2px; }
.sfx-dt__empty td { padding: 1.5rem; color: var(--sfx-text-muted); text-align: center; }
.sfx-dt__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1rem; }
.sfx-dt__info { margin: 0; color: var(--sfx-text-muted); font-size: .875rem; }
.sfx-dt .pagination { --bs-pagination-color: var(--sfx-link); --bs-pagination-hover-color: var(--sfx-link-hover); --bs-pagination-bg: var(--sfx-main-bg); --bs-pagination-border-color: var(--sfx-border); --bs-pagination-hover-bg: var(--sfx-section-grey-bg); --bs-pagination-active-bg: var(--sfx-accent-strong); --bs-pagination-active-border-color: var(--sfx-accent-strong); --bs-pagination-disabled-bg: var(--sfx-main-bg); --bs-pagination-disabled-color: #767a7e; --bs-pagination-focus-box-shadow: 0 0 0 3px var(--sfx-focus); }
.sfx-dt .page-link { min-width: 2.25rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; }
.sfx-dt .table-responsive:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   5. Zähler und Countdown (Modul 23)
   -------------------------------------------------------------------------- */
.sfx-counter { height: 100%; text-align: center; }
.sfx-counter__value { margin: 0; color: var(--sfx-heading); font-family: var(--sfx-font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sfx-counter.has-tone .sfx-counter__value { color: var(--sfx-tone-fg); }
.sfx-on-dark .sfx-counter__value, .sfx-on-dark .sfx-counter.has-tone .sfx-counter__value { color: #ffffff; }
.sfx-counter__affix { font-size: .7em; }
.sfx-counter__label { margin: .375rem 0 0; color: var(--sfx-text-muted); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sfx-on-dark .sfx-counter__label { color: #d6d9db; }
.sfx-counter__icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; color: var(--sfx-tone-icon, var(--sfx-heading)); font-size: 2.25rem; }
.sfx-on-dark .sfx-counter__icon { color: #ffffff; }
.sfx-counters--large .sfx-counter__value { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); }
.sfx-counters--card .sfx-counter { padding: 1.75rem 1rem; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-main-bg); box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.sfx-counters--bordered .sfx-counter { padding: 1.75rem 1rem; border: 2px solid var(--sfx-border); border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-main-bg); }
.sfx-counters--card .sfx-counter__value, .sfx-counters--bordered .sfx-counter__value, .sfx-counters--horizontal .sfx-counter__value { color: var(--sfx-tone-fg, var(--sfx-heading)); }
.sfx-counters--card .sfx-counter__icon, .sfx-counters--bordered .sfx-counter__icon { color: var(--sfx-tone-icon, var(--sfx-heading)); }
.sfx-counters--card .sfx-counter__label, .sfx-counters--bordered .sfx-counter__label, .sfx-counters--horizontal .sfx-counter__label { color: var(--sfx-text-muted); }
.sfx-counters--accent .sfx-counter { padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--sfx-tone, var(--sfx-accent)); text-align: left; }
.sfx-counters--circle .sfx-counter__icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--sfx-tone, var(--sfx-accent-strong)); color: var(--sfx-tone-on, #ffffff); font-size: 1.75rem; }
.sfx-on-dark .sfx-counters--circle .sfx-counter__icon { color: var(--sfx-tone-on, #ffffff); }
.sfx-counters--horizontal .sfx-counter { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-section-grey-bg); text-align: left; }
.sfx-counters--horizontal .sfx-counter__icon { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; margin: 0; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-tone, var(--sfx-accent-strong)); color: var(--sfx-tone-on, #ffffff); font-size: 1.375rem; }
.sfx-counters--horizontal .sfx-counter__value { font-size: 1.75rem; }
.sfx-counters--horizontal .sfx-counter__label { margin-top: .125rem; text-transform: none; letter-spacing: 0; }

.sfx-countdown-wrap { text-align: center; }
.sfx-countdown { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.sfx-countdown[hidden] { display: none; }
.sfx-countdown__item { display: flex; flex-direction: column; align-items: center; min-width: 5.5rem; padding: .5rem 1.25rem; }
.sfx-countdown__value { color: var(--sfx-heading); font-family: var(--sfx-font-display); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sfx-countdown__label { margin-top: .25rem; color: var(--sfx-text-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.sfx-on-dark .sfx-countdown__value { color: #ffffff; }
.sfx-on-dark .sfx-countdown__label { color: #d6d9db; }
.sfx-countdown--default .sfx-countdown__item + .sfx-countdown__item { border-left: 1px solid var(--sfx-border); }
.sfx-countdown--large .sfx-countdown__value { font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4.25rem); }
.sfx-countdown--large .sfx-countdown__item + .sfx-countdown__item { border-left: 1px solid var(--sfx-border); }
.sfx-countdown--inline { display: inline-block; padding: .75rem 1.25rem; border: 1px solid #9ec5fe; border-radius: var(--sfx-radius); background: #e7f1ff; color: #0a3a7a; }
[data-bs-theme="dark"] .sfx-countdown--inline { border-color: #2c4f80; background: #142338; color: #cfe1ff; }
.sfx-countdown--inline .sfx-countdown__item { display: inline; min-width: 0; padding: 0 .375rem 0 0; }
.sfx-countdown--inline .sfx-countdown__value { color: inherit; font-family: inherit; font-size: 1rem; }
.sfx-countdown--inline .sfx-countdown__label { margin: 0; color: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.sfx-countdown--card { gap: .75rem; }
.sfx-countdown--card .sfx-countdown__item { padding: 1rem 1.25rem; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-main-bg); box-shadow: 0 4px 18px rgba(0, 0, 0, .1); }
.sfx-countdown--card .sfx-countdown__value { color: #1b6d45; }
[data-bs-theme="dark"] .sfx-countdown--card .sfx-countdown__value { color: #74d3a2; }
.sfx-countdown--bordered { gap: .75rem; }
.sfx-countdown--bordered .sfx-countdown__item { padding: 1rem 1.25rem; border: 2px solid var(--sfx-border); border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-main-bg); }
.sfx-countdown--bordered .sfx-countdown__value, .sfx-countdown--card .sfx-countdown__label, .sfx-countdown--bordered .sfx-countdown__label { color: inherit; }
.sfx-countdown--bordered .sfx-countdown__value { color: var(--sfx-heading); }
.sfx-countdown--circle { gap: .75rem; }
.sfx-countdown--circle .sfx-countdown__item { justify-content: center; width: 6.5rem; height: 6.5rem; min-width: 0; padding: 0; border: 3px solid #1f7a4d; border-radius: 50%; }
.sfx-countdown--circle .sfx-countdown__value { color: #1b6d45; font-size: 2rem; }
[data-bs-theme="dark"] .sfx-countdown--circle .sfx-countdown__item { border-color: #4fbf86; }
[data-bs-theme="dark"] .sfx-countdown--circle .sfx-countdown__value { color: #74d3a2; }
.sfx-countdown--circle .sfx-countdown__label { font-size: .6875rem; }
.sfx-countdown--minimal { align-items: flex-start; }
.sfx-countdown--minimal .sfx-countdown__value { font-weight: 300; font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); }
.sfx-countdown__sep { padding-top: .5rem; color: var(--sfx-text-muted); font-size: 2rem; line-height: 1; }
.sfx-countdown__done { margin-top: 1rem; }
.sfx-countdown__done-text { font-size: 1.125rem; font-weight: 600; }
@media (max-width: 575.98px) {
  .sfx-countdown__item { min-width: 4.25rem; padding: .5rem .625rem; }
  .sfx-countdown--circle .sfx-countdown__item { width: 5rem; height: 5rem; }
  .sfx-countdown--circle .sfx-countdown__value { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   6. Galerie (Modul 24)
   -------------------------------------------------------------------------- */
.sfx-gallery { --sfx-g: .5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sfx-g); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sfx-gallery { grid-template-columns: repeat(min(var(--sfx-gallery-cols, 3), 4), minmax(0, 1fr)); } }
@media (min-width: 992px) { .sfx-gallery { grid-template-columns: repeat(var(--sfx-gallery-cols, 3), minmax(0, 1fr)); } }
.sfx-gallery--gap-none { --sfx-g: 0; }
.sfx-gallery--gap-m { --sfx-g: 1rem; }
.sfx-gallery__figure { position: relative; height: 100%; margin: 0; }
.sfx-gallery__link { position: relative; display: block; height: 100%; overflow: hidden; background: var(--sfx-section-grey-bg); }
.sfx-gallery--gap-s .sfx-gallery__link, .sfx-gallery--gap-m .sfx-gallery__link { border-radius: var(--sfx-radius); }
.sfx-gallery__img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .45s ease; }
.sfx-gallery--fx-zoom a.sfx-gallery__link:hover .sfx-gallery__img, .sfx-gallery--fx-zoom a.sfx-gallery__link:focus-visible .sfx-gallery__img { transform: scale(1.06); }
a.sfx-gallery__link:hover .sfx-gallery__zoom, a.sfx-gallery__link:focus-visible .sfx-gallery__zoom { opacity: 1; }
a.sfx-gallery__link:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; z-index: 1; }
/* erstes Bild groß */
@media (min-width: 768px) {
  .sfx-gallery--featured .sfx-gallery__item.is-big { grid-column: span 2; grid-row: span 2; }
}
/* Mauerwerk */
.sfx-gallery--masonry { display: block; columns: 2; column-gap: var(--sfx-g); }
@media (min-width: 768px) { .sfx-gallery--masonry { columns: min(var(--sfx-gallery-cols, 3), 4); } }
@media (min-width: 992px) { .sfx-gallery--masonry { columns: var(--sfx-gallery-cols, 3); } }
.sfx-gallery--masonry .sfx-gallery__item { break-inside: avoid; margin-bottom: var(--sfx-g); }
.sfx-gallery--masonry .sfx-gallery__img { height: auto; aspect-ratio: auto; }
/* Bildunterschriften */
.sfx-gallery--cap-below .sfx-gallery__caption { padding: .375rem .125rem 0; color: var(--sfx-text-muted); font-size: .8125rem; }
.sfx-gallery--cap-hover .sfx-gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .75rem .625rem; background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  color: #ffffff; font-size: .8125rem; opacity: 0; transform: translateY(.5rem); transition: opacity .2s, transform .2s; pointer-events: none;
}
.sfx-gallery--cap-hover .sfx-gallery__figure:hover .sfx-gallery__caption,
.sfx-gallery--cap-hover .sfx-gallery__figure:focus-within .sfx-gallery__caption { opacity: 1; transform: none; }
.sfx-gallery--cap-hover .sfx-gallery__zoom { top: .75rem; bottom: auto; }
.sfx-gallery--cap-below .sfx-gallery__figure { height: auto; }

/* --------------------------------------------------------------------------
   7. Bild-Slider (Modul 25)
   -------------------------------------------------------------------------- */
.sfx-islider { position: relative; }
.sfx-islider__slides { margin: 0; padding: 0; list-style: none; }
.sfx-islider__figure { position: relative; margin: 0; }
.sfx-islider__img { display: block; width: 100%; height: 100%; aspect-ratio: var(--sfx-ratio, 16 / 9); object-fit: cover; }
.sfx-islider:not(.is-enhanced) .sfx-islider__slide + .sfx-islider__slide { margin-top: 1rem; }
.sfx-islider:not(.is-enhanced) .sfx-islider__arrows, .sfx-islider:not(.is-enhanced) .sfx-islider__bar, .sfx-islider:not(.is-enhanced) .sfx-islider__thumbs { display: none; }
.sfx-islider.is-enhanced .sfx-islider__stage { position: relative; overflow: hidden; border-radius: var(--sfx-radius); aspect-ratio: var(--sfx-ratio, 16 / 9); background: var(--sfx-section-grey-bg); }
.sfx-islider.is-enhanced .sfx-islider__slides { position: absolute; inset: 0; }
.sfx-islider.is-enhanced .sfx-islider__slide { position: absolute; inset: 0; transition: transform .6s ease, opacity .6s ease, visibility 0s linear .6s; visibility: hidden; }
.sfx-islider.is-enhanced .sfx-islider__slide.is-active { visibility: visible; transition: transform .6s ease, opacity .6s ease, visibility 0s; }
.sfx-islider.is-enhanced .sfx-islider__figure, .sfx-islider.is-enhanced .sfx-islider__img { height: 100%; }
.sfx-islider--slide.is-enhanced .sfx-islider__slide { transform: translateX(100%); }
.sfx-islider--slide.is-enhanced .sfx-islider__slide.is-before { transform: translateX(-100%); }
.sfx-islider--slide.is-enhanced .sfx-islider__slide.is-active { transform: none; }
.sfx-islider--vertical.is-enhanced .sfx-islider__slide { transform: translateY(100%); }
.sfx-islider--vertical.is-enhanced .sfx-islider__slide.is-before { transform: translateY(-100%); }
.sfx-islider--vertical.is-enhanced .sfx-islider__slide.is-active { transform: none; }
.sfx-islider--fade.is-enhanced .sfx-islider__slide { opacity: 0; }
.sfx-islider--fade.is-enhanced .sfx-islider__slide.is-active { opacity: 1; }
.sfx-islider.is-reduced .sfx-islider__slide { transition: none !important; }
.sfx-islider__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #ffffff; font-size: .9375rem; }
.sfx-islider--cap-below .sfx-islider__caption { position: static; padding: .5rem 0 0; background: none; color: var(--sfx-text-muted); }
.sfx-islider--cap-below.is-enhanced .sfx-islider__stage { overflow: visible; aspect-ratio: auto; background: none; }
.sfx-islider--cap-below.is-enhanced .sfx-islider__slides { position: relative; display: grid; overflow: hidden; }
.sfx-islider--cap-below.is-enhanced .sfx-islider__slide { position: relative; grid-area: 1 / 1; inset: auto; overflow: hidden; }
.sfx-islider--cap-below.is-enhanced .sfx-islider__img { height: auto; }
.sfx-islider--cap-below .sfx-islider__arrows { top: 0; bottom: auto; height: calc(100% - 2.25rem); }
/* Pfeile */
.sfx-islider__arrows { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: .75rem; pointer-events: none; }
.sfx-islider__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: var(--sfx-radius); background: rgba(0, 0, 0, .55); color: #ffffff; pointer-events: auto; transition: background-color .15s;
}
.sfx-islider__arrow:hover { background: var(--sfx-accent-strong); }
.sfx-islider__arrow:focus-visible, .sfx-islider__toggle:focus-visible, .sfx-islider__dot:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .6); }
.sfx-islider--arrows-simple .sfx-islider__arrows { padding: 0; }
.sfx-islider--arrows-simple .sfx-islider__arrow { border-radius: 0; }
.sfx-islider--arrows-offset .sfx-islider__arrows { padding: 1.5rem; }
.sfx-islider--arrows-small .sfx-islider__arrow { width: 2.25rem; height: 2.25rem; font-size: .8125rem; }
.sfx-islider--arrows-circle .sfx-islider__arrow { border-radius: 50%; }
.sfx-islider--arrows-solid .sfx-islider__arrow { background: #ffffff; color: #2f3338; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.sfx-islider--arrows-solid .sfx-islider__arrow:hover { background: #2f3338; color: #ffffff; }
.sfx-islider--apos-top .sfx-islider__arrows, .sfx-islider--apos-top-left .sfx-islider__arrows, .sfx-islider--apos-top-right .sfx-islider__arrows { align-items: flex-start; gap: .375rem; }
.sfx-islider--apos-bottom .sfx-islider__arrows, .sfx-islider--apos-bottom-left .sfx-islider__arrows, .sfx-islider--apos-bottom-right .sfx-islider__arrows { align-items: flex-end; gap: .375rem; }
.sfx-islider--apos-top .sfx-islider__arrows, .sfx-islider--apos-bottom .sfx-islider__arrows { justify-content: center; }
.sfx-islider--apos-top-left .sfx-islider__arrows, .sfx-islider--apos-bottom-left .sfx-islider__arrows { justify-content: flex-start; }
.sfx-islider--apos-top-right .sfx-islider__arrows, .sfx-islider--apos-bottom-right .sfx-islider__arrows { justify-content: flex-end; }
.sfx-islider--vertical .sfx-islider__arrows { flex-direction: column; justify-content: center; align-items: flex-end; gap: .5rem; }
/* Leiste mit Pause und Punkten */
.sfx-islider__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .375rem .75rem; pointer-events: none; }
.sfx-islider__bar > * { pointer-events: auto; }
.sfx-islider--dpos-bottom-left .sfx-islider__bar { justify-content: flex-start; }
.sfx-islider--dpos-bottom-right .sfx-islider__bar { justify-content: flex-end; }
.sfx-islider--dpos-top .sfx-islider__bar, .sfx-islider--dpos-top-left .sfx-islider__bar, .sfx-islider--dpos-top-right .sfx-islider__bar { top: 0; bottom: auto; }
.sfx-islider--dpos-top-left .sfx-islider__bar { justify-content: flex-start; }
.sfx-islider--dpos-top-right .sfx-islider__bar { justify-content: flex-end; }
.sfx-islider--cap-overlay .sfx-islider__caption { padding-bottom: 3rem; }
.sfx-islider__toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #ffffff; font-size: .8125rem; }
.sfx-islider__toggle[hidden] { display: none; }
.sfx-islider__dots { display: flex; gap: 0; }
.sfx-islider__dot { position: relative; width: 1.75rem; height: 2.25rem; padding: 0; border: 0; background: transparent; }
.sfx-islider__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border: 2px solid #ffffff; border-radius: 50%; background: rgba(0, 0, 0, .35); box-shadow: 0 0 2px rgba(0, 0, 0, .7); transition: background-color .15s; }
.sfx-islider__dot[aria-current="true"]::before { background: #ffffff; }
.sfx-islider--dots-solid .sfx-islider__dot::before { border-color: transparent; background: rgba(255, 255, 255, .75); }
.sfx-islider--dots-solid .sfx-islider__dot[aria-current="true"]::before { background: var(--sfx-accent-strong); border-color: #ffffff; }
.sfx-islider--dots-square .sfx-islider__dot::before { border-radius: 2px; }
.sfx-islider--dots-diamond .sfx-islider__dot::before { border-radius: 1px; transform: rotate(45deg) scale(.9); }
.sfx-islider--dots-none .sfx-islider__dots { display: none; }
/* Vorschaubilder */
.sfx-islider__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.sfx-islider__thumbs--justified { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); }
.sfx-islider__thumb { display: block; width: 6rem; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--sfx-radius); background: none; opacity: .65; transition: opacity .15s, border-color .15s; }
.sfx-islider__thumbs--justified .sfx-islider__thumb { width: 100%; }
.sfx-islider__thumb[aria-current="true"], .sfx-islider__thumb:hover { opacity: 1; border-color: var(--sfx-accent-strong); }
.sfx-islider__thumb:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; opacity: 1; }
.sfx-islider__thumb-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --------------------------------------------------------------------------
   8. Parallax (Modul 26)
   Bewegung: sfx-parallax.js setzt Transform bzw. die Variablen --sfx-enter / --sfx-leave.
   Ohne JavaScript oder bei „Bewegung reduzieren“ gelten die Fallback-Werte (Endzustand, alles sichtbar).
   -------------------------------------------------------------------------- */
.sfx-parallax { position: relative; }
.sfx-parallax--h-s { min-height: 18rem; }
.sfx-parallax--h-m { min-height: 26rem; }
.sfx-parallax--h-l { min-height: 34rem; }
.sfx-parallax--h-xl { min-height: min(90vh, 52rem); }
.sfx-parallax--h-full { min-height: max(32rem, 100vh); min-height: max(32rem, 100svh); }
.sfx-parallax__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sfx-parallax__layer { position: absolute; inset: -18% 0; display: block; will-change: transform; }
.sfx-parallax__kicker { margin: 0 0 .75rem; font-family: var(--sfx-font-display); font-size: .9375rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.sfx-parallax__title { margin-bottom: 1rem; }
.sfx-parallax__title--display { font-size: clamp(2.5rem, 1.2rem + 6vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.sfx-parallax__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }
.text-center > .sfx-parallax__cta, .text-center .sfx-parallax__cta { justify-content: center; }
.text-end > .sfx-parallax__cta, .text-end .sfx-parallax__cta { justify-content: flex-end; }
.sfx-parallax__intro { max-width: 46rem; margin: 0 auto 2.5rem; }
.sfx-parallax__intro.text-start { margin-left: 0; }
.sfx-parallax__intro.text-end { margin-right: 0; }

/* Hintergrundbild und Text-Parallax */
.sfx-parallax--bg { overflow: hidden; display: flex; align-items: center; color: #ffffff; background: #1b1d20; }
.sfx-parallax--bg > .container, .sfx-parallax--bg > .container-fluid { position: static; }
.sfx-parallax__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sfx-parallax--motion-horizontal .sfx-parallax__layer { inset: 0 -14%; }
.sfx-parallax--motion-zoom .sfx-parallax__layer, .sfx-parallax--motion-none .sfx-parallax__layer { inset: 0; transform-origin: center; }
.sfx-parallax__dim { position: absolute; inset: 0; }
.sfx-parallax__dim--dark.sfx-parallax__dim--35 { background: rgba(0, 0, 0, .45); }
.sfx-parallax__dim--dark.sfx-parallax__dim--50 { background: rgba(0, 0, 0, .58); }
.sfx-parallax__dim--dark.sfx-parallax__dim--65 { background: rgba(0, 0, 0, .7); }
.sfx-parallax__dim--dark.sfx-parallax__dim--80 { background: rgba(0, 0, 0, .8); }
.sfx-parallax__dim--light.sfx-parallax__dim--35 { background: rgba(255, 255, 255, .62); }
.sfx-parallax__dim--light.sfx-parallax__dim--50 { background: rgba(255, 255, 255, .72); }
.sfx-parallax__dim--light.sfx-parallax__dim--65 { background: rgba(255, 255, 255, .8); }
.sfx-parallax__dim--light.sfx-parallax__dim--80 { background: rgba(255, 255, 255, .86); }
.sfx-parallax__content { position: relative; z-index: 2; max-width: 46rem; margin-inline: auto; padding-block: 3.5rem; }
.sfx-parallax__content.text-start { margin-inline: 0 auto; }
.sfx-parallax__content.text-end { margin-inline: auto 0; }
.sfx-parallax--bg .sfx-parallax__title { color: #ffffff; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.sfx-parallax--bg .sfx-parallax__title--display { font-size: clamp(2.5rem, 1.2rem + 6vw, 6rem); }
.sfx-parallax--bg .sfx-parallax__text { font-size: 1.125rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sfx-parallax--bg .sfx-parallax__text a:not(.btn) { color: #ffffff; }
.sfx-parallax--bg .sfx-parallax__kicker { color: #ffffff; }
/* helle Aufhellung: dunkle Schrift */
.sfx-parallax--light { color: #1d1f22; background: #f4f4f4; }
.sfx-parallax--light .sfx-parallax__title, .sfx-parallax--light .sfx-parallax__kicker, .sfx-parallax--light .sfx-parallax__text a:not(.btn) { color: #1d1f22; text-shadow: none; }
.sfx-parallax--light .sfx-parallax__text { text-shadow: none; }
/* Inhalt gleitet beim Weiterscrollen nach unten und blendet aus */
.sfx-parallax__content--fade { opacity: calc(1 - var(--sfx-leave, 0) * 1.6); transform: translate3d(0, calc(var(--sfx-leave, 0) * 9rem), 0); will-change: opacity, transform; }
/* Text-Parallax: große Überschrift gleitet herein */
.sfx-parallax__reveal { opacity: calc(var(--sfx-enter, 1) * 1.15 - .15); transform: translate3d(0, calc((1 - var(--sfx-enter, 1)) * 6rem), 0); will-change: opacity, transform; }
/* Einstieg einer Landingpage (transparenter Header „Fullscreen“, 72px) */
.sfx-parallax--hero .sfx-parallax__content { padding-top: calc(72px + 2.5rem); }
.sfx-parallax--hero.sfx-parallax--scene .sfx-parallax__scene-title { padding-top: calc(72px + 8%); }
.sfx-lp--fullscreen:has(.sfx-main-body > .sfx-parallax--hero.sfx-parallax--light:first-of-type) .sfx-lp-header:not(.is-scrolled) :is(.sfx-lp-anchors a, .sfx-iconbtn) { color: #1d1f22; text-shadow: none; }
.sfx-lp--fullscreen:has(.sfx-main-body > .sfx-parallax--hero.sfx-parallax--light:first-of-type) .sfx-lp-header:not(.is-scrolled) .sfx-logo__light { display: block !important; }
.sfx-lp--fullscreen:has(.sfx-main-body > .sfx-parallax--hero.sfx-parallax--light:first-of-type) .sfx-lp-header:not(.is-scrolled) .sfx-logo__dark { display: none !important; }
.sfx-lp--fullscreen:has(.sfx-main-body > .sfx-parallax--hero.sfx-parallax--ink-dark:first-of-type) .sfx-lp-header:not(.is-scrolled) :is(.sfx-lp-anchors a, .sfx-iconbtn) { color: #1d1f22; text-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.sfx-lp--fullscreen:has(.sfx-main-body > .sfx-parallax--hero.sfx-parallax--ink-dark:first-of-type) .sfx-lp-header:not(.is-scrolled) .sfx-logo__light { display: block !important; }
.sfx-lp--fullscreen:has(.sfx-main-body > .sfx-parallax--hero.sfx-parallax--ink-dark:first-of-type) .sfx-lp-header:not(.is-scrolled) .sfx-logo__dark { display: none !important; }

/* Tiefen-Szene: hinten – Mitte – Überschrift – Vordergrund (Überschrift bleibt lesbar, der Vordergrund schiebt sich davor) */
.sfx-parallax--scene { overflow: hidden; }
.sfx-parallax--scene .sfx-parallax__stage { position: relative; min-height: inherit; overflow: hidden; }
.sfx-parallax--scene.sfx-parallax--h-s .sfx-parallax__stage { min-height: 18rem; }
.sfx-parallax--scene.sfx-parallax--h-m .sfx-parallax__stage { min-height: 26rem; }
.sfx-parallax--scene.sfx-parallax--h-l .sfx-parallax__stage { min-height: 34rem; }
.sfx-parallax--scene.sfx-parallax--h-xl .sfx-parallax__stage { min-height: min(90vh, 52rem); }
.sfx-parallax--scene.sfx-parallax--h-full .sfx-parallax__stage { min-height: max(32rem, 100vh); min-height: max(32rem, 100svh); }
.sfx-parallax--scene { min-height: 0 !important; }
.sfx-parallax__plane { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.sfx-parallax__plane .sfx-parallax__img { object-position: center bottom; }
.sfx-parallax__plane--back { z-index: 1; inset: -12% 0 0; }
.sfx-parallax__plane--mid { z-index: 2; }
.sfx-parallax__plane--front { z-index: 4; }
.sfx-parallax__scene-title { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-start; padding-top: 14%;
  opacity: calc(1 - var(--sfx-leave, 0) * .7); transform: translate3d(0, calc(var(--sfx-leave, 0) * 40vh), 0); will-change: transform, opacity; }
.sfx-parallax__scene-title > .container { width: 100%; }
.sfx-parallax__scene-title .sfx-parallax__title { margin: 0; }
.sfx-parallax--ink-dark .sfx-parallax__scene-title :is(.sfx-parallax__title, .sfx-parallax__kicker) { color: #1d1f22; }
.sfx-parallax--ink-light .sfx-parallax__scene-title :is(.sfx-parallax__title, .sfx-parallax__kicker) { color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.sfx-parallax__after { position: relative; z-index: 5; max-width: 46rem; padding-top: 2rem; }
.sfx-parallax__after.text-center { margin-inline: auto; }
@media (max-width: 767.98px) { .sfx-parallax__scene-title { padding-top: 22%; } .sfx-parallax--hero.sfx-parallax--scene .sfx-parallax__scene-title { padding-top: calc(72px + 6%); } }

/* Schwebende Bild-Ebenen */
.sfx-parallax--layers > .container, .sfx-parallax--layers > .container-fluid { min-height: inherit; }
.sfx-parallax--layers .sfx-parallax__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: inherit; padding-block: 4rem; }
.sfx-parallax--layers .sfx-parallax__content { z-index: 3; padding: 2rem; border-radius: calc(var(--sfx-radius) * 3); background: color-mix(in srgb, var(--sfx-main-bg) 95%, transparent); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .12); }
.sfx-bg-dark.sfx-parallax--layers .sfx-parallax__content { background: rgba(29, 31, 34, .92); }
.sfx-parallax__float { position: absolute; z-index: 1; width: clamp(8rem, 22vw, 18rem); will-change: transform; }
.sfx-parallax__float img { display: block; width: 100%; height: auto; border-radius: calc(var(--sfx-radius) * 3); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25); }
.sfx-parallax__float--1 { left: 1%; top: 6%; }
.sfx-parallax__float--2 { right: 2%; top: 14%; }
.sfx-parallax__float--3 { left: 18%; bottom: 2%; z-index: 2; width: clamp(7rem, 15vw, 12rem); }
.sfx-parallax__float--4 { right: 20%; bottom: 0; width: clamp(7rem, 14vw, 11rem); }
.sfx-parallax__float--5 { left: 36%; top: 0; width: clamp(6rem, 11vw, 9rem); opacity: .9; }
.sfx-parallax__float--6 { right: 36%; bottom: 8%; width: clamp(6rem, 10vw, 8rem); opacity: .9; }
@media (max-width: 767.98px) {
  .sfx-parallax__float--3, .sfx-parallax__float--4, .sfx-parallax__float--5, .sfx-parallax__float--6 { display: none; }
  .sfx-parallax__float { opacity: .35; }
}

/* Text und Bild nebeneinander */
.sfx-parallax__frame { position: relative; overflow: hidden; border-radius: calc(var(--sfx-radius) * 3); aspect-ratio: 4 / 3; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .18); }
.sfx-parallax__frame .sfx-parallax__layer { inset: -12% 0; }

/* Vorhang: Farbfläche gibt das Bild frei */
.sfx-parallax__curtain { position: relative; overflow: hidden; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-tone); }
.sfx-parallax__curtain-img { position: absolute; inset: 0; transform-origin: center; }
.sfx-parallax__curtain-panel { position: absolute; inset: 0; z-index: 2; background: var(--sfx-tone);
  transform: translate3d(0, calc(var(--sfx-enter, 1) * -101%), 0); will-change: transform; }
.sfx-parallax__curtain::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, calc((1 - var(--sfx-enter, 1)) * .55)); pointer-events: none; }

/* Karten mit unterschiedlicher Geschwindigkeit */
.sfx-parallax__speedrow { padding-bottom: 5rem; }
.sfx-parallax__speedcard { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 16rem; padding: 2rem 1.5rem;
  border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-tone); color: var(--sfx-tone-on, #ffffff); text-align: center; will-change: transform; }
.sfx-parallax__speedcard--2 { filter: brightness(.92); }
.sfx-parallax__speedcard--3 { filter: brightness(.84); }
.sfx-parallax__speedcard--4 { filter: brightness(.76); }
.sfx-parallax__speedicon { display: block; margin-bottom: .75rem; font-size: 2rem; }
.sfx-parallax__speedsub { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.sfx-parallax__speedtitle { margin: 0 0 .5rem; color: inherit !important; font-size: 1.375rem; }
.sfx-parallax__speedtext { margin: 0; }
.sfx-parallax__speedlink { display: inline-block; margin-top: 1rem; color: inherit !important; font-weight: 700; }
.sfx-parallax__speedlink:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Parallax-Galerie: zwei Spalten gegenläufig */
.sfx-parallax--gallery { background: var(--sfx-tone-soft); }
.sfx-parallax--gallery.sfx-space-top-none { padding-top: 0; }
.sfx-parallax__gallerytext { padding-block: 3rem; }
.sfx-parallax__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-height: 46rem; overflow: hidden; }
.sfx-parallax__gcol { display: grid; gap: 1rem; align-content: start; will-change: transform; }
.sfx-parallax__gcol--2 { margin-top: 5rem; }
.sfx-parallax__gitem { display: block; overflow: hidden; border-radius: var(--sfx-radius); }
.sfx-parallax__gimg { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.sfx-parallax__gitem:hover .sfx-parallax__gimg { transform: scale(1.04); }
.sfx-parallax__gitem:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; }
@media (max-width: 991.98px) { .sfx-parallax__gallery { max-height: 34rem; } .sfx-parallax__gallerytext { padding-block: 2rem 0; } }

/* Bildbänder */
.sfx-parallax__bands { margin: 0; padding: 0; list-style: none; }
.sfx-parallax__band { position: relative; display: flex; }
.sfx-parallax__band.sfx-parallax--h-s { min-height: 14rem; }
.sfx-parallax__band.sfx-parallax--h-m { min-height: 20rem; }
.sfx-parallax__band.sfx-parallax--h-l { min-height: 28rem; }
.sfx-parallax__band.sfx-parallax--h-xl { min-height: min(80vh, 40rem); }
.sfx-parallax__bandinner { position: relative; display: flex; align-items: flex-end; width: 100%; overflow: hidden; color: #ffffff; text-decoration: none; background: #1b1d20; }
.sfx-parallax__bandinner .sfx-parallax__layer { inset: -16% 0; }
.sfx-parallax__bandtext { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .25rem; width: 100%; padding: 4rem max(1.5rem, calc((100% - 1140px) / 2 + .75rem)) 1.5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.sfx-parallax__bandtitle { font-family: var(--sfx-font-display); font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem); font-weight: 700; line-height: 1.15; }
.sfx-parallax__bandsub { font-size: .9375rem; opacity: .9; }
.sfx-parallax__bandmore { margin-top: .5rem; font-weight: 700; }
a.sfx-parallax__bandinner .sfx-parallax__img { transition: transform .6s ease; }
a.sfx-parallax__bandinner:hover .sfx-parallax__img { transform: scale(1.03); }
a.sfx-parallax__bandinner:hover .sfx-parallax__bandmore { text-decoration: underline; }
a.sfx-parallax__bandinner:focus-visible { outline: 4px solid var(--sfx-focus); outline-offset: -4px; }

/* 3D-Karten */
.sfx-parallax__tiltcard { position: relative; display: block; overflow: hidden; border-radius: calc(var(--sfx-radius) * 3); color: #ffffff; text-decoration: none; background: #1b1d20;
  transform: perspective(900px) rotateX(var(--sfx-rx, 0deg)) rotateY(var(--sfx-ry, 0deg)); transition: transform .5s ease, box-shadow .3s ease; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12); }
.sfx-parallax__tiltcard.is-tilting { transition: transform .08s linear, box-shadow .3s ease; box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .25); }
.sfx-parallax__tiltimg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sfx-parallax__tilttext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: 1.5rem; text-align: center;
  background: rgba(0, 0, 0, .5); transform: translateZ(40px); }
.sfx-parallax__tiltsub { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sfx-parallax__tilttitle { font-family: var(--sfx-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.sfx-parallax__tiltdesc { font-size: .9375rem; }
a.sfx-parallax__tiltcard:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   9. Hinweisboxen (Modul 27)
   -------------------------------------------------------------------------- */
.sfx-msgs { display: grid; gap: 1rem; }
.sfx-msg {
  --m-bg: #e6f2fb; --m-fg: #0b3d66; --m-bd: #9cc4e6; --m-bar: #1d5fbf; --m-head: #cfe3f5; --m-icon: #1d5fbf;
  position: relative; margin: 0; padding: 0; border-radius: var(--sfx-radius); color: var(--m-fg);
}
.sfx-msg--success { --m-bg: #e5f4ec; --m-fg: #124b30; --m-bd: #9fd3b6; --m-bar: #1f7a4d; --m-head: #c9e8d6; --m-icon: #1f7a4d; }
.sfx-msg--danger  { --m-bg: #fbe9e7; --m-fg: #7a1d12; --m-bd: #efaaa1; --m-bar: #c8331f; --m-head: #f5cfc9; --m-icon: #c8331f; }
.sfx-msg--info    { --m-bg: #e6f2fb; --m-fg: #0b3d66; --m-bd: #9cc4e6; --m-bar: #1d5fbf; --m-head: #cfe3f5; --m-icon: #1d5fbf; }
.sfx-msg--warning { --m-bg: #fff5d6; --m-fg: #5c3d00; --m-bd: #ecc970; --m-bar: #b77a00; --m-head: #fbe6a6; --m-icon: #8a5a00; }
.sfx-msg--accent  { --m-bg: #fdecea; --m-fg: #6e1a10; --m-bd: #f1b3aa; --m-bar: #e34735; --m-head: #f8d3cd; --m-icon: #c8331f; }
.sfx-msg--neutral { --m-bg: #efefef; --m-fg: #2f3338; --m-bd: #cfcfcf; --m-bar: #767a7e; --m-head: #dcdcdc; --m-icon: #4a4f54; }
.sfx-msg--dark    { --m-bg: #2f3338; --m-fg: #eef0f1; --m-bd: #2f3338; --m-bar: #e34735; --m-head: #24272b; --m-icon: #ffffff; }
.sfx-msg--light   { --m-bg: #ffffff; --m-fg: #3a3d40; --m-bd: #dcdcdc; --m-bar: #b9bdc1; --m-head: #f4f4f4; --m-icon: #5c6670; }
[data-bs-theme="dark"] .sfx-msg--success { --m-bg: #17291f; --m-fg: #bfe8d0; --m-bd: #2f6b4b; --m-bar: #4fbf86; --m-head: #1d3a2b; --m-icon: #74d3a2; }
[data-bs-theme="dark"] .sfx-msg--danger  { --m-bg: #2e1a17; --m-fg: #ffd2cc; --m-bd: #7a3328; --m-bar: #e34735; --m-head: #40211d; --m-icon: #f08a7e; }
[data-bs-theme="dark"] .sfx-msg--info    { --m-bg: #142338; --m-fg: #cfe1ff; --m-bd: #2c4f80; --m-bar: #6aa1ff; --m-head: #1b2f4b; --m-icon: #8db8ff; }
[data-bs-theme="dark"] .sfx-msg--warning { --m-bg: #2f2710; --m-fg: #ffe7a8; --m-bd: #6b5520; --m-bar: #f2b01e; --m-head: #3d3215; --m-icon: #f5c451; }
[data-bs-theme="dark"] .sfx-msg--accent  { --m-bg: #331d1a; --m-fg: #ffd2cc; --m-bd: #7a3328; --m-bar: #e34735; --m-head: #452420; --m-icon: #f08a7e; }
[data-bs-theme="dark"] .sfx-msg--neutral { --m-bg: #2a2d31; --m-fg: #e3e5e7; --m-bd: #44494f; --m-bar: #8a8f94; --m-head: #33373c; --m-icon: #c9cdd1; }
[data-bs-theme="dark"] .sfx-msg--light   { --m-bg: #25282c; --m-fg: #e3e5e7; --m-bd: #3b4046; --m-bar: #6f757b; --m-head: #2e3236; --m-icon: #c9cdd1; }
.sfx-msg__body { padding: .875rem 1.25rem; }
.sfx-msg__text { margin: 0; }
.sfx-msg__text + .sfx-msg__list { margin-top: .5rem; }
.sfx-msg__lead { font-weight: 700; }
.sfx-msg__icon { margin-right: .5rem; color: var(--m-icon); }
.sfx-msg__title { margin: 0; color: inherit; font-family: var(--sfx-font-body); font-size: 1rem; font-weight: 700; }
.sfx-msg__list { margin: 0; padding-left: 1.25rem; }
.sfx-msg__rule { margin: .75rem 0; border-color: currentColor; opacity: .3; }
.sfx-msg__footer { margin: 0; font-size: .9375rem; }
.sfx-msg__link, .sfx-msg a { color: inherit !important; font-weight: 700; text-decoration: underline; }
.sfx-msg__link:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* Darstellungen */
.sfx-msg--native { border-left: 5px solid var(--m-bar); background: var(--m-bg); }
.sfx-msg--alert { border: 1px solid var(--m-bd); background: var(--m-bg); }
.sfx-msg--bordered { border: 2px solid var(--m-bar); background: var(--sfx-main-bg); color: var(--m-fg); }
[data-bs-theme="dark"] .sfx-msg--bordered { background: transparent; }
.sfx-msg--extended { overflow: hidden; border-left: 5px solid var(--m-bar); background: var(--m-bg); }
.sfx-msg--extended .sfx-msg__head { padding: .75rem 1.25rem; background: var(--m-head); }
.sfx-msg--callout { padding: 1.25rem 1.5rem; border: 1px solid var(--m-bd); background: var(--m-bg); }
.sfx-msg--callout .sfx-msg__title { margin-bottom: .5rem; font-family: var(--sfx-font-display); font-size: 1.375rem; }
.sfx-msg--callout .sfx-msg__body { padding: 0; }
.sfx-msg.alert { --bs-alert-padding-x: 0; --bs-alert-padding-y: 0; --bs-alert-margin-bottom: 0; --bs-alert-border-color: transparent; padding-right: 3rem; }
.sfx-msg--alert.alert, .sfx-msg--callout.alert { border: 1px solid var(--m-bd); }
.sfx-msg--bordered.alert { border: 2px solid var(--m-bar); }
.sfx-msg--native.alert, .sfx-msg--extended.alert { border: 0; border-left: 5px solid var(--m-bar); }
.sfx-msg__close.btn-close { position: absolute; top: .375rem; right: .375rem; width: 2.25rem; height: 2.25rem; padding: 0; opacity: .75; }
.sfx-msg--dark .sfx-msg__close, [data-bs-theme="dark"] .sfx-msg__close { filter: invert(1) grayscale(100%) brightness(200%); }
.sfx-msg__close:focus-visible { box-shadow: none; outline: 3px solid currentColor; outline-offset: 0; opacity: 1; }

/* --------------------------------------------------------------------------
   10. Weiterlesen (Modul 28)
   -------------------------------------------------------------------------- */
.sfx-readmore { position: relative; --sfx-rm-mask: var(--sfx-main-bg); }
.sfx-bg-light .sfx-readmore { --sfx-rm-mask: #f9f9f9; }
.sfx-bg-grey .sfx-readmore { --sfx-rm-mask: var(--sfx-section-grey-bg); }
.sfx-bg-dark .sfx-readmore { --sfx-rm-mask: var(--sfx-dark-bg); }
.sfx-bg-accent .sfx-readmore { --sfx-rm-mask: var(--sfx-accent-strong); }
.sfx-readmore--frame-card { padding: 1.5rem; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-main-bg); box-shadow: 0 4px 22px rgba(0, 0, 0, .1); --sfx-rm-mask: var(--sfx-main-bg); }
.sfx-readmore--frame-bordered { padding: 1.5rem; border: 1px solid var(--sfx-border); border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-main-bg); --sfx-rm-mask: var(--sfx-main-bg); }
.sfx-readmore--frame-accent { padding: 1.25rem 1.5rem; border-left: 4px solid var(--sfx-accent); background: var(--sfx-section-light-bg); --sfx-rm-mask: #f9f9f9; }
[data-bs-theme="dark"] .sfx-readmore--frame-accent { --sfx-rm-mask: #212427; }
.sfx-readmore__image { margin-bottom: 1rem; overflow: hidden; border-radius: calc(var(--sfx-radius) * 2); }
.sfx-readmore__image img { display: block; width: 100%; height: auto; }
.sfx-readmore__content { position: relative; }
.sfx-readmore.is-enhanced .sfx-readmore__content { overflow: hidden; transition: max-height var(--sfx-rm-speed, 400ms) ease; }
.sfx-readmore.is-enhanced:not(.is-open) .sfx-readmore__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sfx-rm-mask));
}
.sfx-readmore--mask-long.is-enhanced:not(.is-open) .sfx-readmore__content::after { height: 75%; }
.sfx-readmore--mask-none .sfx-readmore__content::after { display: none; }
.sfx-readmore__trigger { margin-top: .5rem; }
.sfx-readmore__link { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--sfx-link); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.sfx-readmore__link:hover { color: var(--sfx-link-hover); }
.sfx-on-dark .sfx-readmore__link { color: #ffffff; }
.sfx-readmore__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--sfx-border); border-radius: 50%; background: var(--sfx-main-bg); color: var(--sfx-heading); }
.sfx-readmore__icon-btn:hover { border-color: var(--sfx-accent-strong); color: var(--sfx-link-hover); }
.sfx-readmore [data-sfx-readmore-toggle] i { transition: transform .25s; }
.sfx-readmore [data-sfx-readmore-toggle] i.is-flipped { transform: rotate(180deg); }
.sfx-readmore [data-sfx-readmore-toggle][hidden] { display: none; }
.sfx-readmore__content:focus { outline: none; }

/* --------------------------------------------------------------------------
   11. Icon-Boxen – zusätzliche Varianten (Modul 04)
   -------------------------------------------------------------------------- */
.sfx-iconboxes .sfx-iconbox__icon { background: var(--sfx-tone-icon, var(--sfx-accent)); color: var(--sfx-tone-on, #ffffff); }
.sfx-iconboxes.sfx-tone--amber .sfx-iconbox__icon { color: #241a00; }
.sfx-iconboxes--size-s .sfx-iconbox__icon { width: 3rem; height: 3rem; font-size: 1.25rem; }
.sfx-iconboxes--size-l .sfx-iconbox__icon { width: 5.5rem; height: 5.5rem; font-size: 2.25rem; }
.sfx-iconboxes--icon-square .sfx-iconbox__icon { border-radius: 0; }
.sfx-iconboxes--icon-rounded .sfx-iconbox__icon { border-radius: calc(var(--sfx-radius) * 4); }
.sfx-iconboxes--icon-outline .sfx-iconbox__icon { border: 2px solid var(--sfx-tone-icon, var(--sfx-accent)); background: transparent; box-shadow: none; color: var(--sfx-tone-fg, #9c2416); }
.sfx-iconboxes--icon-dark .sfx-iconbox__icon { background: #2f3338; color: #ffffff; box-shadow: 0 0 0 4px var(--sfx-main-bg), 0 0 0 6px #2f3338; }
.sfx-iconboxes--icon-light .sfx-iconbox__icon { border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-tone-soft, #f2f2f2); box-shadow: none; color: var(--sfx-tone-fg, #2f3338); }
.sfx-iconboxes--icon-plain .sfx-iconbox__icon { width: auto; height: auto; min-width: 2.5rem; border-radius: 0; background: none; box-shadow: none; color: var(--sfx-tone-fg, #9c2416); font-size: 2rem; }
.sfx-iconboxes--icon-plain.sfx-iconboxes--size-l .sfx-iconbox__icon { font-size: 3rem; }
.sfx-iconboxes--icon-plain.sfx-iconboxes--size-s .sfx-iconbox__icon { font-size: 1.5rem; }
.sfx-iconboxes--icon-number .sfx-iconbox__icon { font-family: var(--sfx-font-display); font-weight: 700; }
.sfx-iconbox__icon--image { overflow: hidden; background: var(--sfx-section-grey-bg) !important; }
.sfx-iconbox__icon--image img { width: 100%; height: 100%; object-fit: cover; }
.sfx-on-dark .sfx-iconboxes--icon-plain .sfx-iconbox__icon, .sfx-on-dark .sfx-iconboxes--icon-outline .sfx-iconbox__icon { color: #ffffff; }
.sfx-on-dark .sfx-iconboxes--icon-outline .sfx-iconbox__icon { border-color: #ffffff; }
/* Darstellungen */
.sfx-iconboxes--center .sfx-iconbox { text-align: center; }
.sfx-iconboxes--center .sfx-iconbox__icon { margin-bottom: 1rem; }
.sfx-iconboxes--bordered .sfx-iconbox { margin-top: 2rem; padding: 3rem 1.5rem 1.5rem; border: 1px solid var(--sfx-border); border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-main-bg); text-align: center; }
.sfx-iconboxes--bordered .sfx-iconbox__icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
.sfx-iconboxes--bordered.sfx-iconboxes--size-l .sfx-iconbox { padding-top: 3.75rem; }
.sfx-iconboxes--media .sfx-iconbox { overflow: hidden; border: 1px solid var(--sfx-border); border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-main-bg); text-align: center; }
.sfx-iconboxes--media .sfx-iconbox__media { aspect-ratio: 4 / 3; overflow: hidden; }
.sfx-iconboxes--media .sfx-iconbox__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sfx-iconboxes--media .sfx-iconbox.is-linked:hover .sfx-iconbox__media img { transform: scale(1.04); }
.sfx-iconboxes--media .sfx-iconbox__body { padding: 1.25rem 1.25rem 1rem; }
.sfx-iconboxes--media .sfx-iconbox > .sfx-iconbox__icon { margin: 1.5rem auto 0; }
.sfx-iconboxes--fx-lift .sfx-iconbox { transition: transform .2s ease, box-shadow .2s ease; }
.sfx-iconboxes--fx-lift .sfx-iconbox:hover, .sfx-iconboxes--fx-lift .sfx-iconbox:focus-within { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); }
.sfx-iconboxes--fx-ring .sfx-iconbox__icon { transition: box-shadow .25s ease; }
.sfx-iconboxes--fx-ring .sfx-iconbox:hover .sfx-iconbox__icon, .sfx-iconboxes--fx-ring .sfx-iconbox:focus-within .sfx-iconbox__icon { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sfx-tone-icon, #e34735) 25%, transparent); }
.sfx-carousel--boxes .sfx-carousel__item { padding-top: .25rem; }
.sfx-carousel--boxes .sfx-iconbox { height: 100%; }

/* --------------------------------------------------------------------------
   12. Trenner – Formen und Bildband (Modul 07)
   -------------------------------------------------------------------------- */
.sfx-divider__svg--h-s { height: clamp(24px, 3.5vw, 50px); }
.sfx-divider__svg--h-l { height: clamp(60px, 9vw, 140px); }
.sfx-divider__svg--h-xl { height: clamp(80px, 13vw, 200px); }
.sfx-divider__svg.is-inverted { transform: scaleY(-1); }
.sfx-divider__svg.is-inverted.is-flipped { transform: scale(-1, -1); }
.sfx-divider--image { position: relative; overflow: hidden; }
.sfx-divider--image .sfx-divider__img { display: block; width: 100%; object-fit: cover; }
.sfx-divider--img-s .sfx-divider__img { height: 14rem; }
.sfx-divider--img-m .sfx-divider__img { height: 22rem; }
.sfx-divider--img-l .sfx-divider__img { height: 32rem; }
.sfx-divider--image .sfx-divider__svg { position: absolute; left: 0; right: 0; bottom: -1px; }

/* --------------------------------------------------------------------------
   13. Call-to-Action / Promo – zusätzliche Darstellungen (Modul 08)
   -------------------------------------------------------------------------- */
.sfx-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sfx-cta__hl { color: var(--sfx-tone-fg, #9c2416); }
.sfx-cta--band .sfx-cta__hl, .sfx-cta--dark .sfx-cta__hl { color: #ffd27a; }
.sfx-cta--tone .sfx-cta__hl { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .15em; }
.sfx-cta__btn { --bs-btn-color: #ffffff; --bs-btn-bg: var(--sfx-accent-strong); --bs-btn-border-color: var(--sfx-accent-strong); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--sfx-accent-strong-hover); --bs-btn-hover-border-color: var(--sfx-accent-strong-hover); font-weight: 700; }
.sfx-cta__btn--outline { --bs-btn-color: var(--sfx-link); --bs-btn-bg: transparent; --bs-btn-border-color: currentColor; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--sfx-accent-strong); --bs-btn-hover-border-color: var(--sfx-accent-strong); }
.sfx-cta--plain { padding: .5rem 0; }
.sfx-cta--border, .sfx-cta--center, .sfx-cta--reverse { padding: 1.75rem 2rem; border: 1px solid var(--sfx-border); border-radius: var(--sfx-radius); background: var(--sfx-main-bg); }
.sfx-cta--center { flex-direction: column; text-align: center; }
.sfx-cta--center .sfx-cta__text { flex: 0 1 auto; }
.sfx-cta--reverse { flex-direction: row-reverse; text-align: right; }
@media (max-width: 767.98px) { .sfx-cta--reverse { flex-direction: column-reverse; align-items: flex-start; text-align: left; } .sfx-cta--reverse .sfx-cta__text { flex-basis: auto; } }
/* Gedämpfter Text auf grauen Flächen (#e2e2e2): etwas dunkler, damit 4,5:1 erreicht wird */
.sfx-bg-grey, .sfx-cta--light, .sfx-logos--tagline .sfx-logos__item, .sfx-counters--horizontal .sfx-counter, .sfx-tl__linkbox { --sfx-text-muted: #55585c; }
[data-bs-theme="dark"] .sfx-bg-grey, [data-bs-theme="dark"] .sfx-cta--light, [data-bs-theme="dark"] .sfx-logos--tagline .sfx-logos__item, [data-bs-theme="dark"] .sfx-counters--horizontal .sfx-counter, [data-bs-theme="dark"] .sfx-tl__linkbox { --sfx-text-muted: #a3a7aa; }
.sfx-cta--light { padding: 1.75rem 2rem; border-radius: var(--sfx-radius); background: var(--sfx-section-grey-bg); }
.sfx-cta--light .sfx-cta__btn { --bs-btn-bg: #2f3338; --bs-btn-border-color: #2f3338; --bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #000000; }
.sfx-cta--tone { padding: 1.75rem 2rem; border-radius: var(--sfx-radius); background: var(--sfx-tone); color: var(--sfx-tone-on); }
.sfx-cta--tone .sfx-cta__title, .sfx-cta--tone .sfx-cta__sub { color: inherit; }
.sfx-cta--tone .sfx-cta__btn--outline, .sfx-cta--tone .sfx-cta__btn { --bs-btn-color: var(--sfx-tone-on); --bs-btn-bg: transparent; --bs-btn-border-color: var(--sfx-tone-on); --bs-btn-hover-color: var(--sfx-tone); --bs-btn-hover-bg: var(--sfx-tone-on); --bs-btn-hover-border-color: var(--sfx-tone-on); }
.sfx-cta--tone .sfx-cta__link { color: var(--sfx-tone-on); }
.sfx-cta--tone a:focus-visible { outline-color: var(--sfx-tone-on); }
.sfx-cta--mini { padding: .75rem 0; }
.sfx-cta--mini .sfx-cta__title { font-size: 1rem; }
.sfx-cta.is-upper .sfx-cta__title { font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; }
.sfx-cta--band .sfx-cta__btn--outline, .sfx-cta--dark .sfx-cta__btn--outline { --bs-btn-bg: transparent; --bs-btn-color: #ffffff; --bs-btn-border-color: #ffffff; --bs-btn-hover-color: #2f3338; --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff; }
.sfx-bg-dark .sfx-cta--plain .sfx-cta__btn--outline, .sfx-bg-dark .sfx-cta--mini .sfx-cta__btn--outline { --bs-btn-color: #ffffff; }
[data-bs-theme="dark"] .sfx-cta--light .sfx-cta__btn { --bs-btn-bg: #eef0f1; --bs-btn-border-color: #eef0f1; --bs-btn-color: #1d1f22; --bs-btn-hover-bg: #ffffff; --bs-btn-hover-color: #000000; }

/* --------------------------------------------------------------------------
   14. Kundenlogos – zusätzliche Darstellungen und Laufband (Modul 09)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) { .col-lg-sfx5 { flex: 0 0 auto; width: 20%; } }
.sfx-logos--grid { border-top: 1px dashed var(--sfx-border); border-left: 1px dashed var(--sfx-border); }
.sfx-logos--grid > li { border-right: 1px dashed var(--sfx-border); border-bottom: 1px dashed var(--sfx-border); }
.sfx-logos--grid .sfx-logos__item { min-height: 8rem; padding: 1.25rem; }
.sfx-logos--card .sfx-logos__item { min-height: 7rem; padding: 1rem; border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-main-bg); box-shadow: 0 3px 14px rgba(0, 0, 0, .08); }
.sfx-logos--bordered .sfx-logos__item { min-height: 7rem; padding: 1rem; border: 1px solid var(--sfx-border); border-radius: calc(var(--sfx-radius) * 2); }
.sfx-logos--tagline .sfx-logos__item { flex-direction: column; gap: .25rem; min-height: 11rem; padding: 1.25rem 1rem; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-section-grey-bg); text-align: center; }
.sfx-logos__name { margin-top: .5rem; color: var(--sfx-heading); font-weight: 700; font-size: .9375rem; }
.sfx-logos__tagline { color: var(--sfx-text-muted); font-size: .8125rem; }
.sfx-logos--tagline .sfx-logos__img { max-height: 5rem; }
.sfx-logos.is-light .sfx-logos__item { border-color: rgba(255, 255, 255, .2); background: transparent; }
.sfx-logos--grid.is-light, .sfx-logos--grid.is-light > li { border-color: rgba(255, 255, 255, .25); }
.sfx-logos.is-light .sfx-logos__img { filter: brightness(0) invert(1); opacity: .85; }
.sfx-logos.is-light.is-greyscale .sfx-logos__item:hover .sfx-logos__img, .sfx-logos.is-light .sfx-logos__item:hover .sfx-logos__img { filter: brightness(0) invert(1); opacity: 1; }
.has-tooltips .sfx-logos__item { position: relative; }
.sfx-logos__tip {
  position: absolute; left: 50%; bottom: calc(100% - .25rem); z-index: 5; padding: .25rem .625rem; border-radius: var(--sfx-radius);
  background: #2f3338; color: #ffffff; font-size: .8125rem; white-space: nowrap; opacity: 0; transform: translate(-50%, .25rem); transition: opacity .15s, transform .15s; pointer-events: none;
}
.sfx-logos__item:hover .sfx-logos__tip, .sfx-logos__item:focus-visible .sfx-logos__tip { opacity: 1; transform: translate(-50%, 0); }
.sfx-carousel--logos .sfx-logos__item { min-height: 7rem; }
/* Laufband */
.sfx-marquee { position: relative; }
.sfx-marquee__viewport { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.sfx-marquee__inner { display: flex; width: max-content; }
.sfx-marquee.is-enhanced .sfx-marquee__inner { animation: sfx-marquee var(--sfx-marquee-duration, 40s) linear infinite; }
.sfx-marquee.is-paused .sfx-marquee__inner, .sfx-marquee:hover .sfx-marquee__inner, .sfx-marquee:focus-within .sfx-marquee__inner { animation-play-state: paused; }
.sfx-marquee__list { display: flex; flex: 0 0 auto; gap: 3rem; padding-right: 3rem; }
.sfx-marquee__list > li { flex: 0 0 auto; width: 9rem; }
.sfx-marquee:not(.is-enhanced) .sfx-marquee__inner { width: auto; }
.sfx-marquee:not(.is-enhanced) .sfx-marquee__list { flex-wrap: wrap; justify-content: center; }
.sfx-marquee__toggle { position: absolute; right: 0; bottom: -3rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--sfx-border); border-radius: 50%; background: var(--sfx-main-bg); color: var(--sfx-heading); }
.sfx-marquee__toggle[hidden] { display: none; }
.sfx-marquee { margin-bottom: 3rem; }
@keyframes sfx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sfx-marquee.is-enhanced .sfx-marquee__inner { animation: none; width: auto; }
  .sfx-marquee .sfx-marquee__list.is-copy { display: none; }
  .sfx-marquee__list { flex-wrap: wrap; justify-content: center; }
  .sfx-marquee { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   15. Vorher/Nachher – Griffe, Farben, senkrecht (Modul 11)
   -------------------------------------------------------------------------- */
.sfx-compare { --sfx-cmp-line: #ffffff; --sfx-cmp-bg: #ffffff; --sfx-cmp-fg: #9c2416; }
.sfx-compare--color-accent { --sfx-cmp-line: #e34735; --sfx-cmp-bg: #c8331f; --sfx-cmp-fg: #ffffff; }
.sfx-compare--color-dark { --sfx-cmp-line: #2f3338; --sfx-cmp-bg: #2f3338; --sfx-cmp-fg: #ffffff; }
.sfx-compare--color-blue { --sfx-cmp-line: #1d5fbf; --sfx-cmp-bg: #1d5fbf; --sfx-cmp-fg: #ffffff; }
.sfx-compare--color-green { --sfx-cmp-line: #1f7a4d; --sfx-cmp-bg: #1f7a4d; --sfx-cmp-fg: #ffffff; }
.sfx-compare--color-amber { --sfx-cmp-line: #f2b01e; --sfx-cmp-bg: #f2b01e; --sfx-cmp-fg: #241a00; }
.sfx-compare--color-teal { --sfx-cmp-line: #0f766e; --sfx-cmp-bg: #0f766e; --sfx-cmp-fg: #ffffff; }
.sfx-compare.is-enhanced .sfx-compare__handle::before { background: var(--sfx-cmp-line); }
.sfx-compare.is-enhanced .sfx-compare__handle i { background: var(--sfx-cmp-bg); color: var(--sfx-cmp-fg); }
.sfx-compare--handle-transparent.is-enhanced .sfx-compare__handle i { border: 3px solid var(--sfx-cmp-line); background: rgba(0, 0, 0, .25); color: #ffffff; box-shadow: none; }
.sfx-compare--handle-rounded.is-enhanced .sfx-compare__handle i { border-radius: .625rem; }
.sfx-compare--handle-square.is-enhanced .sfx-compare__handle i { border-radius: 0; }
.sfx-compare--handle-diamond.is-enhanced .sfx-compare__handle i { border-radius: 0; transform: rotate(45deg); }
.sfx-compare--handle-diamond.is-enhanced .sfx-compare__handle i::before { display: inline-block; transform: rotate(-45deg); }
.sfx-compare--frame-shadow .sfx-compare__stage, .sfx-compare--frame-shadow:not(.is-enhanced) .sfx-compare__img { box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18); }
.sfx-compare--frame-rounded.is-enhanced .sfx-compare__stage { border-radius: calc(var(--sfx-radius) * 5); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18); }
/* senkrecht */
.sfx-compare--vertical.is-enhanced .sfx-compare__after { clip-path: inset(var(--sfx-compare-pos, 50%) 0 0 0); }
.sfx-compare--vertical.is-enhanced .sfx-compare__handle { top: var(--sfx-compare-pos, 50%); bottom: auto; left: 0; right: 0; width: auto; height: 0; }
.sfx-compare--vertical.is-enhanced .sfx-compare__handle::before { top: auto; left: 0; right: 0; bottom: auto; width: auto; height: 3px; margin: -1.5px 0 0; }
.sfx-compare--vertical.is-enhanced .sfx-compare__range { writing-mode: vertical-lr; cursor: ns-resize; }
.sfx-compare--vertical.is-enhanced .sfx-compare__range::-webkit-slider-thumb { width: 100vw; height: 2.75rem; }
.sfx-compare--vertical.is-enhanced .sfx-compare__range::-moz-range-thumb { width: 100vw; height: 2.75rem; }
.sfx-compare--vertical .sfx-compare__label--before { top: .75rem; bottom: auto; }
.sfx-compare--vertical.is-enhanced .sfx-compare__label--after { top: auto; bottom: .75rem; left: .75rem; right: auto; }
.sfx-compare-wrap .sfx-richtext :is(h2, h3, h4) { font-size: 1.375rem; text-transform: uppercase; letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   Bewegung reduzieren und Druck
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sfx-carousel__media img, .sfx-gallery__img, .sfx-iconboxes--media .sfx-iconbox__media img, .sfx-islider__slide,
  .sfx-readmore__content, .sfx-iconboxes--fx-lift .sfx-iconbox, .sfx-gallery__caption { transition: none !important; }
  a.sfx-carousel__media:hover img, .sfx-gallery--fx-zoom a.sfx-gallery__link:hover .sfx-gallery__img, .sfx-iconboxes--fx-lift .sfx-iconbox:hover { transform: none; }
  .sfx-parallax__layer, .sfx-parallax__float, [data-sfx-parallax], [data-sfx-zoom], .sfx-parallax__tiltcard, .sfx-parallax__reveal, .sfx-parallax__content--fade, .sfx-parallax__scene-title { transform: none !important; }
  .sfx-parallax__reveal, .sfx-parallax__content--fade, .sfx-parallax__scene-title { opacity: 1 !important; }
  .sfx-parallax__curtain-panel { display: none; }
  .sfx-parallax__curtain::after { background: none; }
}
@media print {
  .sfx-carousel__controls, .sfx-islider__arrows, .sfx-islider__bar, .sfx-islider__thumbs, .sfx-code__copy, .sfx-dt__tools, .sfx-dt__footer,
  .sfx-readmore__trigger, .sfx-marquee__toggle, .sfx-msg__close { display: none !important; }
  .sfx-readmore__content { max-height: none !important; }
  .sfx-readmore__content::after { display: none !important; }
  .sfx-carousel__track { flex-wrap: wrap; overflow: visible; }
  .sfx-marquee__inner { animation: none !important; }
  .sfx-marquee__list.is-copy { display: none; }
}

/* Vorher/Nachher: Listen im rechtsbündigen linken Text mit Aufzählungszeichen direkt am Text */
@media (min-width: 992px) { .sfx-compare-wrap .text-lg-end ul, .sfx-compare-wrap .text-lg-end ol { padding-left: 0; list-style-position: inside; } }
/* Trenner: 1px Überlappung gegen Haarlinien durch Subpixel-Rundung */
.sfx-divider--shape:not(.sfx-divider--image) .sfx-divider__svg { position: relative; z-index: 1; margin-bottom: -1px; }
/* Bildbänder über die volle Breite: ohne Seitenabstand, Einleitung behält ihn */
.sfx-parallax--stack > .container-fluid { padding-inline: 0; }
.sfx-parallax--stack > .container-fluid > .sfx-parallax__intro { padding-inline: 1rem; }

/* --------------------------------------------------------------------------
   16. Zeitstrahl (Modul 29) – nach blog-timeline*.html, ohne Blog
   -------------------------------------------------------------------------- */
.sfx-tl { --sfx-tl-line: color-mix(in srgb, var(--sfx-tone) 35%, var(--sfx-border)); position: relative; }
.sfx-tl__list { position: relative; margin: 0; padding: 0; list-style: none; }
.sfx-tl__month { position: relative; z-index: 1; margin: 0 0 2rem; font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sfx-tl__month span { display: inline-block; padding: .5rem 1.25rem; border: 1px solid var(--sfx-border); border-radius: 999px; background: var(--sfx-main-bg); color: var(--sfx-heading); }
.sfx-tl__list + .sfx-tl__month { margin-top: 3rem; }
.sfx-tl__entry { position: relative; }
.sfx-tl--card .sfx-tl__entry, .sfx-tl--bordered .sfx-tl__entry { padding: 1.25rem; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-main-bg); }
.sfx-tl--card .sfx-tl__entry { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1); }
.sfx-tl--bordered .sfx-tl__entry { border: 1px solid var(--sfx-border); }
.sfx-tl__media { margin-bottom: 1rem; overflow: hidden; border-radius: var(--sfx-radius); }
.sfx-tl__img { display: block; width: 100%; height: auto; }
.sfx-tl__video { display: block; width: 100%; height: auto; background: #000; }
.sfx-tl__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; margin-bottom: 1rem; }
.sfx-tl__gallery--n1 { grid-template-columns: 1fr; }
.sfx-tl__gallery--n2 { grid-template-columns: 1fr 1fr; }
.sfx-tl__gitem { display: block; overflow: hidden; border-radius: var(--sfx-radius); }
.sfx-tl__gitem .sfx-tl__img { aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }
.sfx-tl__gitem:hover .sfx-tl__img { transform: scale(1.05); }
.sfx-tl__gitem:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; }
.sfx-tl__kicker { margin: 0 0 .25rem; color: var(--sfx-tone-fg, var(--sfx-link)); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sfx-tl__title { margin: 0 0 .375rem; font-size: 1.25rem; }
.sfx-tl__meta { margin: 0 0 .75rem; color: var(--sfx-text-muted); font-size: .875rem; }
.sfx-tl__text { margin: 0 0 .75rem; }
.sfx-tl__more { margin: 0; font-weight: 700; }
.sfx-tl__quote { margin: 0 0 .75rem; padding: 1rem 1.25rem; border-left: 4px solid var(--sfx-tone); background: color-mix(in srgb, var(--sfx-tone) 6%, transparent); }
.sfx-tl__quote blockquote { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.1875rem; font-style: italic; line-height: 1.5; }
.sfx-tl__quote blockquote p { margin: 0; }
.sfx-tl__quote figcaption { margin-top: .75rem; color: var(--sfx-heading); font-weight: 700; }
.sfx-tl__linkbox { display: block; margin-bottom: .75rem; padding: 1.5rem 1.25rem; border-radius: var(--sfx-radius); background: var(--sfx-section-grey-bg); color: var(--sfx-heading) !important; text-align: center; text-decoration: none; }
.sfx-tl__linkbox:hover .sfx-tl__linktitle { text-decoration: underline; }
.sfx-tl__linkbox:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; }
.sfx-tl__linktitle { display: block; font-family: var(--sfx-font-display); font-size: 1.375rem; font-weight: 700; }
.sfx-tl__linkurl { display: block; margin-top: .25rem; color: var(--sfx-text-muted); font-size: .875rem; }
.sfx-tl__note { margin-bottom: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--sfx-border); border-radius: var(--sfx-radius); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06); }
.sfx-tl__note p { margin: 0; }
.sfx-tl__dot { position: absolute; width: 1rem; height: 1rem; border: 3px solid var(--sfx-tone); border-radius: 50%; background: var(--sfx-main-bg); }

/* mittig, abwechselnd */
.sfx-tl--center .sfx-tl__month { text-align: center; }
.sfx-tl--center .sfx-tl__list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--sfx-tl-line); }
@media (min-width: 768px) {
  .sfx-tl--center .sfx-tl__list { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
.sfx-tl--center .sfx-tl__item { position: relative; grid-column: 1; padding: 0 2.5rem 3rem 0; }
.sfx-tl--center .sfx-tl__item:nth-child(even) { grid-column: 2; margin-top: 5rem; padding: 0 0 3rem 2.5rem; }
.sfx-tl--center .sfx-tl__dot { top: 1.25rem; right: -.5rem; }
.sfx-tl--center .sfx-tl__item:nth-child(even) .sfx-tl__dot { right: auto; left: -.5rem; }
.sfx-tl--center .sfx-tl__item::after { content: ""; position: absolute; top: 1.7rem; right: .5rem; width: 1.75rem; height: 2px; background: var(--sfx-tl-line); }
.sfx-tl--center .sfx-tl__item:nth-child(even)::after { right: auto; left: .5rem; }

/* Linie links bzw. rechts mit Datumsplakette */
.sfx-tl--left .sfx-tl__list::before, .sfx-tl--right .sfx-tl__list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.75rem; width: 2px; background: var(--sfx-tl-line); }
.sfx-tl--right .sfx-tl__list::before { left: auto; right: 1.75rem; }
.sfx-tl--left .sfx-tl__item, .sfx-tl--right .sfx-tl__item { position: relative; padding: 0 0 3rem 5.5rem; }
.sfx-tl--right .sfx-tl__item { padding: 0 5.5rem 3rem 0; }
.sfx-tl__badge { position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
  border: 2px solid var(--sfx-tl-line); border-radius: 50%; background: var(--sfx-main-bg); color: var(--sfx-heading); line-height: 1; }
.sfx-tl--right .sfx-tl__badge { left: auto; right: 0; }
.sfx-tl__day { font-family: var(--sfx-font-display); font-size: 1.25rem; font-weight: 700; }
.sfx-tl__mon { margin-top: .125rem; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.sfx-tl--left .sfx-tl__dot, .sfx-tl--right .sfx-tl__dot { top: 1.25rem; left: 1.25rem; }
.sfx-tl--right .sfx-tl__dot { left: auto; right: 1.25rem; }
.sfx-tl--left .sfx-tl__month, .sfx-tl--right .sfx-tl__month { padding-left: 0; }
.sfx-tl--right .sfx-tl__month { text-align: right; }

/* Smartphone: immer eine Spalte, Linie links */
@media (max-width: 767.98px) {
  .sfx-tl--center .sfx-tl__list::before { left: .5rem; }
  .sfx-tl--center .sfx-tl__item, .sfx-tl--center .sfx-tl__item:nth-child(even) { margin: 0; padding: 0 0 2.5rem 2.25rem; }
  .sfx-tl--center .sfx-tl__dot, .sfx-tl--center .sfx-tl__item:nth-child(even) .sfx-tl__dot { right: auto; left: 0; }
  .sfx-tl--center .sfx-tl__item::after { display: none; }
  .sfx-tl--center .sfx-tl__month { text-align: left; }
  .sfx-tl--left .sfx-tl__item, .sfx-tl--right .sfx-tl__item { padding: 0 0 2.5rem 4.5rem; }
  .sfx-tl--right .sfx-tl__list::before { left: 1.75rem; right: auto; }
  .sfx-tl--right .sfx-tl__badge { left: 0; right: auto; }
  .sfx-tl--right .sfx-tl__month { text-align: left; }
}
.sfx-on-dark .sfx-tl__month span, .sfx-on-dark .sfx-tl__badge { background: transparent; color: #ffffff; }
.sfx-on-dark .sfx-tl__dot { background: #1d1f22; }

/* --------------------------------------------------------------------------
   17. Bildkacheln (Modul 30) – nach block-content-gallery-3/4/5/7/9.html
   -------------------------------------------------------------------------- */
.sfx-tiles { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sfx-tiles__intro { max-width: 46rem; margin: 0 auto 2rem; }
.sfx-tiles__intro.text-center { margin-inline: auto; }
.sfx-tiles__box { position: relative; display: block; height: 100%; overflow: hidden; color: inherit; text-decoration: none; }
a.sfx-tiles__box:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 3px; }
.sfx-tiles__frame { display: block; height: 100%; overflow: hidden; background: var(--sfx-section-grey-bg); }
.sfx-tiles__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.sfx-tiles__box:hover .sfx-tiles__img { transform: scale(1.05); }
.sfx-tiles__title { display: block; font-family: var(--sfx-font-display); font-weight: 700; line-height: 1.2; }
.sfx-tiles__sub { display: block; font-size: .8125rem; }
.sfx-tiles__more { display: inline-block; margin-top: .375rem; font-size: .875rem; font-weight: 700; }
a.sfx-tiles__box:hover .sfx-tiles__more { text-decoration: underline; }
/* Text auf dem Bild: immer auf dunklem Verlauf */
.sfx-tiles--categories .sfx-tiles__text, .sfx-tiles--posts .sfx-tiles__text, .sfx-tiles--mosaic .sfx-tiles__text {
  position: absolute; inset: auto 0 0 0; z-index: 1; padding: 3rem 1.25rem 1.125rem; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #ffffff; }
/* Kategorie-Kacheln: 2 – 3 – 2 */
.sfx-tiles--categories { grid-template-columns: repeat(6, 1fr); }
.sfx-tiles--categories .sfx-tiles__item { grid-column: span 2; aspect-ratio: 4 / 3; }
.sfx-tiles--categories .sfx-tiles__item:nth-child(7n + 1), .sfx-tiles--categories .sfx-tiles__item:nth-child(7n + 2),
.sfx-tiles--categories .sfx-tiles__item:nth-child(7n + 6), .sfx-tiles--categories .sfx-tiles__item:nth-child(7n + 7) { grid-column: span 3; aspect-ratio: 16 / 7; }
.sfx-tiles--categories .sfx-tiles__box { border-radius: var(--sfx-radius); }
.sfx-tiles--categories .sfx-tiles__title { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; }
/* Karten versetzt */
.sfx-tiles--cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: start; }
.sfx-tiles--cards .sfx-tiles__frame { aspect-ratio: 3 / 4; border-radius: var(--sfx-radius); }
.sfx-tiles--cards .sfx-tiles__text { display: block; padding-top: .75rem; text-align: center; }
.sfx-tiles--cards .sfx-tiles__sub { color: var(--sfx-text-muted); }
.sfx-tiles--cards .sfx-tiles__box { height: auto; }
@media (min-width: 768px) {
  .sfx-tiles--cards.sfx-tiles--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sfx-tiles--cards.sfx-tiles--cols-4 { grid-template-columns: repeat(4, 1fr); }
  .sfx-tiles--cards.sfx-tiles--cols-5 { grid-template-columns: repeat(5, 1fr); }
  .sfx-tiles--cards .sfx-tiles__item:nth-child(even) { margin-top: 2.5rem; }
}
/* Mosaik: volle Breite, ohne Abstände, Muster groß/klein */
.sfx-mod--tiles-mosaic > .container-fluid { padding-inline: 0; }
.sfx-mod--tiles-mosaic > .container-fluid > :is(h2, h3, .sfx-tiles__intro) { padding-inline: 1rem; }
.sfx-tiles--mosaic { grid-template-columns: repeat(6, 1fr); gap: 0; grid-auto-flow: dense; }
.sfx-tiles--mosaic .sfx-tiles__item { grid-column: span 2; aspect-ratio: 4 / 3; }
.sfx-tiles--mosaic .sfx-tiles__item:nth-child(8n + 1), .sfx-tiles--mosaic .sfx-tiles__item:nth-child(8n + 2) { grid-column: span 3; }
.sfx-tiles--mosaic .sfx-tiles__item:nth-child(8n + 6) { grid-column: span 6; aspect-ratio: 21 / 8; }
.sfx-tiles--mosaic .sfx-tiles__item:nth-child(8n + 7), .sfx-tiles--mosaic .sfx-tiles__item:nth-child(8n + 8) { grid-column: span 3; }
.sfx-tiles--mosaic .sfx-tiles__text { opacity: 0; transition: opacity .3s ease; }
.sfx-tiles--mosaic .sfx-tiles__box:hover .sfx-tiles__text, .sfx-tiles--mosaic .sfx-tiles__box:focus-visible .sfx-tiles__text { opacity: 1; }
@media (hover: none) { .sfx-tiles--mosaic .sfx-tiles__text { opacity: 1; } }
/* Beitragskacheln: 3 Spalten, unterschiedliche Höhen */
.sfx-tiles--posts { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 9rem; gap: .75rem; }
.sfx-tiles--posts .sfx-tiles__item { grid-row: span 2; }
.sfx-tiles--posts .sfx-tiles__item:nth-child(3n + 2) { grid-row: span 3; }
.sfx-tiles--posts .sfx-tiles__item:nth-child(4n + 1) { grid-row: span 3; }
.sfx-tiles--posts .sfx-tiles__box { border-radius: var(--sfx-radius); }
.sfx-tiles--posts .sfx-tiles__sub { margin-bottom: .25rem; opacity: .9; }
.sfx-tiles--posts .sfx-tiles__title { font-size: 1rem; }
/* Raute */
.sfx-tiles--diamond { grid-template-columns: 1fr 1fr; gap: .75rem; width: min(68%, 26rem); margin: 4rem auto; transform: rotate(45deg); }
.sfx-tiles--diamond .sfx-tiles__item { aspect-ratio: 1; }
.sfx-tiles--diamond .sfx-tiles__box { border-radius: var(--sfx-radius); }
.sfx-tiles--diamond .sfx-tiles__img { transform: rotate(-45deg) scale(1.42); }
.sfx-tiles--diamond a.sfx-tiles__box:hover .sfx-tiles__img { transform: rotate(-45deg) scale(1.5); }
.sfx-tiles--diamond .sfx-tiles__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767.98px) {
  .sfx-tiles--categories, .sfx-tiles--mosaic { grid-template-columns: 1fr 1fr; }
  .sfx-tiles--categories .sfx-tiles__item, .sfx-tiles--categories .sfx-tiles__item:nth-child(n), .sfx-tiles--mosaic .sfx-tiles__item, .sfx-tiles--mosaic .sfx-tiles__item:nth-child(n) { grid-column: span 1; aspect-ratio: 1; }
  .sfx-tiles--categories .sfx-tiles__item:nth-child(3n + 1), .sfx-tiles--mosaic .sfx-tiles__item:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .sfx-tiles--posts { grid-template-columns: 1fr 1fr; grid-auto-rows: 8rem; }
  .sfx-tiles--diamond { width: min(66%, 18rem); margin: 3rem auto; }
}

/* --------------------------------------------------------------------------
   18. Zitate (Modul 31) – nach quotes-blockquotes.html
   -------------------------------------------------------------------------- */
.sfx-quote { position: relative; height: 100%; margin: 0; }
.sfx-quote__text { margin: 0; }
.sfx-quote__text p { margin: 0; }
.sfx-quote__caption { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; color: var(--sfx-text-muted); font-size: .875rem; }
.sfx-quote__who { display: flex; flex-direction: column; }
.sfx-quote__author { color: var(--sfx-heading); font-weight: 700; }
.sfx-quote__img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.sfx-quote__mark { position: absolute; top: -.5rem; left: 0; color: var(--sfx-tone); font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1; opacity: .9; }
.sfx-quotes--border .sfx-quote, .sfx-quotes--footer .sfx-quote, .sfx-quotes--pull .sfx-quote { padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--sfx-tone); }
.sfx-quotes--border .sfx-quote__text, .sfx-quotes--footer .sfx-quote__text, .sfx-quotes--right .sfx-quote__text { font-size: 1.125rem; }
.sfx-quotes--footer .sfx-quote__caption::before { content: "—"; }
.sfx-quotes--right .sfx-quote { padding: .25rem 1.25rem .25rem 0; border-right: 4px solid var(--sfx-tone); text-align: right; }
.sfx-quotes--right .sfx-quote__caption { justify-content: flex-end; }
.sfx-quotes--right .sfx-quote__who { align-items: flex-end; }
.sfx-quotes--large .sfx-quote { padding-top: 3.5rem; text-align: center; }
.sfx-quotes--large .sfx-quote__mark { left: 50%; transform: translateX(-50%); }
.sfx-quotes--large .sfx-quote__text { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-style: italic; line-height: 1.45; color: var(--sfx-heading); }
.sfx-quotes--large .sfx-quote__caption { justify-content: center; margin-top: 1.25rem; }
.sfx-quotes--large .sfx-quote__who { align-items: flex-start; text-align: left; }
.sfx-quotes--card .sfx-quote { padding: 3rem 1.5rem 1.5rem; border-radius: calc(var(--sfx-radius) * 3); background: var(--sfx-main-bg); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1); }
.sfx-quotes--card .sfx-quote__mark { top: .25rem; left: 1.25rem; font-size: 4rem; }
.sfx-quotes--pull { display: flow-root; }
.sfx-quotes__pull { float: left; width: min(40%, 22rem); margin: .25rem 2rem 1rem 0; }
.sfx-quotes__pull .sfx-quote__text { font-size: 1.25rem; font-weight: 700; color: var(--sfx-heading); }
@media (max-width: 575.98px) { .sfx-quotes__pull { float: none; width: auto; margin: 0 0 1.5rem; } }
.sfx-on-dark .sfx-quote__author, .sfx-on-dark .sfx-quotes--large .sfx-quote__text { color: #ffffff; }
.sfx-on-dark .sfx-quote__caption { color: #d6d9db; }

/* --------------------------------------------------------------------------
   19. Überschrift / Titel-Block (Modul 32) – nach headings-dropcaps.html
   -------------------------------------------------------------------------- */
.sfx-hblock { --sfx-hb-line: var(--sfx-tone); }
.sfx-hblock--center { text-align: center; }
.sfx-hblock--right { text-align: right; }
.sfx-hblock__title { margin: 0; }
.sfx-hblock--h2 .sfx-hblock__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.sfx-hblock__kicker { margin: 0 0 .5rem; color: var(--sfx-tone-fg); font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sfx-hblock--kicker-below .sfx-hblock__kicker { margin: .5rem 0 0; }
.sfx-hblock--kicker .sfx-hblock__title, .sfx-hblock--kicker-below .sfx-hblock__title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.sfx-hblock__sub { margin: .5rem 0 0; color: var(--sfx-text-muted); font-size: 1.0625rem; }
.sfx-hblock__text { max-width: 46rem; margin: 1rem auto 0; }
.sfx-hblock__divider { display: block; width: 3rem; height: 2px; margin: 1.25rem auto 0; background: var(--sfx-hb-line); }
/* Titel-Block: Balken links */
.sfx-hblock--titleblock { padding-left: 1.25rem; border-left: 5px solid var(--sfx-hb-line); text-align: left; }
.sfx-hblock--titleblock .sfx-hblock__sub { margin-top: .25rem; font-size: .9375rem; }
/* Doppellinie / Linien beidseitig / farbige Linie vorn */
.sfx-hblock--double .sfx-hblock__title, .sfx-hblock--single .sfx-hblock__title, .sfx-hblock--bordercolor .sfx-hblock__title { display: flex; align-items: center; gap: 1rem; }
.sfx-hblock--double .sfx-hblock__title::after { content: ""; flex: 1 1 auto; height: 6px; border-top: 2px solid var(--sfx-border); border-bottom: 2px solid var(--sfx-border); }
.sfx-hblock--double.sfx-hblock--right .sfx-hblock__title { flex-direction: row-reverse; }
.sfx-hblock--single .sfx-hblock__title::before, .sfx-hblock--single .sfx-hblock__title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--sfx-border); }
.sfx-hblock--bordercolor .sfx-hblock__title::before { content: ""; flex: 1 1 auto; height: 2px; background: var(--sfx-hb-line); }
.sfx-hblock--bordercolor.sfx-hblock--left .sfx-hblock__title { flex-direction: row-reverse; }
.sfx-hblock--single .sfx-hblock__sub, .sfx-hblock--double .sfx-hblock__sub, .sfx-hblock--bordercolor .sfx-hblock__sub { margin-top: .75rem; }
/* farbige Linie unter der Überschrift */
.sfx-hblock--bottom .sfx-hblock__title { padding-bottom: .625rem; border-bottom: 2px solid var(--sfx-hb-line); }
.sfx-hblock--bottom .sfx-hblock__sub { margin-top: 1rem; color: var(--sfx-text); font-size: 1rem; }
/* Text-Rotator */
.sfx-hblock__rotator { display: inline-block; color: var(--sfx-tone-fg); transition: opacity .18s ease, transform .18s ease; }
.sfx-hblock__rotator.is-out { opacity: 0; transform: translateY(-.25em); }
/* Hervorhebung auf Bild */
.sfx-hblock-emphasis { position: relative; overflow: hidden; color: #ffffff; background: #1b1d20; }
.sfx-hblock-emphasis > .container, .sfx-hblock-emphasis > .container-fluid { position: static; }
.sfx-hblock-emphasis__media { position: absolute; inset: 0; }
.sfx-hblock-emphasis__img { width: 100%; height: 100%; object-fit: cover; }
.sfx-hblock--emphasis { position: relative; z-index: 1; padding-block: 3.5rem; }
.sfx-hblock--emphasis .sfx-hblock__title { color: #ffffff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 400; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.sfx-hblock--emphasis .sfx-hblock__sub, .sfx-hblock--emphasis .sfx-hblock__kicker { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sfx-on-dark .sfx-hblock__kicker, .sfx-on-dark .sfx-hblock__rotator { color: #ffd27a; }
.sfx-on-dark .sfx-hblock__sub { color: #d6d9db; }
@media (prefers-reduced-motion: reduce) { .sfx-hblock__rotator { transition: none; } }

/* --------------------------------------------------------------------------
   20. Listen (Modul 33) – nach lists-cards.html
   -------------------------------------------------------------------------- */
.sfx-list { margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .sfx-list--cols-2 { columns: 2; column-gap: 2rem; }
  .sfx-list--cols-3 { columns: 3; column-gap: 2rem; }
}
.sfx-list__item { break-inside: avoid; }
.sfx-list__row { display: flex; align-items: flex-start; gap: .75rem; padding: .5rem 0; color: inherit; text-decoration: none; }
a.sfx-list__row:hover .sfx-list__text { text-decoration: underline; }
a.sfx-list__row:focus-visible { outline: 3px solid var(--sfx-focus); outline-offset: 2px; }
.sfx-list__body { display: flex; flex: 1 1 auto; flex-direction: column; }
.sfx-list__sub { color: var(--sfx-text-muted); font-size: .875rem; }
.sfx-list__badge { flex: 0 0 auto; padding: .125rem .5rem; border-radius: 999px; background: var(--sfx-tone); color: var(--sfx-tone-on); font-size: .75rem; font-weight: 700; }
.sfx-list__icon { flex: 0 0 auto; width: 1.25rem; margin-top: .2rem; color: var(--sfx-tone-icon); text-align: center; }
.sfx-list__item--off .sfx-list__icon { color: var(--sfx-text-muted); }
.sfx-list__item--off .sfx-list__text { color: var(--sfx-text-muted); }
/* nummeriert */
.sfx-list--numbered { counter-reset: sfx-list; }
.sfx-list--numbered .sfx-list__row::before { counter-increment: sfx-list; content: counter(sfx-list); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--sfx-tone); color: var(--sfx-tone-on); font-size: .8125rem; font-weight: 700; }
/* mit Rahmen / Trennlinien */
.sfx-list--group, .sfx-list--contextual, .sfx-list--custom { border: 1px solid var(--sfx-border); border-radius: var(--sfx-radius); }
.sfx-list--group .sfx-list__row, .sfx-list--flush .sfx-list__row, .sfx-list--contextual .sfx-list__row, .sfx-list--custom .sfx-list__row { padding: .75rem 1rem; }
.sfx-list--group .sfx-list__item + .sfx-list__item, .sfx-list--flush .sfx-list__item + .sfx-list__item, .sfx-list--contextual .sfx-list__item + .sfx-list__item, .sfx-list--custom .sfx-list__item + .sfx-list__item { border-top: 1px solid var(--sfx-border); }
.sfx-list--flush .sfx-list__row { padding-inline: 0; }
a.sfx-list__row:hover { background: color-mix(in srgb, var(--sfx-tone) 6%, transparent); }
.sfx-list--custom .sfx-list__text { color: var(--sfx-heading); font-weight: 700; }
/* farbige Zeilen */
.sfx-list--contextual .sfx-list__item--success { background: #e5f4ec; color: #14532d; }
.sfx-list--contextual .sfx-list__item--info { background: #e7f0fc; color: #123b73; }
.sfx-list--contextual .sfx-list__item--warning { background: #fff5d9; color: #5c3d00; }
.sfx-list--contextual .sfx-list__item--danger { background: #fdecea; color: #7d1c11; }
[data-bs-theme="dark"] .sfx-list--contextual .sfx-list__item--success { background: #13301f; color: #c7ecd6; }
[data-bs-theme="dark"] .sfx-list--contextual .sfx-list__item--info { background: #13243d; color: #c9dcf7; }
[data-bs-theme="dark"] .sfx-list--contextual .sfx-list__item--warning { background: #3a2d0b; color: #f8e2a8; }
[data-bs-theme="dark"] .sfx-list--contextual .sfx-list__item--danger { background: #3d1712; color: #f7cbc5; }
.sfx-list--contextual .sfx-list__sub { color: inherit; opacity: .85; }

/* --------------------------------------------------------------------------
   21. Video und Audio, Zwei-Klick-Einbettung (Module 34, 36) – nach media-actions / media-embeds / video-facade
   -------------------------------------------------------------------------- */
.sfx-ratio-box { position: relative; aspect-ratio: var(--sfx-ratio, 16 / 9); }
.sfx-media-item { margin: 0; }
.sfx-media-item__caption { display: flex; flex-direction: column; gap: .125rem; margin-top: .625rem; font-size: .9375rem; }
.sfx-media-item__caption span { color: var(--sfx-text-muted); }
.sfx-media { position: relative; overflow: hidden; border-radius: var(--sfx-radius); }
.sfx-media--video { background: #000; }
.sfx-media--video .sfx-media__el { display: block; width: 100%; height: 100%; object-fit: cover; }
.sfx-media__bar { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; display: flex; gap: .5rem; }
.sfx-media__bar[hidden] { display: none; }
.sfx-media__play, .sfx-media__mute, .sfx-media__toggle { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #1d1f22; font-size: 1.125rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3); cursor: pointer; }
.sfx-media__play:hover, .sfx-media__mute:hover, .sfx-media__toggle:hover { background: #ffffff; }
.sfx-media__play:focus-visible, .sfx-media__mute:focus-visible, .sfx-media__toggle:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; box-shadow: 0 0 0 6px #1d1f22; }
.sfx-media--video.is-custom:not(.is-playing) .sfx-media__bar { left: 50%; bottom: 50%; transform: translate(-50%, 50%); }
.sfx-media--video.is-custom:not(.is-playing) .sfx-media__play { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
.sfx-media--video.is-custom:not(.is-playing) .sfx-media__mute { display: none; }
.sfx-media__toggle { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; width: 2.5rem; height: 2.5rem; font-size: .9375rem; }
.sfx-media__toggle[hidden], .sfx-media__play[hidden] { display: none; }
.sfx-media--audio { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--sfx-border); background: var(--sfx-main-bg); }
.sfx-media--audio .sfx-media__el { flex: 1 1 auto; width: 100%; }
.sfx-media--audio.is-custom .sfx-media__el { display: none; }
.sfx-media--audio .sfx-media__play { width: 2.75rem; height: 2.75rem; background: var(--sfx-accent-strong); color: #ffffff; box-shadow: none; }
.sfx-media--audio .sfx-media__play:focus-visible { outline-color: var(--sfx-focus); box-shadow: none; }
.sfx-media__track { flex: 1 1 auto; color: var(--sfx-heading); font-weight: 700; }
/* Zwei-Klick-Einbettung */
.sfx-embed { position: relative; overflow: hidden; border-radius: var(--sfx-radius); background: #2a2d31; color: #ffffff; }
.sfx-embed--map { min-height: 20rem; background: #e8eaec; color: #1d1f22; }
.sfx-embed__poster { position: absolute; inset: 0; }
.sfx-embed__img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.sfx-embed__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.25rem; text-align: center; }
.sfx-embed__btn { display: inline-flex; align-items: center; gap: .625rem; padding: .75rem 1.25rem; border: 0; border-radius: 999px; background: var(--sfx-accent-strong); color: #ffffff; font-weight: 700; cursor: pointer; }
.sfx-embed__btn:hover { background: var(--sfx-accent-strong-hover); }
.sfx-embed__btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; box-shadow: 0 0 0 6px #1d1f22; }
.sfx-embed__note { max-width: 30rem; margin: 0; padding: .375rem .75rem; border-radius: var(--sfx-radius); background: rgba(29, 31, 34, .85); font-size: .8125rem; }
.sfx-embed__note a { color: inherit; }
.sfx-embed--map .sfx-embed__note { background: rgba(255, 255, 255, .9); }
[data-bs-theme="dark"] .sfx-embed--map .sfx-embed__note { background: rgba(29, 31, 34, .85); }
.sfx-embed--map .sfx-embed__btn:focus-visible { outline-color: var(--sfx-focus); box-shadow: none; }
.sfx-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-bs-theme="dark"] .sfx-embed--map { background: #2a2d31; color: #ffffff; }

/* --------------------------------------------------------------------------
   22. Laufschrift (Modul 35) – nach ticker.html, nutzt das Laufband aus Modul 09
   -------------------------------------------------------------------------- */
.sfx-ticker { margin-bottom: 0; padding: .875rem 3.5rem .875rem 0; border-radius: var(--sfx-radius); }
.sfx-ticker .sfx-marquee__viewport { mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.sfx-ticker .sfx-marquee__list { gap: 0; padding-right: 0; }
.sfx-ticker .sfx-marquee__list > li { width: auto; }
.sfx-ticker__item { display: inline-flex; align-items: center; white-space: nowrap; }
.sfx-ticker__item > a, .sfx-ticker__item > span { color: inherit; }
.sfx-ticker__item > a:hover { text-decoration: underline; }
.sfx-ticker__item::after { content: "•"; margin: 0 1.75rem; opacity: .55; }
.sfx-ticker--sep-star .sfx-ticker__item::after { content: "✶"; }
.sfx-ticker--sep-slash .sfx-ticker__item::after { content: "/"; }
.sfx-ticker--sep-none .sfx-ticker__item::after { content: ""; margin: 0 1.25rem; }
.sfx-ticker__badge { display: inline-block; margin-right: .375rem; padding: .0625rem .5rem; border-radius: 999px; background: var(--sfx-accent-strong); color: #ffffff; font-size: .75em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: .1em; }
.sfx-ticker--s { font-size: .9375rem; }
.sfx-ticker--m { font-size: 1.125rem; }
.sfx-ticker--l { font-family: var(--sfx-font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; }
.sfx-ticker--right.is-enhanced .sfx-marquee__inner { animation-direction: reverse; }
.sfx-ticker .sfx-marquee__toggle { top: 50%; right: .5rem; bottom: auto; transform: translateY(-50%); }
.sfx-ticker--light { background: var(--sfx-section-grey-bg); --sfx-text-muted: #55585c; }
.sfx-ticker--dark { background: #2f3338; color: #ffffff; }
.sfx-ticker--accent { background: var(--sfx-accent-strong); color: #ffffff; }
.sfx-ticker--accent .sfx-ticker__badge { background: #ffffff; color: #9c2416; }
.sfx-ticker--soft { background: #e3f3f1; color: #0f4f4a; }
[data-bs-theme="dark"] .sfx-ticker--soft { background: #133a37; color: #c7ece7; }
.sfx-ticker--plain { padding-left: 0; }
.sfx-ticker--dark .sfx-marquee__toggle, .sfx-ticker--accent .sfx-marquee__toggle { border-color: rgba(255, 255, 255, .5); background: transparent; color: #ffffff; }
.sfx-ticker:not(.sfx-ticker--plain) { padding-left: 0; }
@media (prefers-reduced-motion: reduce) { .sfx-ticker .sfx-marquee__list { justify-content: flex-start; padding-left: 1rem; row-gap: .5rem; } .sfx-ticker__item { white-space: normal; } }

/* --------------------------------------------------------------------------
   23. Karte (Modul 36) – nach maps.html
   -------------------------------------------------------------------------- */
.sfx-map--s { height: 300px; min-height: 0; }
.sfx-map--m { height: 420px; min-height: 0; }
.sfx-map--l { height: 560px; min-height: 0; }
.sfx-mod--map-full > .container-fluid { padding-inline: 0; }
.sfx-mod--map-full > .container-fluid > :is(h2, h3) { padding-inline: 1rem; }
.sfx-mod--map-full .sfx-map { border-radius: 0; }
.sfx-mod--map-full .sfx-map__below { padding-inline: 1rem; }
.sfx-map__below { margin-top: 1.5rem; }
.sfx-map__links { margin: 1.25rem 0 0; }
.sfx-embed--map::before { content: ""; position: absolute; inset: 0; background:
  repeating-linear-gradient(0deg, transparent 0 38px, rgba(0, 0, 0, .05) 38px 40px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 0, 0, .05) 38px 40px); }
[data-bs-theme="dark"] .sfx-embed--map::before { background:
  repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, .05) 38px 40px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, .05) 38px 40px); }

/* --------------------------------------------------------------------------
   24. Initiale (Modul 02) und Hervorhebung im Text – nach headings-dropcaps.html
   -------------------------------------------------------------------------- */
.sfx-dropcap > p:first-child::first-letter { float: left; margin: .1em .5rem 0 0; color: var(--sfx-heading); font-family: Georgia, "Times New Roman", serif; font-size: 3.6em; font-weight: 700; line-height: .82; }
.sfx-dropcap--bordered > p:first-child::first-letter { margin-top: .15em; padding: .12em .14em; border: 2px solid var(--sfx-accent); font-size: 2.6em; line-height: .9; }
.sfx-dropcap--background > p:first-child::first-letter { margin-top: .15em; padding: .14em .18em; background: var(--sfx-accent-strong); color: #ffffff; font-size: 2.6em; line-height: .9; }
.sfx-dropcap--circle > p:first-child::first-letter { margin-top: .12em; padding: .18em .28em; border-radius: 50%; background: #2f3338; color: #ffffff; font-size: 2.2em; line-height: 1; }
.sfx-dropcap--outline > p:first-child::first-letter { color: transparent; -webkit-text-stroke: 1.5px var(--sfx-heading); }
.sfx-bg-dark .sfx-dropcap > p:first-child::first-letter, .sfx-bg-accent .sfx-dropcap > p:first-child::first-letter { color: #ffffff; }
.sfx-mod--text .sfx-richtext mark, .sfx-mod--textimage .sfx-richtext mark { padding: .05em .25em; border-radius: 2px; background: #2f3338; color: #ffffff; }

/* --------------------------------------------------------------------------
   25. Tabs – weitere Stile (Modul 05) – nach tabs.html
   -------------------------------------------------------------------------- */
.sfx-tabs__nav.nav-underline { --bs-nav-underline-gap: 1.5rem; --bs-nav-underline-border-width: 2px; --bs-nav-underline-link-active-color: var(--sfx-heading); border-bottom: 1px solid var(--sfx-border); }
.sfx-tabs__nav.nav-underline .nav-link.active { border-bottom-color: var(--sfx-accent); }
.sfx-tabs__nav--topline.nav-underline { border-bottom: 0; }
.sfx-tabs__nav--topline.nav-underline .nav-link { border-top: 2px solid transparent; border-bottom: 0; }
.sfx-tabs__nav--topline.nav-underline .nav-link.active { border-top-color: var(--sfx-accent); }
.sfx-tabs--boxed .sfx-tabs__content { padding: 1.5rem; border: 1px solid var(--sfx-border); border-top: 0; border-radius: 0 0 var(--sfx-radius) var(--sfx-radius); }
.sfx-tabs__nav--alt.nav-pills { --bs-nav-pills-link-active-bg: var(--sfx-heading); gap: .25rem; padding: .375rem; border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-section-grey-bg); }
[data-bs-theme="dark"] .sfx-tabs__nav--alt.nav-pills { --bs-nav-pills-link-active-bg: #eef0f1; --bs-nav-pills-link-active-color: #1d1f22; }
.sfx-tabs__icon { margin-right: .375rem; }
.sfx-tabs__stack { display: inline-flex; flex-direction: column; align-items: center; gap: .375rem; }
.sfx-tabs__stack .sfx-tabs__icon { margin: 0; font-size: 1.375rem; }
.sfx-tabs__nav .nav-link:has(> .sfx-tabs__icon:only-of-type + .visually-hidden) .sfx-tabs__icon { margin: 0; font-size: 1.25rem; }
@media (min-width: 768px) {
  .sfx-tabs--pos-left, .sfx-tabs--pos-right { display: flex !important; gap: 2rem; align-items: flex-start; }
  .sfx-tabs--pos-right { flex-direction: row-reverse; }
  .sfx-tabs--pos-left .sfx-tabs__nav, .sfx-tabs--pos-right .sfx-tabs__nav { flex: 0 0 13rem; border-bottom: 0; }
  .sfx-tabs--pos-left .sfx-tabs__content, .sfx-tabs--pos-right .sfx-tabs__content { flex: 1 1 auto; padding-top: 0; }
  .sfx-tabs--pos-left .sfx-tabs__nav.nav-tabs { border-bottom: 0; border-right: 1px solid var(--sfx-border); }
  .sfx-tabs--pos-right .sfx-tabs__nav.nav-tabs { border-bottom: 0; border-left: 1px solid var(--sfx-border); }
  .sfx-tabs--pos-left .sfx-tabs__nav.nav-tabs .nav-link { margin: 0 -1px 0 0; border-radius: var(--sfx-radius) 0 0 var(--sfx-radius); text-align: left; }
  .sfx-tabs--pos-right .sfx-tabs__nav.nav-tabs .nav-link { margin: 0 0 0 -1px; border-radius: 0 var(--sfx-radius) var(--sfx-radius) 0; text-align: left; }
  .sfx-tabs--pos-left .sfx-tabs__nav.nav-tabs .nav-link.active { border-top: 1px solid var(--sfx-border); border-left: 3px solid var(--sfx-accent); border-color: var(--sfx-border) var(--sfx-main-bg) var(--sfx-border) var(--sfx-accent); }
  .sfx-tabs--pos-right .sfx-tabs__nav.nav-tabs .nav-link.active { border-top: 1px solid var(--sfx-border); border-color: var(--sfx-border) var(--sfx-accent) var(--sfx-border) var(--sfx-main-bg); border-right-width: 3px; }
  .sfx-tabs--pos-left .sfx-tabs__nav.nav-underline { --bs-nav-underline-gap: 0; border-right: 1px solid var(--sfx-border); }
  .sfx-tabs--pos-left .sfx-tabs__nav.nav-underline .nav-link { padding: .5rem 1rem .5rem 0; border-bottom: 0; border-right: 2px solid transparent; text-align: left; }
  .sfx-tabs--pos-left .sfx-tabs__nav.nav-underline .nav-link.active { border-right-color: var(--sfx-accent); }
  .sfx-tabs--pos-right .sfx-tabs__nav.nav-underline { --bs-nav-underline-gap: 0; border-left: 1px solid var(--sfx-border); }
  .sfx-tabs--pos-right .sfx-tabs__nav.nav-underline .nav-link { padding: .5rem 0 .5rem 1rem; border-bottom: 0; border-left: 2px solid transparent; text-align: left; }
  .sfx-tabs--pos-right .sfx-tabs__nav.nav-underline .nav-link.active { border-left-color: var(--sfx-accent); }
  .sfx-tabs--pos-left .sfx-tabs__nav.nav-pills, .sfx-tabs--pos-right .sfx-tabs__nav.nav-pills { gap: .25rem; }
  .sfx-tabs--pos-left.sfx-tabs--boxed .sfx-tabs__content, .sfx-tabs--pos-right.sfx-tabs--boxed .sfx-tabs__content { border-top: 1px solid var(--sfx-border); border-radius: var(--sfx-radius); }
}

/* --------------------------------------------------------------------------
   26. Häufige Fragen – weitere Stile (Modul 15) – nach toggles-accordions.html
   -------------------------------------------------------------------------- */
.sfx-faq .sfx-faq__q::after { background: var(--sfx-tone); color: var(--sfx-tone-on); }
.sfx-faq--icon-plus-left .sfx-faq__q, .sfx-faq--icon-chevron-left .sfx-faq__q { padding-left: 2.75rem; padding-right: 0; }
.sfx-faq--icon-plus-left .sfx-faq__q::after, .sfx-faq--icon-chevron-left .sfx-faq__q::after { left: .25rem; right: auto; }
.sfx-faq--icon-chevron .sfx-faq__q::after, .sfx-faq--icon-chevron-left .sfx-faq__q::after { content: ""; width: .625rem; height: .625rem; border: solid var(--sfx-tone-icon); border-width: 0 2px 2px 0; border-radius: 0; background: none;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.sfx-faq--icon-chevron .sfx-faq__item[open] > .sfx-faq__q::after, .sfx-faq--icon-chevron-left .sfx-faq__item[open] > .sfx-faq__q::after { content: ""; transform: translateY(-30%) rotate(-135deg); }
.sfx-faq--icon-chevron-left .sfx-faq__q::after { left: .75rem; }
/* Flächen und Rahmen: Abstand zwischen den Fragen */
.sfx-faq--background, .sfx-faq--bordered, .sfx-faq--card, .sfx-faq--accent, .sfx-faq--pill { display: grid; gap: .75rem; border-top: 0; }
.sfx-faq--background .sfx-faq__item, .sfx-faq--bordered .sfx-faq__item, .sfx-faq--card .sfx-faq__item, .sfx-faq--accent .sfx-faq__item, .sfx-faq--pill .sfx-faq__item { border-bottom: 0; }
.sfx-faq--background .sfx-faq__item { border-radius: var(--sfx-radius); background: var(--sfx-section-grey-bg); --sfx-text-muted: #55585c; }
.sfx-faq--bordered .sfx-faq__item { border: 1px solid var(--sfx-border); border-radius: var(--sfx-radius); }
.sfx-faq--card .sfx-faq__item { border-radius: calc(var(--sfx-radius) * 2); background: var(--sfx-main-bg); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .1); }
.sfx-faq--accent .sfx-faq__item { border-left: 4px solid var(--sfx-tone); background: color-mix(in srgb, var(--sfx-tone) 5%, transparent); }
.sfx-faq--pill .sfx-faq__item { border-radius: 1.5rem; background: color-mix(in srgb, var(--sfx-tone) 9%, var(--sfx-main-bg)); }
.sfx-faq--background .sfx-faq__q, .sfx-faq--bordered .sfx-faq__q, .sfx-faq--card .sfx-faq__q, .sfx-faq--accent .sfx-faq__q, .sfx-faq--pill .sfx-faq__q { padding-left: 1.25rem; padding-right: 3.25rem; }
.sfx-faq--background .sfx-faq__q::after, .sfx-faq--bordered .sfx-faq__q::after, .sfx-faq--card .sfx-faq__q::after, .sfx-faq--accent .sfx-faq__q::after, .sfx-faq--pill .sfx-faq__q::after { right: 1rem; }
.sfx-faq--background .sfx-faq__a, .sfx-faq--bordered .sfx-faq__a, .sfx-faq--card .sfx-faq__a, .sfx-faq--accent .sfx-faq__a, .sfx-faq--pill .sfx-faq__a { padding: 0 1.25rem 1.25rem; }
.sfx-faq--background.sfx-faq--icon-plus-left .sfx-faq__q, .sfx-faq--bordered.sfx-faq--icon-plus-left .sfx-faq__q, .sfx-faq--card.sfx-faq--icon-plus-left .sfx-faq__q, .sfx-faq--accent.sfx-faq--icon-plus-left .sfx-faq__q, .sfx-faq--pill.sfx-faq--icon-plus-left .sfx-faq__q,
.sfx-faq--background.sfx-faq--icon-chevron-left .sfx-faq__q, .sfx-faq--bordered.sfx-faq--icon-chevron-left .sfx-faq__q, .sfx-faq--card.sfx-faq--icon-chevron-left .sfx-faq__q, .sfx-faq--accent.sfx-faq--icon-chevron-left .sfx-faq__q, .sfx-faq--pill.sfx-faq--icon-chevron-left .sfx-faq__q { padding-left: 3.5rem; padding-right: 1.25rem; }
.sfx-faq--background.sfx-faq--icon-plus-left .sfx-faq__q::after, .sfx-faq--bordered.sfx-faq--icon-plus-left .sfx-faq__q::after, .sfx-faq--card.sfx-faq--icon-plus-left .sfx-faq__q::after, .sfx-faq--accent.sfx-faq--icon-plus-left .sfx-faq__q::after, .sfx-faq--pill.sfx-faq--icon-plus-left .sfx-faq__q::after { left: 1rem; right: auto; }
.sfx-faq--background.sfx-faq--icon-chevron-left .sfx-faq__q::after, .sfx-faq--bordered.sfx-faq--icon-chevron-left .sfx-faq__q::after, .sfx-faq--card.sfx-faq--icon-chevron-left .sfx-faq__q::after, .sfx-faq--accent.sfx-faq--icon-chevron-left .sfx-faq__q::after, .sfx-faq--pill.sfx-faq--icon-chevron-left .sfx-faq__q::after { left: 1.5rem; right: auto; }
/* schlicht */
.sfx-faq--minimal { border-top: 0; }
.sfx-faq--minimal .sfx-faq__q { padding-block: .625rem; font-size: 1rem; }
.sfx-faq--minimal .sfx-faq__q::after { width: 1.25rem; height: 1.25rem; font-size: .9375rem; }
/* nummeriert */
.sfx-faq--numbered { counter-reset: sfx-faq; }
.sfx-faq--numbered .sfx-faq__q { padding-left: 3rem; }
.sfx-faq--numbered .sfx-faq__q::before { counter-increment: sfx-faq; content: counter(sfx-faq, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--sfx-section-grey-bg); color: var(--sfx-heading); font-size: .8125rem; }
.sfx-faq--numbered.sfx-faq--icon-plus-left .sfx-faq__q, .sfx-faq--numbered.sfx-faq--icon-chevron-left .sfx-faq__q { padding-left: 3rem; }
.sfx-faq--numbered.sfx-faq--icon-plus-left .sfx-faq__q::after, .sfx-faq--numbered.sfx-faq--icon-chevron-left .sfx-faq__q::after { left: auto; right: .25rem; }

/* --------------------------------------------------------------------------
   27. Preisboxen – weitere Darstellungen und Umschalter Monat/Jahr (Modul 06) – nach pricing.html / block-content-pricing-*
   -------------------------------------------------------------------------- */
.sfx-pricing-wrap .sfx-price-card.is-highlight { border-color: var(--sfx-tone); box-shadow: 0 8px 24px color-mix(in srgb, var(--sfx-tone) 18%, transparent); }
.sfx-pricing-wrap .sfx-price-card__badge { background: var(--sfx-tone); color: var(--sfx-tone-on); }
.sfx-pricing-wrap .sfx-price-card__features .is-included i { color: var(--sfx-tone-icon); }
.sfx-price-card__line { display: block; }
.sfx-price-card__mode { display: block; color: var(--sfx-text-muted); font-size: .8125rem; }
.sfx-price-card__line + .sfx-price-card__line { margin-top: .5rem; }
.sfx-price-card__line + .sfx-price-card__line .sfx-price-card__amount { font-size: 1.75rem; }
.is-switchable .sfx-price-card__mode { display: none; }
.is-switchable .sfx-price-card__line + .sfx-price-card__line { margin-top: 0; }
.is-switchable .sfx-price-card__line + .sfx-price-card__line .sfx-price-card__amount { font-size: inherit; }
.is-switchable .sfx-price-card__line[data-sfx-price] .sfx-price-card__amount { font-size: 2.5rem; }
.sfx-price-card__line[hidden] { display: none; }

/* Umschalter */
.sfx-pricing-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; margin: 0 0 2.5rem; }
.sfx-pricing-switch[hidden] { display: none; }
.sfx-pricing-switch__group { display: inline-flex; margin: 0; padding: .25rem; border: 1px solid var(--sfx-border); border-radius: 999px; background: var(--sfx-main-bg); }
.sfx-pricing-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sfx-pricing-switch__label { min-width: 7rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: .375rem 1.25rem; border-radius: 999px; color: var(--sfx-text); font-weight: 600; cursor: pointer; }
.sfx-pricing-switch__input:checked + .sfx-pricing-switch__label { background: var(--sfx-tone); color: var(--sfx-tone-on); }
.sfx-pricing-switch__input:focus-visible + .sfx-pricing-switch__label { outline: 3px solid var(--sfx-focus, #1a56ad); outline-offset: 2px; }
.sfx-pricing-switch__save { padding: .25rem .75rem; border-radius: 999px; background: var(--sfx-tone-soft); color: var(--sfx-tone-fg); font-size: .875rem; font-weight: 600; }

/* schlicht: ohne Rahmen, senkrechte Trennlinien */
.sfx-pricing--simple .sfx-price-card { border: 0; border-radius: 0; background: transparent; padding-inline: 1.25rem; }
@media (min-width: 768px) {
  .sfx-pricing--simple > li + li .sfx-price-card { border-left: 1px solid var(--sfx-border); }
}
.sfx-pricing--simple .sfx-price-card.is-highlight { box-shadow: none; border-top: 4px solid var(--sfx-tone); }
.sfx-pricing--simple .sfx-price-card__badge { position: static; transform: none; align-self: center; margin-bottom: .75rem; }

/* farbig: Kopf in Farbe */
.sfx-pricing--color .sfx-price-card { padding: 0 0 1.5rem; overflow: hidden; }
.sfx-pricing--color .sfx-price-card__head { padding: 2rem 1.5rem 1.25rem; margin-bottom: 1.25rem; background: var(--sfx-tone-soft); }
.sfx-pricing--color .sfx-price-card.is-highlight .sfx-price-card__head { background: var(--sfx-tone); color: var(--sfx-tone-on); }
.sfx-pricing--color .sfx-price-card.is-highlight .sfx-price-card__head :is(.sfx-price-card__name, .sfx-price-card__amount, .sfx-price-card__interval, .sfx-price-card__desc, .sfx-price-card__mode) { color: inherit; }
.sfx-pricing--color .sfx-price-card__features, .sfx-pricing--color .sfx-price-card__cta { margin-inline: 1.5rem; }
.sfx-pricing--color .sfx-price-card__features { border-top: 0; padding-top: 0; }
.sfx-pricing--color .sfx-price-card__badge { position: static; transform: none; border-radius: 0; text-align: center; background: var(--sfx-heading); color: var(--sfx-main-bg); }
.sfx-pricing--color .sfx-price-card__desc { margin-bottom: 0; }

/* Liste: Pakete untereinander */
.sfx-pricing--list .sfx-price-card { display: grid; gap: 1rem 2rem; padding: 1.5rem; }
@media (min-width: 992px) {
  .sfx-pricing--list .sfx-price-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(12rem, .8fr); align-items: center; }
}
.sfx-pricing--list .sfx-price-card__name, .sfx-pricing--list .sfx-price-card__desc, .sfx-pricing--list .sfx-price-card__price { text-align: left; }
.sfx-pricing--list .sfx-price-card__desc { margin: 0; }
.sfx-pricing--list .sfx-price-card__features { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1rem; margin: 0; padding: 0; border: 0; }
.sfx-pricing--list .sfx-price-card__aside { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 992px) {
  .sfx-pricing--list .sfx-price-card__aside { align-items: flex-end; text-align: right; }
  .sfx-pricing--list .sfx-price-card__aside .sfx-price-card__price { text-align: right; }
}
.sfx-pricing--list .sfx-price-card__price { margin: 0; }
.sfx-pricing--list .sfx-price-card__amount { font-size: 2rem; }
.sfx-pricing--list .sfx-price-card__badge { position: static; transform: none; justify-self: start; grid-column: 1 / -1; }

/* Mini: nur Name, Preis, Button */
.sfx-pricing--mini .sfx-price-card { padding: 1.5rem 1.25rem 1.25rem; }
.sfx-pricing--mini .sfx-price-card__name { font-size: 1.125rem; }
.sfx-pricing--mini .sfx-price-card__amount { font-size: 2rem; }
.sfx-pricing--mini .sfx-price-card__head { flex: 1 1 auto; }

/* Vergleichstabelle */
.sfx-pricing-table { position: relative; overflow-x: auto; border-radius: calc(var(--sfx-radius) * 2); }
.sfx-pricing-table:focus-visible { outline: 3px solid var(--sfx-focus, #1a56ad); outline-offset: 2px; }
.sfx-pricing-table__table { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; background: var(--sfx-main-bg); }
.sfx-pricing-table__table :is(th, td) { padding: .875rem 1rem; border-bottom: 1px solid var(--sfx-border); text-align: center; vertical-align: middle; }
.sfx-pricing-table__table tbody th { text-align: left; font-weight: 400; }
.sfx-pricing-table__table thead th { position: relative; padding-top: 2rem; vertical-align: bottom; }
.sfx-pricing-table__plan .sfx-price-card__badge { top: .5rem; transform: translateX(-50%); white-space: nowrap; }
.sfx-pricing-table__name { display: block; color: var(--sfx-heading); font-family: var(--sfx-font-display); font-size: 1.125rem; font-weight: 700; }
.sfx-pricing-table__plan .sfx-price-card__price { display: block; margin: .25rem 0 0; font-weight: 400; }
.sfx-pricing-table__plan .sfx-price-card__amount, .is-switchable .sfx-pricing-table__plan .sfx-price-card__line[data-sfx-price] .sfx-price-card__amount { font-size: 1.625rem; }
.sfx-pricing-table__table .is-highlight { background: var(--sfx-tone-soft); }
.sfx-pricing-table__table td.is-included i { color: var(--sfx-tone-icon); }
.sfx-pricing-table__table td.is-excluded i { color: var(--sfx-text-muted); }
.sfx-pricing-table__table tbody tr:nth-child(even) > :not(.is-highlight) { background: color-mix(in srgb, var(--sfx-border) 30%, transparent); }
.sfx-pricing-table__table tfoot td { border-bottom: 0; padding-block: 1.25rem; }

/* --------------------------------------------------------------------------
   28. Fortschrittsring und -balken (Modul 23) – nach sections.html / Canvas „skills“
   Füllung = --sfx-p (0…1); mit JavaScript startet sie beim Sichtbarwerden (.is-pending → Übergang)
   -------------------------------------------------------------------------- */
.sfx-counter__ring { position: relative; width: min(100%, 10rem); aspect-ratio: 1; margin: 0 auto .75rem; display: grid; place-items: center; }
.sfx-counter__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sfx-counter__ring circle { fill: none; stroke-width: 9; }
.sfx-counter__track { stroke: var(--sfx-border); }
.sfx-counter__fill { stroke: var(--sfx-tone-icon, var(--sfx-accent)); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sfx-p, 0) * 100);
  transition: stroke-dashoffset var(--sfx-count-dur, 2000ms) cubic-bezier(.22, .61, .36, 1); }
.sfx-counters--ring .sfx-counter__value { position: relative; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.is-pending .sfx-counter__fill { stroke-dashoffset: 100; transition: none; }
.sfx-on-dark .sfx-counter__track { stroke: rgba(255, 255, 255, .25); }
.sfx-on-dark .sfx-counter__fill { stroke: #ffffff; }

.sfx-counters--bar .sfx-counter { text-align: left; }
.sfx-counters--bar .sfx-counter__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .25rem 1rem; }
.sfx-counters--bar .sfx-counter__label { margin: 0; text-transform: none; letter-spacing: 0; color: var(--sfx-heading); font-size: 1rem; }
.sfx-counters--bar .sfx-counter__value { grid-column: 2; font-size: 1.125rem; }
.sfx-counters--bar .sfx-counter__bar { grid-column: 1 / -1; height: .625rem; border-radius: 999px; background: var(--sfx-border); overflow: hidden; }
.sfx-counter__barfill { display: block; height: 100%; width: calc(var(--sfx-p, 0) * 100%); border-radius: inherit; background: var(--sfx-tone-icon, var(--sfx-accent)); transition: width var(--sfx-count-dur, 2000ms) cubic-bezier(.22, .61, .36, 1); }
.is-pending .sfx-counter__barfill { width: 0; transition: none; }
.sfx-on-dark .sfx-counters--bar .sfx-counter__label { color: #ffffff; }
.sfx-on-dark .sfx-counters--bar .sfx-counter__bar { background: rgba(255, 255, 255, .25); }
.sfx-on-dark .sfx-counter__barfill { background: #ffffff; }
@media (prefers-reduced-motion: reduce) {
  .sfx-counter__fill, .sfx-counter__barfill { transition: none; }
}

/* --------------------------------------------------------------------------
   29. Hintergrundvideo im Parallax-Bereich (Modul 26) – nach sections.html (section-video)
   -------------------------------------------------------------------------- */
.sfx-parallax__layer--video { inset: 0; }
.sfx-parallax__videotoggle { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 2px solid #ffffff; border-radius: 50%; background: rgba(29, 31, 34, .75); color: #ffffff; font-size: 1rem; }
.sfx-parallax__videotoggle:hover { background: #1d1f22; }
.sfx-parallax__videotoggle:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; box-shadow: 0 0 0 6px #1d1f22; }
.sfx-parallax__videotoggle[hidden] { display: none; }

/* Preisboxen: Einzelpaket mit Leistungsliste (nach op-pricing.html) */
.sfx-mod--pricing-feature.has-media { position: relative; overflow: hidden; isolation: isolate; }
.sfx-pricing-feature__media { position: absolute; inset: 0; z-index: -1; }
.sfx-pricing-feature__media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--sfx-main-bg) 82%, transparent); }
.sfx-pricing-feature__img { width: 100%; height: 100%; object-fit: cover; }
.sfx-pricing-feature__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.sfx-pricing-feature__list li { display: flex; gap: .625rem; padding: .3125rem 0; }
.sfx-pricing-feature__list i { margin-top: .25rem; width: 1rem; }
.sfx-pricing-feature__list .is-included i { color: var(--sfx-tone-icon); }
.sfx-pricing-feature__list .is-excluded { color: var(--sfx-text-muted); }
.sfx-price-card--feature { box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }