@charset "UTF-8";
/*
 * Bootstrap-/Shopware-Variablen – wird VOR @Storefront kompiliert.
 *
 * Zweck: Der Standard soll bereits dem RehaComfort-System entsprechen, damit
 * im Komponenten-Layer möglichst wenig überschrieben werden muss.
 * Werte spiegeln die Tokens aus abstracts/_tokens.scss.
 */
/*
Basic styles
==================================================
Contains the imports to all basic styles.

The file organization follows the 7-1 pattern architecture
https://sass-guidelin.es/#the-7-1-pattern

@sw-package framework
*/
/*
 * Variables, Mixins, Functions
 * ---------------------------- */
/*
Helper function to check for active feature flags.
==================================================
The `$sw-features` variable contains a SCSS map of the current feature config.
The variable is injected automatically via ThemeCompiler.php and webpack.config.js.

@sw-package fundamentals@framework

Example:
@if feature('FEATURE_NEXT_1234') {
    // ...
}
*/
/*
Variables
==================================================
Import of all variables.

@sw-package framework
*/
/*
Bootstrap variables
==================================================
Contains all overrides of bootstrap default variables.

https://getbootstrap.com/docs/5.2/customize/sass/#variable-defaults

@sw-package framework
*/
/*
Skin variables
==================================================
Contains the imports to all variables that the Shopware skin uses.

@sw-package framework
*/
/*
Theme config variables
==================================================
Contains all custom shopware theme sw-variables.

@sw-package framework
*/
/*
Bootstrap variables
==================================================
Contains all overrides of bootstrap default variables.

https://getbootstrap.com/docs/5.2/customize/sass/#variable-defaults

@sw-package framework
*/
/*
Custom variables
==================================================
Contains custom non bootstrap variables.

@sw-package framework
*/
/*
Custom variables
==================================================
Contains custom non bootstrap variables.

@sw-package framework
*/
/*
CSS Custom Properties
==================================================
Exposes custom SCSS variables of the Storefront as CSS custom properties.

@sw-package framework
*/
:root {
  --search-suggest-zindex: 1000;
  --offcanvas-zindex: 1050;
  --cookie-msg-zindex: 1100;
  --scroll-up-zindex: 700;
  --menu-flyout-zindex: 1030;
  --zoom-modal-action-zindex: 1051;
  --magnifier-overlay-zindex: 1100;
  --icon-base-size: 1.375rem;
  --icon-base-color: #4a545b;
  --icon-review-color: #fedc70;
  --progress-bar-review: #fedc70;
  --element-backdrop-bg: rgba(255, 255, 255, 0.5);
  --spacer-xs: 0.25rem;
  --spacer-sm: 0.5rem;
  --spacer-md: 1rem;
  --spacer-lg: 1.5rem;
  --spacer-xl: 3rem;
  --buy-btn-bg: #0042a0;
  --buy-btn-color: #fff;
  --disabled-btn-bg: #eee;
  --disabled-btn-border-color: #eee;
  --cms-block-text-hero-hr-color: #e9edf0;
  --cms-element-text-quotes-color: #9aa7be;
  --cms-element-product-listing-gutter-width: 30px;
  --price-color: #2b3136;
  --font-weight-semibold: 600;
}
/*
Mixin for multiline text truncate
==================================================
@sw-package framework
*/
/*
 * Skin variables
 * ---------- */
/*
 * Vendors
 * ------- */
/*
Bootstrap
==================================================
Import of bootstrap vendor.

https://getbootstrap.com/docs/5.2/getting-started/introduction

@sw-package framework
*/
/*!
   * Bootstrap  v5.3.8 (https://getbootstrap.com/)
   * Copyright 2011-2025 The Bootstrap Authors
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
:root, [data-bs-theme="light"] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #798490;
  --bs-gray-dark: #4a545b;
  --bs-gray-100: #f9f9f9;
  --bs-gray-200: #eee;
  --bs-gray-300: #bcc1c7;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #798490;
  --bs-gray-700: #495057;
  --bs-gray-800: #4a545b;
  --bs-gray-900: #212529;
  --bs-primary: #2F5D50;
  --bs-secondary: #B4573A;
  --bs-success: #2F7D5B;
  --bs-info: #55B4E6;
  --bs-warning: #974200;
  --bs-danger: #B8402F;
  --bs-light: #f9f9f9;
  --bs-dark: #4a545b;
  --bs-primary-rgb: 47, 93, 80;
  --bs-secondary-rgb: 180, 87, 58;
  --bs-success-rgb: 47, 125, 91;
  --bs-info-rgb: 85, 180, 230;
  --bs-warning-rgb: 151, 66, 0;
  --bs-danger-rgb: 184, 64, 47;
  --bs-light-rgb: 249, 249, 249;
  --bs-dark-rgb: 74, 84, 91;
  --bs-primary-text-emphasis: #132520;
  --bs-secondary-text-emphasis: #482317;
  --bs-success-text-emphasis: #133224;
  --bs-info-text-emphasis: #22485c;
  --bs-warning-text-emphasis: #3c1a00;
  --bs-danger-text-emphasis: #4a1a13;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #d5dfdc;
  --bs-secondary-bg-subtle: #f0ddd8;
  --bs-success-bg-subtle: #d5e5de;
  --bs-info-bg-subtle: #ddf0fa;
  --bs-warning-bg-subtle: #ead9cc;
  --bs-danger-bg-subtle: #f1d9d5;
  --bs-light-bg-subtle: #fcfcfc;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #acbeb9;
  --bs-secondary-border-subtle: #e1bcb0;
  --bs-success-border-subtle: #accbbd;
  --bs-info-border-subtle: #bbe1f5;
  --bs-warning-border-subtle: #d5b399;
  --bs-danger-border-subtle: #e3b3ac;
  --bs-light-border-subtle: #eee;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: 1.1875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.7;
  --bs-body-color: #23201c;
  --bs-body-color-rgb: 35, 32, 28;
  --bs-body-bg: #fbf9f6;
  --bs-body-bg-rgb: 251, 249, 246;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: #2b3136;
  --bs-secondary-color-rgb: 43, 49, 54;
  --bs-secondary-bg: #eee;
  --bs-secondary-bg-rgb: 238, 238, 238;
  --bs-tertiary-color: rgba(35, 32, 28, 0.5);
  --bs-tertiary-color-rgb: 35, 32, 28;
  --bs-tertiary-bg: #f9f9f9;
  --bs-tertiary-bg-rgb: 249, 249, 249;
  --bs-heading-color: #2b3136;
  --bs-link-color: #2f5d50;
  --bs-link-color-rgb: 47, 93, 80;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #23453b;
  --bs-link-hover-color-rgb: 35, 69, 59;
  --bs-link-hover-decoration: underline;
  --bs-code-color: #d63384;
  --bs-highlight-color: #23201c;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #e3ddd3;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 20px;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 2px 4px rgba(35, 32, 28, 0.07), 0 8px 24px rgba(35, 32, 28, 0.09);
  --bs-box-shadow-sm: 0 1px 2px rgba(35, 32, 28, 0.05), 0 2px 8px rgba(35, 32, 28, 0.05);
  --bs-box-shadow-lg: 0 2px 4px rgba(35, 32, 28, 0.07), 0 8px 24px rgba(35, 32, 28, 0.09);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: #2f5d50;
  --bs-form-valid-color: #2F7D5B;
  --bs-form-valid-border-color: #2F7D5B;
  --bs-form-invalid-color: #B8402F;
  --bs-form-invalid-border-color: #B8402F;
}
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-color: #bcc1c7;
  --bs-body-color-rgb: 188, 193, 199;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(188, 193, 199, 0.75);
  --bs-secondary-color-rgb: 188, 193, 199;
  --bs-secondary-bg: #4a545b;
  --bs-secondary-bg-rgb: 74, 84, 91;
  --bs-tertiary-color: rgba(188, 193, 199, 0.5);
  --bs-tertiary-color-rgb: 188, 193, 199;
  --bs-tertiary-bg: #363d42;
  --bs-tertiary-bg-rgb: 54, 61, 66;
  --bs-primary-text-emphasis: #829e96;
  --bs-secondary-text-emphasis: #d29a89;
  --bs-success-text-emphasis: #82b19d;
  --bs-info-text-emphasis: #99d2f0;
  --bs-warning-text-emphasis: #c18e66;
  --bs-danger-text-emphasis: #d48c82;
  --bs-light-text-emphasis: #f9f9f9;
  --bs-dark-text-emphasis: #bcc1c7;
  --bs-primary-bg-subtle: #091310;
  --bs-secondary-bg-subtle: #24110c;
  --bs-success-bg-subtle: #091912;
  --bs-info-bg-subtle: #11242e;
  --bs-warning-bg-subtle: #1e0d00;
  --bs-danger-bg-subtle: #250d09;
  --bs-light-bg-subtle: #4a545b;
  --bs-dark-bg-subtle: #252a2e;
  --bs-primary-border-subtle: #1c3830;
  --bs-secondary-border-subtle: #6c3423;
  --bs-success-border-subtle: #1c4b37;
  --bs-info-border-subtle: #336c8a;
  --bs-warning-border-subtle: #5b2800;
  --bs-danger-border-subtle: #6e261c;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #4a545b;
  --bs-heading-color: inherit;
  --bs-link-color: #829e96;
  --bs-link-hover-color: #9bb1ab;
  --bs-link-color-rgb: 130, 158, 150;
  --bs-link-hover-color-rgb: 155, 177, 171;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #bcc1c7;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
*, *::before, *::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bs-heading-color);
}
h1, .h1 {
  font-size: calc(1.35rem + 1.2vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.25rem;
  }
}
h2, .h2 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.75rem;
  }
}
h3, .h3 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.5rem;
  }
}
h4, .h4 {
  font-size: 1.25rem;
}
h5, .h5 {
  font-size: 1rem;
}
h6, .h6 {
  font-size: 0.875rem;
}
p {
  margin-top: 0;
  margin-bottom: 2rem;
}
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
ol, ul {
  padding-left: 2rem;
}
ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b, strong {
  font-weight: bolder;
}
small, .small {
  font-size: 1rem;
}
mark, .mark {
  padding: 0.1875em;
  color: var(--bs-highlight-color);
  background-color: var(--bs-highlight-bg);
}
sub, sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
  text-decoration: underline;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
pre, code, kbd, samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 1rem;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
code {
  font-size: 1rem;
  color: var(--bs-code-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}
kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 1rem;
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
  border-radius: 8px;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}
figure {
  margin: 0 0 1rem;
}
img, svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead, tbody, tfoot, tr, td, th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
input, button, select, optgroup, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button, select {
  text-transform: none;
}
[role="button"] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}
[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
  display: none !important;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  line-height: inherit;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}
::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field {
  padding: 0;
}
::-webkit-inner-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
  filter: grayscale(1);
}
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
  padding: 0;
}
::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
iframe {
  border: 0;
}
summary {
  display: list-item;
  cursor: pointer;
}
progress {
  vertical-align: baseline;
}
[hidden] {
  display: none !important;
}
.lead {
  font-size: calc(1.2734375rem + 0.28125vw);
  font-weight: 300;
}
@media (min-width: 1200px) {
  .lead {
    font-size: 1.484375rem;
  }
}
.display-1 {
  font-weight: 300;
  line-height: 1.25;
  font-size: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}
.display-2 {
  font-weight: 300;
  line-height: 1.25;
  font-size: calc(1.575rem + 3.9vw);
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}
.display-3 {
  font-weight: 300;
  line-height: 1.25;
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}
.display-4 {
  font-weight: 300;
  line-height: 1.25;
  font-size: calc(1.475rem + 2.7vw);
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}
.display-5 {
  font-weight: 300;
  line-height: 1.25;
  font-size: calc(1.425rem + 2.1vw);
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}
.display-6 {
  font-weight: 300;
  line-height: 1.25;
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}
.initialism {
  font-size: 1rem;
  text-transform: uppercase;
}
.blockquote {
  margin-bottom: 1rem;
  font-size: calc(1.2734375rem + 0.28125vw);
}
@media (min-width: 1200px) {
  .blockquote {
    font-size: 1.484375rem;
  }
}
.blockquote > :last-child {
  margin-bottom: 0;
}
.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #798490;
}
.blockquote-footer::before {
  content: "— ";
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
  height: auto;
}
.figure {
  display: inline-block;
}
.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}
.figure-caption {
  font-size: 1rem;
  color: var(--bs-secondary-color);
}
.container, .cms-section .boxed, .container-fluid, .container-xs {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}
.container, .cms-section .boxed {
  max-width: 1400px;
}
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}
.row {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
.col {
  flex: 1 0 0;
}
.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}
.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}
.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}
.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}
.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
.offset-1 {
  margin-left: 8.33333333%;
}
.offset-2 {
  margin-left: 16.66666667%;
}
.offset-3 {
  margin-left: 25%;
}
.offset-4 {
  margin-left: 33.33333333%;
}
.offset-5 {
  margin-left: 41.66666667%;
}
.offset-6 {
  margin-left: 50%;
}
.offset-7 {
  margin-left: 58.33333333%;
}
.offset-8 {
  margin-left: 66.66666667%;
}
.offset-9 {
  margin-left: 75%;
}
.offset-10 {
  margin-left: 83.33333333%;
}
.offset-11 {
  margin-left: 91.66666667%;
}
.g-0, .gx-0 {
  --bs-gutter-x: 0;
}
.g-0, .gy-0 {
  --bs-gutter-y: 0;
}
.g-1, .gx-1 {
  --bs-gutter-x: 0.25rem;
}
.g-1, .gy-1 {
  --bs-gutter-y: 0.25rem;
}
.g-2, .gx-2 {
  --bs-gutter-x: 0.5rem;
}
.g-2, .gy-2 {
  --bs-gutter-y: 0.5rem;
}
.g-3, .gx-3 {
  --bs-gutter-x: 1rem;
}
.g-3, .gy-3 {
  --bs-gutter-y: 1rem;
}
.g-4, .gx-4 {
  --bs-gutter-x: 1.5rem;
}
.g-4, .gy-4 {
  --bs-gutter-y: 1.5rem;
}
.g-5, .gx-5 {
  --bs-gutter-x: 3rem;
}
.g-5, .gy-5 {
  --bs-gutter-y: 3rem;
}
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0, .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0, .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1, .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1, .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2, .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2, .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3, .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3, .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4, .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4, .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5, .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5, .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0, .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0, .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1, .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1, .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2, .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2, .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3, .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3, .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4, .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4, .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5, .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5, .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0, .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0, .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1, .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1, .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2, .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2, .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3, .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3, .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4, .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4, .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5, .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5, .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0, .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0, .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1, .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1, .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2, .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2, .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3, .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3, .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4, .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4, .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5, .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5, .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0, .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0, .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1, .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1, .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2, .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2, .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3, .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3, .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4, .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4, .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5, .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5, .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: #2b3136;
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #2b3136;
  --bs-table-striped-bg: #f9f9f9;
  --bs-table-active-color: #2b3136;
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --bs-table-hover-color: #2b3136;
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom-width: var(--bs-border-width);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table-group-divider {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}
.caption-top {
  caption-side: top;
}
.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}
.table-bordered > :not(caption) > * {
  border-width: var(--bs-border-width) 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 var(--bs-border-width);
}
.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-active {
  --bs-table-color-state: var(--bs-table-active-color);
  --bs-table-bg-state: var(--bs-table-active-bg);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}
.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: #d5dfdc;
  --bs-table-border-color: #aab2b0;
  --bs-table-striped-bg: #cad4d1;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #c0c9c6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c5cecc;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: #f0ddd8;
  --bs-table-border-color: #c0b1ad;
  --bs-table-striped-bg: #e4d2cd;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d8c7c2;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #deccc8;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-success {
  --bs-table-color: #000;
  --bs-table-bg: #d5e5de;
  --bs-table-border-color: #aab7b2;
  --bs-table-striped-bg: #cadad3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #c0cec8;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c5d4cd;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-info {
  --bs-table-color: #000;
  --bs-table-bg: #ddf0fa;
  --bs-table-border-color: #b1c0c8;
  --bs-table-striped-bg: #d2e4ee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #c7d8e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ccdee7;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: #ead9cc;
  --bs-table-border-color: #bbaea3;
  --bs-table-striped-bg: #decec2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d3c3b8;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d8c9bd;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-danger {
  --bs-table-color: #000;
  --bs-table-bg: #f1d9d5;
  --bs-table-border-color: #c1aeaa;
  --bs-table-striped-bg: #e5ceca;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d9c3c0;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #dfc9c5;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f9f9f9;
  --bs-table-border-color: #c7c7c7;
  --bs-table-striped-bg: #ededed;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e0e0e0;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e6e6e6;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #4a545b;
  --bs-table-border-color: #6e767c;
  --bs-table-striped-bg: #535d63;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #5c656b;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #586167;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 3px;
}
.col-form-label {
  padding-top: calc(0.438rem + var(--bs-border-width));
  padding-bottom: calc(0.438rem + var(--bs-border-width));
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.7;
}
.col-form-label-lg {
  padding-top: calc(0.5rem + var(--bs-border-width));
  padding-bottom: calc(0.5rem + var(--bs-border-width));
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  .col-form-label-lg {
    font-size: 1.375rem;
  }
}
.col-form-label-sm {
  padding-top: calc(0.25rem + var(--bs-border-width));
  padding-bottom: calc(0.25rem + var(--bs-border-width));
  font-size: 1.0625rem;
}
.form-text {
  margin-top: 0.25rem;
  font-size: 1rem;
  color: var(--bs-secondary-color);
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.438rem 0.5625rem;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.7;
  color: #2b3136;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid #798490;
  border-radius: 8px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control[type="file"] {
  overflow: hidden;
}
.form-control[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  color: #2b3136;
  background-color: var(--bs-body-bg);
  border-color: #2F5D50;
  outline: 0;
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.7em;
  margin: 0;
}
.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.form-control::placeholder {
  color: #666977;
  opacity: 1;
}
.form-control:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.438rem 0.5625rem;
  margin: -0.438rem -0.5625rem;
  margin-inline-end: 0.5625rem;
  color: #2b3136;
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}
.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.438rem 0;
  margin-bottom: 0;
  line-height: 1.7;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: var(--bs-border-width) 0;
}
.form-control-plaintext:focus {
  outline: 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
.form-control-sm {
  min-height: calc(1.7em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 1.0625rem;
  border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 0.5rem;
}
.form-control-lg {
  min-height: calc(1.7em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
  font-size: calc(1.2625rem + 0.15vw);
  border-radius: var(--bs-border-radius-lg);
}
@media (min-width: 1200px) {
  .form-control-lg {
    font-size: 1.375rem;
  }
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  margin-inline-end: 1rem;
}
textarea.form-control {
  min-height: calc(1.7em + 0.876rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-sm {
  min-height: calc(1.7em + 0.5rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-lg {
  min-height: calc(1.7em + 1rem + calc(var(--bs-border-width) * 2));
}
.form-control-color {
  width: 3rem;
  height: calc(1.7em + 0.876rem + calc(var(--bs-border-width) * 2));
  padding: 0.438rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: 8px;
}
.form-control-color::-webkit-color-swatch {
  border: 0 !important;
  border-radius: 8px;
}
.form-control-color.form-control-sm {
  height: calc(1.7em + 0.5rem + calc(var(--bs-border-width) * 2));
}
.form-control-color.form-control-lg {
  height: calc(1.7em + 1rem + calc(var(--bs-border-width) * 2));
}
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a545b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.438rem 1.6875rem 0.438rem 0.5625rem;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.7;
  color: #2b3136;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.5625rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid #798490;
  border-radius: 8px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: #2F5D50;
  outline: 0;
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 0.5625rem;
  background-image: none;
}
.form-select:disabled {
  background-color: var(--bs-secondary-bg);
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #2b3136;
}
.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 1.0625rem;
  border-radius: var(--bs-border-radius-sm);
}
.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: calc(1.2625rem + 0.15vw);
  border-radius: var(--bs-border-radius-lg);
}
@media (min-width: 1200px) {
  .form-select-lg {
    font-size: 1.375rem;
  }
}
[data-bs-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bcc1c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-check {
  display: block;
  min-height: 2.01875rem;
  padding-left: 1.5rem;
  margin-bottom: 0.125rem;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5rem;
}
.form-check-reverse {
  padding-right: 1.5rem;
  padding-left: 0;
  text-align: right;
}
.form-check-reverse .form-check-input {
  float: right;
  margin-right: -1.5rem;
  margin-left: 0;
}
.form-check-input {
  --bs-form-check-bg: var(--bs-body-bg);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.35rem;
  vertical-align: top;
  appearance: none;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #798490;
  print-color-adjust: exact;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-check-input {
    transition: none;
  }
}
.form-check-input[type="checkbox"] {
  border-radius: 0.25em;
}
.form-check-input[type="radio"] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #2F5D50;
  outline: 0;
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.form-check-input:checked {
  background-color: #2F5D50;
  border-color: #2F5D50;
}
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #2F5D50;
  border-color: #2F5D50;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}
.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  width: 2em;
  margin-left: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232F5D50'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}
.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 1;
}
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}
.form-range {
  width: 100%;
  height: calc(1rem + 6px);
  padding: 0;
  appearance: none;
  background-color: transparent;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fbf9f6, 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fbf9f6, 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  appearance: none;
  background-color: #2F5D50;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: #c1cecb;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  appearance: none;
  background-color: #2F5D50;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: #c1cecb;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: var(--bs-secondary-color);
}
.form-range:disabled::-moz-range-thumb {
  background-color: var(--bs-secondary-color);
}
.form-floating {
  position: relative;
}
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 100%;
  height: 100%;
  padding: 1rem 0.5625rem;
  overflow: hidden;
  color: rgba(var(--bs-body-color-rgb), 0.65);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: var(--bs-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control, .form-floating > .form-control-plaintext {
  padding: 1rem 0.5625rem;
}
.form-floating > .form-control::placeholder, .form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill, .form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.5625rem;
}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > textarea:focus ~ label::after, .form-floating > textarea:not(:placeholder-shown) ~ label::after {
  position: absolute;
  inset: 1rem 0.28125rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: 8px;
}
.form-floating > textarea:disabled ~ label::after {
  background-color: var(--bs-secondary-bg);
}
.form-floating > .form-control-plaintext ~ label {
  border-width: var(--bs-border-width) 0;
}
.form-floating > :disabled ~ label, .form-floating > .form-control:disabled ~ label {
  color: #798490;
}
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select, .input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus, .input-group > .form-select:focus, .input-group > .form-floating:focus-within {
  z-index: 5;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 5;
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.438rem 0.5625rem;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.7;
  color: #2b3136;
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid #798490;
  border-radius: 8px;
}
.input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, .input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: calc(1.2625rem + 0.15vw);
  border-radius: var(--bs-border-radius-lg);
}
@media (min-width: 1200px) {
  .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, .input-group-lg > .btn {
    font-size: 1.375rem;
  }
}
.input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text, .input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 1.0625rem;
  border-radius: var(--bs-border-radius-sm);
}
.input-group-lg > .form-select, .input-group-sm > .form-select {
  padding-right: 2.25rem;
}
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4), .input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-control, .input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(-1 * var(--bs-border-width));
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 1rem;
  color: var(--bs-form-valid-color);
}
.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 1.0625rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
}
.was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip, .is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip {
  display: block;
}
.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.7em + 0.876rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232F7D5B' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.425em + 0.219rem) center;
  background-size: calc(0.85em + 0.438rem) calc(0.85em + 0.438rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 1);
}
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.7em + 0.876rem);
  background-position: top calc(0.425em + 0.219rem) right calc(0.425em + 0.219rem);
}
.was-validated .form-select:valid, .form-select.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232F7D5B' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
  padding-right: 3.09375rem;
  background-position: right 0.5625rem center, center right 1.6875rem;
  background-size: 16px 12px, calc(0.85em + 0.438rem) calc(0.85em + 0.438rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 1);
}
.was-validated .form-control-color:valid, .form-control-color.is-valid {
  width: calc(3rem + calc(1.7em + 0.876rem));
}
.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: var(--bs-form-valid-color);
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 1);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-form-valid-color);
}
.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, .input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, .input-group > .form-floating:not(:focus-within).is-valid {
  z-index: 3;
}
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 1rem;
  color: var(--bs-form-invalid-color);
}
.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 1.0625rem;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
}
.was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip {
  display: block;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.7em + 0.876rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23B8402F'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23B8402F' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.425em + 0.219rem) center;
  background-size: calc(0.85em + 0.438rem) calc(0.85em + 0.438rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 1);
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.7em + 0.876rem);
  background-position: top calc(0.425em + 0.219rem) right calc(0.425em + 0.219rem);
}
.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23B8402F'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23B8402F' stroke='none'/%3e%3c/svg%3e");
  padding-right: 3.09375rem;
  background-position: right 0.5625rem center, center right 1.6875rem;
  background-size: 16px 12px, calc(0.85em + 0.438rem) calc(0.85em + 0.438rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 1);
}
.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
  width: calc(3rem + calc(1.7em + 0.876rem));
}
.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: var(--bs-form-invalid-color);
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 1);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: var(--bs-form-invalid-color);
}
.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}
.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, .input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, .input-group > .form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1.1875rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 2.125rem;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 8px;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  text-decoration: none;
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked:focus-visible + .btn {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2F5D50;
  --bs-btn-border-color: #2F5D50;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #284f44;
  --bs-btn-hover-border-color: #264a40;
  --bs-btn-focus-shadow-rgb: 78, 117, 106;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #264a40;
  --bs-btn-active-border-color: #23463c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2F5D50;
  --bs-btn-disabled-border-color: #2F5D50;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #B4573A;
  --bs-btn-border-color: #B4573A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #994a31;
  --bs-btn-hover-border-color: #90462e;
  --bs-btn-focus-shadow-rgb: 191, 112, 88;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #90462e;
  --bs-btn-active-border-color: #87412c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #B4573A;
  --bs-btn-disabled-border-color: #B4573A;
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2F7D5B;
  --bs-btn-border-color: #2F7D5B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #286a4d;
  --bs-btn-hover-border-color: #266449;
  --bs-btn-focus-shadow-rgb: 78, 145, 116;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #266449;
  --bs-btn-active-border-color: #235e44;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2F7D5B;
  --bs-btn-disabled-border-color: #2F7D5B;
}
.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #55B4E6;
  --bs-btn-border-color: #55B4E6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #6fbfea;
  --bs-btn-hover-border-color: #66bce9;
  --bs-btn-focus-shadow-rgb: 72, 153, 196;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #77c3eb;
  --bs-btn-active-border-color: #66bce9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #55B4E6;
  --bs-btn-disabled-border-color: #55B4E6;
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #974200;
  --bs-btn-border-color: #974200;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #803800;
  --bs-btn-hover-border-color: #793500;
  --bs-btn-focus-shadow-rgb: 167, 94, 38;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #793500;
  --bs-btn-active-border-color: #713200;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #974200;
  --bs-btn-disabled-border-color: #974200;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #B8402F;
  --bs-btn-border-color: #B8402F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9c3628;
  --bs-btn-hover-border-color: #933326;
  --bs-btn-focus-shadow-rgb: 195, 93, 78;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #933326;
  --bs-btn-active-border-color: #8a3023;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #B8402F;
  --bs-btn-disabled-border-color: #B8402F;
}
.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f9f9f9;
  --bs-btn-border-color: #f9f9f9;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d4d4d4;
  --bs-btn-hover-border-color: #c7c7c7;
  --bs-btn-focus-shadow-rgb: 212, 212, 212;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c7c7c7;
  --bs-btn-active-border-color: #bbb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f9f9f9;
  --bs-btn-disabled-border-color: #f9f9f9;
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4a545b;
  --bs-btn-border-color: #4a545b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #656e74;
  --bs-btn-hover-border-color: #5c656b;
  --bs-btn-focus-shadow-rgb: 101, 110, 116;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6e767c;
  --bs-btn-active-border-color: #5c656b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4a545b;
  --bs-btn-disabled-border-color: #4a545b;
}
.btn-outline-primary {
  --bs-btn-color: #2F5D50;
  --bs-btn-border-color: #2F5D50;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2F5D50;
  --bs-btn-hover-border-color: #2F5D50;
  --bs-btn-focus-shadow-rgb: 47, 93, 80;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2F5D50;
  --bs-btn-active-border-color: #2F5D50;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #2F5D50;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #2F5D50;
  --bs-gradient: none;
}
.btn-outline-secondary {
  --bs-btn-color: #B4573A;
  --bs-btn-border-color: #B4573A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #B4573A;
  --bs-btn-hover-border-color: #B4573A;
  --bs-btn-focus-shadow-rgb: 180, 87, 58;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #B4573A;
  --bs-btn-active-border-color: #B4573A;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #B4573A;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #B4573A;
  --bs-gradient: none;
}
.btn-outline-success {
  --bs-btn-color: #2F7D5B;
  --bs-btn-border-color: #2F7D5B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2F7D5B;
  --bs-btn-hover-border-color: #2F7D5B;
  --bs-btn-focus-shadow-rgb: 47, 125, 91;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2F7D5B;
  --bs-btn-active-border-color: #2F7D5B;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #2F7D5B;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #2F7D5B;
  --bs-gradient: none;
}
.btn-outline-info {
  --bs-btn-color: #55B4E6;
  --bs-btn-border-color: #55B4E6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #55B4E6;
  --bs-btn-hover-border-color: #55B4E6;
  --bs-btn-focus-shadow-rgb: 85, 180, 230;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #55B4E6;
  --bs-btn-active-border-color: #55B4E6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #55B4E6;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #55B4E6;
  --bs-gradient: none;
}
.btn-outline-warning {
  --bs-btn-color: #974200;
  --bs-btn-border-color: #974200;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #974200;
  --bs-btn-hover-border-color: #974200;
  --bs-btn-focus-shadow-rgb: 151, 66, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #974200;
  --bs-btn-active-border-color: #974200;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #974200;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #974200;
  --bs-gradient: none;
}
.btn-outline-danger {
  --bs-btn-color: #B8402F;
  --bs-btn-border-color: #B8402F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #B8402F;
  --bs-btn-hover-border-color: #B8402F;
  --bs-btn-focus-shadow-rgb: 184, 64, 47;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #B8402F;
  --bs-btn-active-border-color: #B8402F;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #B8402F;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #B8402F;
  --bs-gradient: none;
}
.btn-outline-light {
  --bs-btn-color: #f9f9f9;
  --bs-btn-border-color: #f9f9f9;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f9f9f9;
  --bs-btn-hover-border-color: #f9f9f9;
  --bs-btn-focus-shadow-rgb: 249, 249, 249;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f9f9f9;
  --bs-btn-active-border-color: #f9f9f9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f9f9f9;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f9f9f9;
  --bs-gradient: none;
}
.btn-outline-dark {
  --bs-btn-color: #4a545b;
  --bs-btn-border-color: #4a545b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4a545b;
  --bs-btn-hover-border-color: #4a545b;
  --bs-btn-focus-shadow-rgb: 74, 84, 91;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4a545b;
  --bs-btn-active-border-color: #4a545b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #4a545b;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4a545b;
  --bs-gradient: none;
}
.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #bcc1c7;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 78, 117, 106;
  text-decoration: underline;
}
.btn-link:hover, .btn-link:focus-visible {
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}
.btn-lg, .btn-group-lg > .btn, .btn-buy {
  --bs-btn-padding-y: 2px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 8px;
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 2px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 8px;
}
.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}
.collapse:not(.show) {
  display: none;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}
.dropup, .dropend, .dropdown, .dropstart, .dropup-center, .dropdown-center {
  position: relative;
}
.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1.1875rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: #798490;
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-dropdown-divider-bg: #798490;
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: var(--bs-box-shadow);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #2F5D50;
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #798490;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}
.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}
.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}
@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}
.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}
.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}
.dropdown-menu.show {
  display: block;
}
.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 1.0625rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}
.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}
.dropdown-menu-dark {
  --bs-dropdown-color: #bcc1c7;
  --bs-dropdown-bg: #4a545b;
  --bs-dropdown-border-color: #798490;
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #bcc1c7;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: #798490;
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #2F5D50;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}
.btn-group, .btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn, .btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active {
  z-index: 1;
}
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}
.btn-group {
  border-radius: 8px;
}
.btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) {
  margin-left: calc(-1 * var(--bs-border-width));
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n + 3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dropdown-toggle-split {
  padding-right: 1.125rem;
  padding-left: 1.125rem;
}
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}
.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 9px;
  padding-left: 9px;
}
.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split, .btn-buy + .dropdown-toggle-split {
  padding-right: 9px;
  padding-left: 9px;
}
.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn, .btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: calc(-1 * var(--bs-border-width));
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:nth-child(n + 3), .btn-group-vertical > :not(.btn-check) + .btn, .btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-size: 1.1875rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--bs-nav-link-hover-color);
  text-decoration: none;
}
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.nav-link.disabled, .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}
.nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #2F5D50;
}
.nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}
.nav-underline {
  --bs-nav-underline-gap: 1rem;
  --bs-nav-underline-border-width: 0.125rem;
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
  gap: var(--bs-nav-underline-gap);
}
.nav-underline .nav-link {
  padding-right: 0;
  padding-left: 0;
  border-bottom: var(--bs-nav-underline-border-width) solid transparent;
}
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus {
  border-bottom-color: currentcolor;
}
.nav-underline .nav-link.active, .nav-underline .show > .nav-link {
  font-weight: 700;
  color: var(--bs-nav-underline-link-active-color);
  border-bottom-color: currentcolor;
}
.nav-fill > .nav-link, .nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}
.nav-justified > .nav-link, .nav-justified .nav-item {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
}
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
  width: 100%;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: #2F5D50;
  --bs-navbar-brand-padding-y: 0.340625rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.375rem;
  --bs-navbar-brand-color: #2F5D50;
  --bs-navbar-brand-hover-color: #2F5D50;
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.375rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2835, 32, 28, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: 8px;
  --bs-navbar-toggler-focus-width: 3px;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar > .container, .cms-section .navbar > .boxed, .navbar > .container-fluid, .navbar > .container-xs {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--bs-navbar-brand-hover-color);
  text-decoration: none;
}
.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-size: 1.1875rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}
.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-navbar-color);
}
.navbar-text a, .navbar-text a:hover, .navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}
.navbar-collapse {
  flex-grow: 1;
  flex-basis: 100%;
  align-items: center;
}
.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas {
  position: static;
  z-index: auto;
  flex-grow: 1;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  background-color: transparent !important;
  border: 0 !important;
  transform: none !important;
  transition: none;
}
.navbar-expand .offcanvas .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}
.navbar-dark, .navbar[data-bs-theme="dark"] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.card {
  --bs-card-spacer-y: 0;
  --bs-card-spacer-x: 0;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: #e3ddd3;
  --bs-card-border-radius: 12px;
  --bs-card-box-shadow: none;
  --bs-card-inner-border-radius: calc(12px - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0;
  --bs-card-cap-padding-x: 0;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: transparent;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group, .card > .list-group + .card-footer {
  border-top: 0;
}
.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}
.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
}
.card-subtitle {
  margin-top: calc(-.5 * var(--bs-card-title-spacer-y));
  margin-bottom: 0;
  color: var(--bs-card-subtitle-color);
}
.card-text:last-child {
  margin-bottom: 0;
}
.card-link:hover {
  text-decoration: none;
}
.card-link + .card-link {
  margin-left: var(--bs-card-spacer-x);
}
.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}
.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}
.card-header-tabs {
  margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
  margin-left: calc(-.5 * var(--bs-card-cap-padding-x));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-bottom-color: var(--bs-card-bg);
}
.card-header-pills {
  margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
  margin-left: calc(-.5 * var(--bs-card-cap-padding-x));
}
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
}
.card-img, .card-img-top, .card-img-bottom {
  width: 100%;
}
.card-img, .card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card-img, .card-img-bottom {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card-group > .card {
  margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) > .card-img-top, .card-group > .card:not(:last-child) > .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) > .card-img-bottom, .card-group > .card:not(:last-child) > .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) > .card-img-top, .card-group > .card:not(:first-child) > .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) > .card-img-bottom, .card-group > .card:not(:first-child) > .card-footer {
    border-bottom-left-radius: 0;
  }
}
.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2323201c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23132520' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1.1875rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
.accordion-header {
  margin-bottom: 0;
}
.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:last-of-type > .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}
.accordion-flush > .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush > .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush > .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush > .accordion-item > .accordion-collapse, .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
  border-radius: 0;
}
[data-bs-theme="dark"] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23829e96'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23829e96'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: transparent;
  --bs-breadcrumb-border-radius: 0;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.595rem;
  --bs-pagination-font-size: 1.1875rem;
  --bs-pagination-color: #2b3136;
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: #798490;
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: #2b3136;
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: #798490;
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #2F5D50;
  --bs-pagination-active-border-color: #2F5D50;
  --bs-pagination-disabled-color: #798490;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}
.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  text-decoration: none;
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}
.page-item:not(:first-child) .page-link {
  margin-left: calc(-1 * 0);
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}
.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: calc(1.2625rem + 0.15vw);
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
}
@media (min-width: 1200px) {
  .pagination-lg {
    --bs-pagination-font-size: 1.375rem;
  }
}
.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 1.0625rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
}
.badge {
  --bs-badge-padding-x: 5px;
  --bs-badge-padding-y: 0;
  --bs-badge-font-size: 0.75rem;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: 50px;
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
.badge:empty {
  display: none;
}
.btn .badge {
  position: relative;
  top: -1px;
}
.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 0.5rem;
  --bs-alert-padding-y: 0.5rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: 1px solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}
.alert-heading {
  color: inherit;
}
.alert-link {
  font-weight: 700;
  color: var(--bs-alert-link-color);
}
.alert-dismissible {
  padding-right: 1.5rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.625rem 0.5rem;
}
.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}
.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}
.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}
.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}
.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}
.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}
.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}
.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}
@keyframes progress-bar-stripes {
  0% {
    background-position-x: var(--bs-progress-height);
  }
}
.progress, .progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.890625rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #2F5D50;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}
.progress-stacked > .progress {
  overflow: visible;
}
.progress-stacked > .progress > .progress-bar {
  width: 100%;
}
.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}
.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-secondary-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #2F5D50;
  --bs-list-group-active-border-color: #2F5D50;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}
.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > .list-group-item::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}
.list-group-item {
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
  color: var(--bs-list-group-disabled-color);
  pointer-events: none;
  background-color: var(--bs-list-group-disabled-bg);
}
.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--bs-list-group-active-bg);
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: calc(-1 * var(--bs-list-group-border-width));
  border-top-width: var(--bs-list-group-border-width);
}
.list-group-item-action {
  width: 100%;
  color: var(--bs-list-group-action-color);
  text-align: inherit;
}
.list-group-item-action:not(.active):hover, .list-group-item-action:not(.active):focus {
  z-index: 1;
  color: var(--bs-list-group-action-hover-color);
  text-decoration: none;
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group-item-action:not(.active):active {
  color: var(--bs-list-group-action-active-color);
  background-color: var(--bs-list-group-action-active-bg);
}
.list-group-horizontal {
  flex-direction: row;
}
.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
  border-bottom-left-radius: var(--bs-list-group-border-radius);
  border-top-right-radius: 0;
}
.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
  border-top-right-radius: var(--bs-list-group-border-radius);
  border-bottom-left-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: var(--bs-list-group-border-width);
  border-left-width: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: calc(-1 * var(--bs-list-group-border-width));
  border-left-width: var(--bs-list-group-border-width);
}
@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    flex-direction: row;
  }
  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 var(--bs-list-group-border-width);
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}
.list-group-item-primary {
  --bs-list-group-color: var(--bs-primary-text-emphasis);
  --bs-list-group-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-border-color: var(--bs-primary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
}
.list-group-item-secondary {
  --bs-list-group-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
}
.list-group-item-success {
  --bs-list-group-color: var(--bs-success-text-emphasis);
  --bs-list-group-bg: var(--bs-success-bg-subtle);
  --bs-list-group-border-color: var(--bs-success-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
  --bs-list-group-active-color: var(--bs-success-bg-subtle);
  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
}
.list-group-item-info {
  --bs-list-group-color: var(--bs-info-text-emphasis);
  --bs-list-group-bg: var(--bs-info-bg-subtle);
  --bs-list-group-border-color: var(--bs-info-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
  --bs-list-group-active-color: var(--bs-info-bg-subtle);
  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
}
.list-group-item-warning {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: var(--bs-warning-bg-subtle);
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
}
.list-group-item-danger {
  --bs-list-group-color: var(--bs-danger-text-emphasis);
  --bs-list-group-bg: var(--bs-danger-bg-subtle);
  --bs-list-group-border-color: var(--bs-danger-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
}
.list-group-item-light {
  --bs-list-group-color: var(--bs-light-text-emphasis);
  --bs-list-group-bg: var(--bs-light-bg-subtle);
  --bs-list-group-border-color: var(--bs-light-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
  --bs-list-group-active-color: var(--bs-light-bg-subtle);
  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
}
.list-group-item-dark {
  --bs-list-group-color: var(--bs-dark-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
}
.btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
  filter: var(--bs-btn-close-filter);
  border: 0;
  border-radius: 8px;
  opacity: var(--bs-btn-close-opacity);
}
.btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}
.btn-close-white {
  --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}
:root, [data-bs-theme="light"] {
  --bs-btn-close-filter: ;
}
[data-bs-theme="dark"] {
  --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}
.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 40px;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}
.toast-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  z-index: var(--bs-toast-zindex);
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: var(--bs-toast-spacing);
}
.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}
.toast-header .btn-close {
  margin-right: calc(-.5 * var(--bs-toast-padding-x));
  margin-left: var(--bs-toast-padding-x);
}
.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}
.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: var(--bs-body-color);
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: 0 43px 43px -6px rgba(0, 0, 0, 0.2);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - 0);
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: 0;
  --bs-modal-title-line-height: 1.7;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transform: translate(0, -50px);
  transition: opacity 0.45s cubic-bezier(0.3, 0, 0.15, 1), visibility 0.45s linear;
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}
.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}
.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: rgba(0, 0, 0, 0.5);
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}
.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
  margin-top: calc(-.5 * var(--bs-modal-header-padding-y));
  margin-right: calc(-.5 * var(--bs-modal-header-padding-x));
  margin-bottom: calc(-.5 * var(--bs-modal-header-padding-y));
  margin-left: auto;
}
.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}
.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * .5);
}
@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: 0 43px 43px -6px rgba(0, 0, 0, 0.2);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg, .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header, .modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header, .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header, .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header, .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header, .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header, .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 1.0625rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
  bottom: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
  border-top-color: var(--bs-tooltip-bg);
}
/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
  left: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
  border-right-color: var(--bs-tooltip-bg);
}
/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
  top: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
  border-bottom-color: var(--bs-tooltip-bg);
}
/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
  right: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
  border-left-color: var(--bs-tooltip-bg);
}
/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}
.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 1.0625rem;
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-width: var(--bs-border-width);
  --bs-popover-border-color: var(--bs-border-color-translucent);
  --bs-popover-border-radius: var(--bs-border-radius-lg);
  --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-popover-box-shadow: var(--bs-box-shadow);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 1.1875rem;
  --bs-popover-header-color: #2b3136;
  --bs-popover-header-bg: var(--bs-secondary-bg);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: var(--bs-body-color);
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}
.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow {
  bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0;
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg);
}
/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow {
  left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg);
}
/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow {
  top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(-.5 * var(--bs-popover-arrow-width));
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}
/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow {
  right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg);
}
/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}
.popover-header:empty {
  display: none;
}
.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}
.carousel {
  position: relative;
}
.carousel.pointer-event {
  touch-action: pan-y;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
.carousel-item.active, .carousel-item-next, .carousel-item-prev {
  display: block;
}
.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end {
  transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start {
  transform: translateX(-100%);
}
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
.carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}
.carousel-control-prev, .carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  filter: var(--bs-carousel-control-icon-filter);
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev, .carousel-control-next {
    transition: none;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}
.carousel-control-prev {
  left: 0;
}
.carousel-control-next {
  right: 0;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")*/;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")*/;
}
.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: var(--bs-carousel-indicator-active-bg);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}
.carousel-indicators .active {
  opacity: 1;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: var(--bs-carousel-caption-color);
  text-align: center;
}
.carousel-dark {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}
:root, [data-bs-theme="light"] {
  --bs-carousel-indicator-active-bg: #fff;
  --bs-carousel-caption-color: #fff;
  --bs-carousel-control-icon-filter: ;
}
[data-bs-theme="dark"] {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}
.spinner-grow, .spinner-border, .loader {
  display: inline-block;
  flex-shrink: 0;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}
@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border, .loader {
  --bs-spinner-width: 26px;
  --bs-spinner-height: 26px;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 2px;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}
.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
.spinner-grow {
  --bs-spinner-width: 26px;
  --bs-spinner-height: 26px;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-grow;
  background-color: currentcolor;
  opacity: 0;
}
.spinner-grow-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .spinner-border, .loader, .spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
  }
}
.offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl, .offcanvas {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 20px;
  --bs-offcanvas-padding-y: 20px;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-border-color: transparent;
  --bs-offcanvas-box-shadow: 0 43px 43px -6px rgba(0, 0, 0, 0.2);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.7;
}
@media (max-width: 575.98px) {
  .offcanvas-sm {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
  .offcanvas-sm.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-sm.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-sm.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-sm.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
    visibility: visible;
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-sm {
    transition: none;
  }
}
@media (min-width: 576px) {
  .offcanvas-sm {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-sm .offcanvas-header {
    display: none;
  }
  .offcanvas-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 767.98px) {
  .offcanvas-md {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
  .offcanvas-md.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-md.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-md.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-md.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
    visibility: visible;
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-md {
    transition: none;
  }
}
@media (min-width: 768px) {
  .offcanvas-md {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-md .offcanvas-header {
    display: none;
  }
  .offcanvas-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-lg {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
  .offcanvas-lg.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-lg.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-lg.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-lg.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
    visibility: visible;
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-lg {
    transition: none;
  }
}
@media (min-width: 992px) {
  .offcanvas-lg {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-lg .offcanvas-header {
    display: none;
  }
  .offcanvas-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 1199.98px) {
  .offcanvas-xl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
  .offcanvas-xl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
    visibility: visible;
  }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xl {
    transition: none;
  }
}
@media (min-width: 1200px) {
  .offcanvas-xl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xl .offcanvas-header {
    display: none;
  }
  .offcanvas-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 1399.98px) {
  .offcanvas-xxl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
  .offcanvas-xxl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xxl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xxl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xxl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
    visibility: visible;
  }
}
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xxl {
    transition: none;
  }
}
@media (min-width: 1400px) {
  .offcanvas-xxl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xxl .offcanvas-header {
    display: none;
  }
  .offcanvas-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}
.offcanvas.offcanvas-start {
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(-100%);
}
.offcanvas.offcanvas-end {
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(100%);
}
.offcanvas.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom {
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(100%);
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none;
}
.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
  visibility: visible;
}
.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 1;
}
.offcanvas-header {
  display: flex;
  align-items: center;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
  margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));
  margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));
  margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y));
  margin-left: auto;
}
.offcanvas-title {
  margin-bottom: 0;
  line-height: var(--bs-offcanvas-title-line-height);
}
.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto;
}
.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}
.placeholder.btn::before {
  display: inline-block;
  content: "";
}
.placeholder-xs {
  min-height: 0.6em;
}
.placeholder-sm {
  min-height: 0.8em;
}
.placeholder-lg {
  min-height: 1.2em;
}
.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}
@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}
.placeholder-wave {
  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}
@keyframes placeholder-wave {
  100% {
    mask-position: -200% 0%;
  }
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
.text-bg-primary {
  color: #fff;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1));
}
.text-bg-secondary {
  color: #fff;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1));
}
.text-bg-success {
  color: #fff;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1));
}
.text-bg-info {
  color: #000;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1));
}
.text-bg-warning {
  color: #fff;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1));
}
.text-bg-danger {
  color: #fff;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1));
}
.text-bg-light {
  color: #000;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
}
.text-bg-dark {
  color: #fff;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, 1));
}
.link-primary {
  color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1));
}
.link-primary:hover, .link-primary:focus {
  color: rgba(38, 74, 64, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(38, 74, 64, var(--bs-link-underline-opacity, 1));
}
.link-secondary {
  color: rgba(var(--bs-secondary-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1));
}
.link-secondary:hover, .link-secondary:focus {
  color: rgba(144, 70, 46, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(144, 70, 46, var(--bs-link-underline-opacity, 1));
}
.link-success {
  color: rgba(var(--bs-success-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1));
}
.link-success:hover, .link-success:focus {
  color: rgba(38, 100, 73, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(38, 100, 73, var(--bs-link-underline-opacity, 1));
}
.link-info {
  color: rgba(var(--bs-info-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1));
}
.link-info:hover, .link-info:focus {
  color: rgba(119, 195, 235, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(119, 195, 235, var(--bs-link-underline-opacity, 1));
}
.link-warning {
  color: rgba(var(--bs-warning-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1));
}
.link-warning:hover, .link-warning:focus {
  color: rgba(121, 53, 0, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(121, 53, 0, var(--bs-link-underline-opacity, 1));
}
.link-danger {
  color: rgba(var(--bs-danger-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1));
}
.link-danger:hover, .link-danger:focus {
  color: rgba(147, 51, 38, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(147, 51, 38, var(--bs-link-underline-opacity, 1));
}
.link-light {
  color: rgba(var(--bs-light-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1));
}
.link-light:hover, .link-light:focus {
  color: rgba(250, 250, 250, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(250, 250, 250, var(--bs-link-underline-opacity, 1));
}
.link-dark {
  color: rgba(var(--bs-dark-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1));
}
.link-dark:hover, .link-dark:focus {
  color: rgba(59, 67, 73, var(--bs-link-opacity, 1));
  text-decoration-color: rgba(59, 67, 73, var(--bs-link-underline-opacity, 1));
}
.link-body-emphasis {
  color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1));
  text-decoration-color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1));
}
.link-body-emphasis:hover, .link-body-emphasis:focus {
  color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75));
  text-decoration-color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75));
}
.focus-ring:focus {
  outline: 0;
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.icon-link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-underline-offset: 0.25em;
  backface-visibility: hidden;
}
.icon-link > .bi {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentcolor;
  transition: 0.2s ease-in-out transform;
}
@media (prefers-reduced-motion: reduce) {
  .icon-link > .bi {
    transition: none;
  }
}
.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi {
  transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
}
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}
.ratio-4x3 {
  --bs-aspect-ratio: calc(3 / 4 * 100%);
}
.ratio-16x9 {
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}
.ratio-21x9 {
  --bs-aspect-ratio: calc(9 / 21 * 100%);
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}
.sticky-top, .offcanvas .offcanvas-footer {
  position: sticky;
  top: 0;
  z-index: 1020;
}
.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 1020;
}
@media (min-width: 576px) {
  .sticky-sm-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-sm-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-md-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-lg-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xxl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}
.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}
.visually-hidden *, .visually-hidden-focusable:not(:focus):not(:focus-within) * {
  overflow: hidden !important;
}
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vr {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}
.align-baseline {
  vertical-align: baseline;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-bottom {
  vertical-align: bottom;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.align-text-top {
  vertical-align: text-top;
}
.float-start {
  float: left;
}
.float-end {
  float: right;
}
.float-none {
  float: none;
}
.object-fit-contain {
  object-fit: contain;
}
.object-fit-cover {
  object-fit: cover;
}
.object-fit-fill {
  object-fit: fill;
}
.object-fit-scale {
  object-fit: scale-down;
}
.object-fit-none {
  object-fit: none;
}
.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-100 {
  opacity: 1;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-x-visible {
  overflow-x: visible;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-visible {
  overflow-y: visible;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-block {
  display: block;
}
.d-grid {
  display: grid;
}
.d-inline-grid {
  display: inline-grid;
}
.d-table {
  display: table;
}
.d-table-row {
  display: table-row;
}
.d-table-cell {
  display: table-cell;
}
.d-flex {
  display: flex;
}
.d-inline-flex {
  display: inline-flex;
}
.d-none {
  display: none;
}
.shadow {
  box-shadow: var(--bs-box-shadow);
}
.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm);
}
.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg);
}
.shadow-none {
  box-shadow: none;
}
.focus-ring-primary {
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-secondary {
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-success {
  --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-info {
  --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-warning {
  --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-danger {
  --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-light {
  --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-dark {
  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity));
}
.position-static {
  position: static;
}
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.position-fixed {
  position: fixed;
}
.position-sticky {
  position: sticky;
}
.top-0 {
  top: 0;
}
.top-50 {
  top: 50%;
}
.top-100 {
  top: 100%;
}
.bottom-0 {
  bottom: 0;
}
.bottom-50 {
  bottom: 50%;
}
.bottom-100 {
  bottom: 100%;
}
.start-0 {
  left: 0;
}
.start-50 {
  left: 50%;
}
.start-100 {
  left: 100%;
}
.end-0 {
  right: 0;
}
.end-50 {
  right: 50%;
}
.end-100 {
  right: 100%;
}
.translate-middle {
  transform: translate(-50%, -50%);
}
.translate-middle-x {
  transform: translateX(-50%);
}
.translate-middle-y {
  transform: translateY(-50%);
}
.border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.border-0 {
  border: 0;
}
.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.border-top-0 {
  border-top: 0;
}
.border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.border-end-0 {
  border-right: 0;
}
.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.border-bottom-0 {
  border-bottom: 0;
}
.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.border-start-0 {
  border-left: 0;
}
.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity));
}
.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity));
}
.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity));
}
.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity));
}
.border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity));
}
.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity));
}
.border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity));
}
.border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity));
}
.border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity));
}
.border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity));
}
.border-primary-subtle {
  border-color: var(--bs-primary-border-subtle);
}
.border-secondary-subtle {
  border-color: var(--bs-secondary-border-subtle);
}
.border-success-subtle {
  border-color: var(--bs-success-border-subtle);
}
.border-info-subtle {
  border-color: var(--bs-info-border-subtle);
}
.border-warning-subtle {
  border-color: var(--bs-warning-border-subtle);
}
.border-danger-subtle {
  border-color: var(--bs-danger-border-subtle);
}
.border-light-subtle {
  border-color: var(--bs-light-border-subtle);
}
.border-dark-subtle {
  border-color: var(--bs-dark-border-subtle);
}
.border-1 {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-3 {
  border-width: 3px;
}
.border-4 {
  border-width: 4px;
}
.border-5 {
  border-width: 5px;
}
.border-opacity-10 {
  --bs-border-opacity: 0.1;
}
.border-opacity-25 {
  --bs-border-opacity: 0.25;
}
.border-opacity-50 {
  --bs-border-opacity: 0.5;
}
.border-opacity-75 {
  --bs-border-opacity: 0.75;
}
.border-opacity-100 {
  --bs-border-opacity: 1;
}
.w-25 {
  width: 25%;
}
.w-50 {
  width: 50%;
}
.w-75 {
  width: 75%;
}
.w-100 {
  width: 100%;
}
.w-auto {
  width: auto;
}
.mw-100 {
  max-width: 100%;
}
.vw-100 {
  width: 100vw;
}
.min-vw-100 {
  min-width: 100vw;
}
.h-25 {
  height: 25%;
}
.h-50 {
  height: 50%;
}
.h-75 {
  height: 75%;
}
.h-100 {
  height: 100%;
}
.h-auto {
  height: auto;
}
.mh-100 {
  max-height: 100%;
}
.vh-100 {
  height: 100vh;
}
.min-vh-100 {
  min-height: 100vh;
}
.flex-fill {
  flex: 1 1 auto;
}
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-shrink-1 {
  flex-shrink: 1;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.justify-content-start {
  justify-content: flex-start;
}
.justify-content-end {
  justify-content: flex-end;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.justify-content-around {
  justify-content: space-around;
}
.justify-content-evenly {
  justify-content: space-evenly;
}
.align-items-start {
  align-items: flex-start;
}
.align-items-end {
  align-items: flex-end;
}
.align-items-center {
  align-items: center;
}
.align-items-baseline {
  align-items: baseline;
}
.align-items-stretch {
  align-items: stretch;
}
.align-content-start {
  align-content: flex-start;
}
.align-content-end {
  align-content: flex-end;
}
.align-content-center {
  align-content: center;
}
.align-content-between {
  align-content: space-between;
}
.align-content-around {
  align-content: space-around;
}
.align-content-stretch {
  align-content: stretch;
}
.align-self-auto {
  align-self: auto;
}
.align-self-start {
  align-self: flex-start;
}
.align-self-end {
  align-self: flex-end;
}
.align-self-center {
  align-self: center;
}
.align-self-baseline {
  align-self: baseline;
}
.align-self-stretch {
  align-self: stretch;
}
.order-first {
  order: -1;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-last {
  order: 6;
}
.m-0 {
  margin: 0;
}
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 1rem;
}
.m-4 {
  margin: 1.5rem;
}
.m-5 {
  margin: 3rem;
}
.m-auto {
  margin: auto;
}
.mx-0 {
  margin-right: 0;
  margin-left: 0;
}
.mx-1 {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}
.mx-2 {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
.mx-3 {
  margin-right: 1rem;
  margin-left: 1rem;
}
.mx-4 {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}
.mx-5 {
  margin-right: 3rem;
  margin-left: 3rem;
}
.mx-auto {
  margin-right: auto;
  margin-left: auto;
}
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 1.5rem;
}
.mt-5 {
  margin-top: 3rem;
}
.mt-auto {
  margin-top: auto;
}
.me-0 {
  margin-right: 0;
}
.me-1 {
  margin-right: 0.25rem;
}
.me-2 {
  margin-right: 0.5rem;
}
.me-3 {
  margin-right: 1rem;
}
.me-4 {
  margin-right: 1.5rem;
}
.me-5 {
  margin-right: 3rem;
}
.me-auto {
  margin-right: auto;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 1rem;
}
.mb-4 {
  margin-bottom: 1.5rem;
}
.mb-5 {
  margin-bottom: 3rem;
}
.mb-auto {
  margin-bottom: auto;
}
.ms-0 {
  margin-left: 0;
}
.ms-1 {
  margin-left: 0.25rem;
}
.ms-2 {
  margin-left: 0.5rem;
}
.ms-3 {
  margin-left: 1rem;
}
.ms-4 {
  margin-left: 1.5rem;
}
.ms-5 {
  margin-left: 3rem;
}
.ms-auto {
  margin-left: auto;
}
.p-0 {
  padding: 0;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 1rem;
}
.p-4 {
  padding: 1.5rem;
}
.p-5 {
  padding: 3rem;
}
.px-0 {
  padding-right: 0;
  padding-left: 0;
}
.px-1 {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
.px-2 {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.px-3 {
  padding-right: 1rem;
  padding-left: 1rem;
}
.px-4 {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
.px-5 {
  padding-right: 3rem;
  padding-left: 3rem;
}
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.pt-0 {
  padding-top: 0;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 1rem;
}
.pt-4 {
  padding-top: 1.5rem;
}
.pt-5 {
  padding-top: 3rem;
}
.pe-0 {
  padding-right: 0;
}
.pe-1 {
  padding-right: 0.25rem;
}
.pe-2 {
  padding-right: 0.5rem;
}
.pe-3 {
  padding-right: 1rem;
}
.pe-4 {
  padding-right: 1.5rem;
}
.pe-5 {
  padding-right: 3rem;
}
.pb-0 {
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 1rem;
}
.pb-4 {
  padding-bottom: 1.5rem;
}
.pb-5 {
  padding-bottom: 3rem;
}
.ps-0 {
  padding-left: 0;
}
.ps-1 {
  padding-left: 0.25rem;
}
.ps-2 {
  padding-left: 0.5rem;
}
.ps-3 {
  padding-left: 1rem;
}
.ps-4 {
  padding-left: 1.5rem;
}
.ps-5 {
  padding-left: 3rem;
}
.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 1rem;
}
.gap-4 {
  gap: 1.5rem;
}
.gap-5 {
  gap: 3rem;
}
.row-gap-0 {
  row-gap: 0;
}
.row-gap-1 {
  row-gap: 0.25rem;
}
.row-gap-2 {
  row-gap: 0.5rem;
}
.row-gap-3 {
  row-gap: 1rem;
}
.row-gap-4 {
  row-gap: 1.5rem;
}
.row-gap-5 {
  row-gap: 3rem;
}
.column-gap-0 {
  column-gap: 0;
}
.column-gap-1 {
  column-gap: 0.25rem;
}
.column-gap-2 {
  column-gap: 0.5rem;
}
.column-gap-3 {
  column-gap: 1rem;
}
.column-gap-4 {
  column-gap: 1.5rem;
}
.column-gap-5 {
  column-gap: 3rem;
}
.font-monospace {
  font-family: var(--bs-font-monospace);
}
.fs-1 {
  font-size: calc(1.35rem + 1.2vw);
}
.fs-2 {
  font-size: calc(1.3rem + 0.6vw);
}
.fs-3 {
  font-size: calc(1.275rem + 0.3vw);
}
.fs-4 {
  font-size: 1.25rem;
}
.fs-5 {
  font-size: 1rem;
}
.fs-6 {
  font-size: 0.875rem;
}
.fst-italic {
  font-style: italic;
}
.fst-normal {
  font-style: normal;
}
.fw-lighter {
  font-weight: lighter;
}
.fw-light {
  font-weight: 300;
}
.fw-normal {
  font-weight: 400;
}
.fw-medium {
  font-weight: 500;
}
.fw-semibold {
  font-weight: 600;
}
.fw-bold {
  font-weight: 700;
}
.fw-bolder {
  font-weight: bolder;
}
.lh-1 {
  line-height: 1;
}
.lh-sm {
  line-height: 1.25;
}
.lh-base {
  line-height: 1.7;
}
.lh-lg {
  line-height: 2;
}
.text-start {
  text-align: left;
}
.text-end {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-decoration-none {
  text-decoration: none;
}
.text-decoration-underline {
  text-decoration: underline;
}
.text-decoration-line-through {
  text-decoration: line-through;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-wrap {
  white-space: normal;
}
.text-nowrap {
  white-space: nowrap;
}
/* rtl:begin:remove */
.text-break {
  word-wrap: break-word;
  word-break: break-word;
}
/* rtl:end:remove */
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
}
.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity));
}
.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity));
}
.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity));
}
.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity));
}
.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
}
.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity));
}
.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity));
}
.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity));
}
.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity));
}
.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity));
}
.text-muted {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color);
}
.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5);
}
.text-body-secondary {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color);
}
.text-body-tertiary {
  --bs-text-opacity: 1;
  color: var(--bs-tertiary-color);
}
.text-body-emphasis {
  --bs-text-opacity: 1;
  color: var(--bs-emphasis-color);
}
.text-reset {
  --bs-text-opacity: 1;
  color: inherit;
}
.text-opacity-25 {
  --bs-text-opacity: 0.25;
}
.text-opacity-50 {
  --bs-text-opacity: 0.5;
}
.text-opacity-75 {
  --bs-text-opacity: 0.75;
}
.text-opacity-100 {
  --bs-text-opacity: 1;
}
.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis);
}
.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis);
}
.text-success-emphasis {
  color: var(--bs-success-text-emphasis);
}
.text-info-emphasis {
  color: var(--bs-info-text-emphasis);
}
.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis);
}
.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis);
}
.text-light-emphasis {
  color: var(--bs-light-text-emphasis);
}
.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis);
}
.link-opacity-10 {
  --bs-link-opacity: 0.1;
}
.link-opacity-10-hover:hover {
  --bs-link-opacity: 0.1;
}
.link-opacity-25 {
  --bs-link-opacity: 0.25;
}
.link-opacity-25-hover:hover {
  --bs-link-opacity: 0.25;
}
.link-opacity-50 {
  --bs-link-opacity: 0.5;
}
.link-opacity-50-hover:hover {
  --bs-link-opacity: 0.5;
}
.link-opacity-75 {
  --bs-link-opacity: 0.75;
}
.link-opacity-75-hover:hover {
  --bs-link-opacity: 0.75;
}
.link-opacity-100 {
  --bs-link-opacity: 1;
}
.link-opacity-100-hover:hover {
  --bs-link-opacity: 1;
}
.link-offset-1 {
  text-underline-offset: 0.125em;
}
.link-offset-1-hover:hover {
  text-underline-offset: 0.125em;
}
.link-offset-2 {
  text-underline-offset: 0.25em;
}
.link-offset-2-hover:hover {
  text-underline-offset: 0.25em;
}
.link-offset-3 {
  text-underline-offset: 0.375em;
}
.link-offset-3-hover:hover {
  text-underline-offset: 0.375em;
}
.link-underline-primary {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity));
}
.link-underline-secondary {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity));
}
.link-underline-success {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity));
}
.link-underline-info {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity));
}
.link-underline-warning {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity));
}
.link-underline-danger {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity));
}
.link-underline-light {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity));
}
.link-underline-dark {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity));
}
.link-underline {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1));
}
.link-underline-opacity-0 {
  --bs-link-underline-opacity: 0;
}
.link-underline-opacity-0-hover:hover {
  --bs-link-underline-opacity: 0;
}
.link-underline-opacity-10 {
  --bs-link-underline-opacity: 0.1;
}
.link-underline-opacity-10-hover:hover {
  --bs-link-underline-opacity: 0.1;
}
.link-underline-opacity-25 {
  --bs-link-underline-opacity: 0.25;
}
.link-underline-opacity-25-hover:hover {
  --bs-link-underline-opacity: 0.25;
}
.link-underline-opacity-50 {
  --bs-link-underline-opacity: 0.5;
}
.link-underline-opacity-50-hover:hover {
  --bs-link-underline-opacity: 0.5;
}
.link-underline-opacity-75 {
  --bs-link-underline-opacity: 0.75;
}
.link-underline-opacity-75-hover:hover {
  --bs-link-underline-opacity: 0.75;
}
.link-underline-opacity-100 {
  --bs-link-underline-opacity: 1;
}
.link-underline-opacity-100-hover:hover {
  --bs-link-underline-opacity: 1;
}
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
}
.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity));
}
.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
}
.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity));
}
.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
}
.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity));
}
.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
}
.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity));
}
.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity));
}
.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity));
}
.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity));
}
.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent;
}
.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity));
}
.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
}
.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}
.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}
.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}
.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}
.bg-opacity-100 {
  --bs-bg-opacity: 1;
}
.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle);
}
.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle);
}
.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle);
}
.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle);
}
.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle);
}
.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle);
}
.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle);
}
.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle);
}
.bg-gradient {
  background-image: var(--bs-gradient);
}
.user-select-all {
  user-select: all;
}
.user-select-auto {
  user-select: auto;
}
.user-select-none {
  user-select: none;
}
.pe-none {
  pointer-events: none;
}
.pe-auto {
  pointer-events: auto;
}
.rounded {
  border-radius: var(--bs-border-radius);
}
.rounded-0 {
  border-radius: 0;
}
.rounded-1 {
  border-radius: var(--bs-border-radius-sm);
}
.rounded-2 {
  border-radius: var(--bs-border-radius);
}
.rounded-3 {
  border-radius: var(--bs-border-radius-lg);
}
.rounded-4 {
  border-radius: var(--bs-border-radius-xl);
}
.rounded-5 {
  border-radius: var(--bs-border-radius-xxl);
}
.rounded-circle {
  border-radius: 50%;
}
.rounded-pill {
  border-radius: var(--bs-border-radius-pill);
}
.rounded-top {
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}
.rounded-top-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-top-1 {
  border-top-left-radius: var(--bs-border-radius-sm);
  border-top-right-radius: var(--bs-border-radius-sm);
}
.rounded-top-2 {
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}
.rounded-top-3 {
  border-top-left-radius: var(--bs-border-radius-lg);
  border-top-right-radius: var(--bs-border-radius-lg);
}
.rounded-top-4 {
  border-top-left-radius: var(--bs-border-radius-xl);
  border-top-right-radius: var(--bs-border-radius-xl);
}
.rounded-top-5 {
  border-top-left-radius: var(--bs-border-radius-xxl);
  border-top-right-radius: var(--bs-border-radius-xxl);
}
.rounded-top-circle {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.rounded-top-pill {
  border-top-left-radius: var(--bs-border-radius-pill);
  border-top-right-radius: var(--bs-border-radius-pill);
}
.rounded-end {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
.rounded-end-0 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rounded-end-1 {
  border-top-right-radius: var(--bs-border-radius-sm);
  border-bottom-right-radius: var(--bs-border-radius-sm);
}
.rounded-end-2 {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
.rounded-end-3 {
  border-top-right-radius: var(--bs-border-radius-lg);
  border-bottom-right-radius: var(--bs-border-radius-lg);
}
.rounded-end-4 {
  border-top-right-radius: var(--bs-border-radius-xl);
  border-bottom-right-radius: var(--bs-border-radius-xl);
}
.rounded-end-5 {
  border-top-right-radius: var(--bs-border-radius-xxl);
  border-bottom-right-radius: var(--bs-border-radius-xxl);
}
.rounded-end-circle {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.rounded-end-pill {
  border-top-right-radius: var(--bs-border-radius-pill);
  border-bottom-right-radius: var(--bs-border-radius-pill);
}
.rounded-bottom {
  border-bottom-right-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
.rounded-bottom-0 {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-bottom-1 {
  border-bottom-right-radius: var(--bs-border-radius-sm);
  border-bottom-left-radius: var(--bs-border-radius-sm);
}
.rounded-bottom-2 {
  border-bottom-right-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
.rounded-bottom-3 {
  border-bottom-right-radius: var(--bs-border-radius-lg);
  border-bottom-left-radius: var(--bs-border-radius-lg);
}
.rounded-bottom-4 {
  border-bottom-right-radius: var(--bs-border-radius-xl);
  border-bottom-left-radius: var(--bs-border-radius-xl);
}
.rounded-bottom-5 {
  border-bottom-right-radius: var(--bs-border-radius-xxl);
  border-bottom-left-radius: var(--bs-border-radius-xxl);
}
.rounded-bottom-circle {
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.rounded-bottom-pill {
  border-bottom-right-radius: var(--bs-border-radius-pill);
  border-bottom-left-radius: var(--bs-border-radius-pill);
}
.rounded-start {
  border-bottom-left-radius: var(--bs-border-radius);
  border-top-left-radius: var(--bs-border-radius);
}
.rounded-start-0 {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.rounded-start-1 {
  border-bottom-left-radius: var(--bs-border-radius-sm);
  border-top-left-radius: var(--bs-border-radius-sm);
}
.rounded-start-2 {
  border-bottom-left-radius: var(--bs-border-radius);
  border-top-left-radius: var(--bs-border-radius);
}
.rounded-start-3 {
  border-bottom-left-radius: var(--bs-border-radius-lg);
  border-top-left-radius: var(--bs-border-radius-lg);
}
.rounded-start-4 {
  border-bottom-left-radius: var(--bs-border-radius-xl);
  border-top-left-radius: var(--bs-border-radius-xl);
}
.rounded-start-5 {
  border-bottom-left-radius: var(--bs-border-radius-xxl);
  border-top-left-radius: var(--bs-border-radius-xxl);
}
.rounded-start-circle {
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}
.rounded-start-pill {
  border-bottom-left-radius: var(--bs-border-radius-pill);
  border-top-left-radius: var(--bs-border-radius-pill);
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.z-n1 {
  z-index: -1;
}
.z-0 {
  z-index: 0;
}
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}
.z-3 {
  z-index: 3;
}
.z-4 {
  z-index: 4;
}
.z-5 {
  z-index: 5;
}
@media (min-width: 576px) {
  .float-sm-start {
    float: left;
  }
  .float-sm-end {
    float: right;
  }
  .float-sm-none {
    float: none;
  }
  .object-fit-sm-contain {
    object-fit: contain;
  }
  .object-fit-sm-cover {
    object-fit: cover;
  }
  .object-fit-sm-fill {
    object-fit: fill;
  }
  .object-fit-sm-scale {
    object-fit: scale-down;
  }
  .object-fit-sm-none {
    object-fit: none;
  }
  .d-sm-inline {
    display: inline;
  }
  .d-sm-inline-block {
    display: inline-block;
  }
  .d-sm-block {
    display: block;
  }
  .d-sm-grid {
    display: grid;
  }
  .d-sm-inline-grid {
    display: inline-grid;
  }
  .d-sm-table {
    display: table;
  }
  .d-sm-table-row {
    display: table-row;
  }
  .d-sm-table-cell {
    display: table-cell;
  }
  .d-sm-flex {
    display: flex;
  }
  .d-sm-inline-flex {
    display: inline-flex;
  }
  .d-sm-none {
    display: none;
  }
  .flex-sm-fill {
    flex: 1 1 auto;
  }
  .flex-sm-row {
    flex-direction: row;
  }
  .flex-sm-column {
    flex-direction: column;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-sm-grow-0 {
    flex-grow: 0;
  }
  .flex-sm-grow-1 {
    flex-grow: 1;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1;
  }
  .flex-sm-wrap {
    flex-wrap: wrap;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-sm-start {
    justify-content: flex-start;
  }
  .justify-content-sm-end {
    justify-content: flex-end;
  }
  .justify-content-sm-center {
    justify-content: center;
  }
  .justify-content-sm-between {
    justify-content: space-between;
  }
  .justify-content-sm-around {
    justify-content: space-around;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly;
  }
  .align-items-sm-start {
    align-items: flex-start;
  }
  .align-items-sm-end {
    align-items: flex-end;
  }
  .align-items-sm-center {
    align-items: center;
  }
  .align-items-sm-baseline {
    align-items: baseline;
  }
  .align-items-sm-stretch {
    align-items: stretch;
  }
  .align-content-sm-start {
    align-content: flex-start;
  }
  .align-content-sm-end {
    align-content: flex-end;
  }
  .align-content-sm-center {
    align-content: center;
  }
  .align-content-sm-between {
    align-content: space-between;
  }
  .align-content-sm-around {
    align-content: space-around;
  }
  .align-content-sm-stretch {
    align-content: stretch;
  }
  .align-self-sm-auto {
    align-self: auto;
  }
  .align-self-sm-start {
    align-self: flex-start;
  }
  .align-self-sm-end {
    align-self: flex-end;
  }
  .align-self-sm-center {
    align-self: center;
  }
  .align-self-sm-baseline {
    align-self: baseline;
  }
  .align-self-sm-stretch {
    align-self: stretch;
  }
  .order-sm-first {
    order: -1;
  }
  .order-sm-0 {
    order: 0;
  }
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-last {
    order: 6;
  }
  .m-sm-0 {
    margin: 0;
  }
  .m-sm-1 {
    margin: 0.25rem;
  }
  .m-sm-2 {
    margin: 0.5rem;
  }
  .m-sm-3 {
    margin: 1rem;
  }
  .m-sm-4 {
    margin: 1.5rem;
  }
  .m-sm-5 {
    margin: 3rem;
  }
  .m-sm-auto {
    margin: auto;
  }
  .mx-sm-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-sm-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-sm-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-sm-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-sm-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-sm-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-sm-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-sm-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-sm-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-sm-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-sm-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-sm-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-sm-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-sm-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-sm-0 {
    margin-top: 0;
  }
  .mt-sm-1 {
    margin-top: 0.25rem;
  }
  .mt-sm-2 {
    margin-top: 0.5rem;
  }
  .mt-sm-3 {
    margin-top: 1rem;
  }
  .mt-sm-4 {
    margin-top: 1.5rem;
  }
  .mt-sm-5 {
    margin-top: 3rem;
  }
  .mt-sm-auto {
    margin-top: auto;
  }
  .me-sm-0 {
    margin-right: 0;
  }
  .me-sm-1 {
    margin-right: 0.25rem;
  }
  .me-sm-2 {
    margin-right: 0.5rem;
  }
  .me-sm-3 {
    margin-right: 1rem;
  }
  .me-sm-4 {
    margin-right: 1.5rem;
  }
  .me-sm-5 {
    margin-right: 3rem;
  }
  .me-sm-auto {
    margin-right: auto;
  }
  .mb-sm-0 {
    margin-bottom: 0;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem;
  }
  .mb-sm-3 {
    margin-bottom: 1rem;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem;
  }
  .mb-sm-5 {
    margin-bottom: 3rem;
  }
  .mb-sm-auto {
    margin-bottom: auto;
  }
  .ms-sm-0 {
    margin-left: 0;
  }
  .ms-sm-1 {
    margin-left: 0.25rem;
  }
  .ms-sm-2 {
    margin-left: 0.5rem;
  }
  .ms-sm-3 {
    margin-left: 1rem;
  }
  .ms-sm-4 {
    margin-left: 1.5rem;
  }
  .ms-sm-5 {
    margin-left: 3rem;
  }
  .ms-sm-auto {
    margin-left: auto;
  }
  .p-sm-0 {
    padding: 0;
  }
  .p-sm-1 {
    padding: 0.25rem;
  }
  .p-sm-2 {
    padding: 0.5rem;
  }
  .p-sm-3 {
    padding: 1rem;
  }
  .p-sm-4 {
    padding: 1.5rem;
  }
  .p-sm-5 {
    padding: 3rem;
  }
  .px-sm-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-sm-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-sm-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-sm-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-sm-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-sm-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-sm-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-sm-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-sm-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-sm-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-sm-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-sm-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-sm-0 {
    padding-top: 0;
  }
  .pt-sm-1 {
    padding-top: 0.25rem;
  }
  .pt-sm-2 {
    padding-top: 0.5rem;
  }
  .pt-sm-3 {
    padding-top: 1rem;
  }
  .pt-sm-4 {
    padding-top: 1.5rem;
  }
  .pt-sm-5 {
    padding-top: 3rem;
  }
  .pe-sm-0 {
    padding-right: 0;
  }
  .pe-sm-1 {
    padding-right: 0.25rem;
  }
  .pe-sm-2 {
    padding-right: 0.5rem;
  }
  .pe-sm-3 {
    padding-right: 1rem;
  }
  .pe-sm-4 {
    padding-right: 1.5rem;
  }
  .pe-sm-5 {
    padding-right: 3rem;
  }
  .pb-sm-0 {
    padding-bottom: 0;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem;
  }
  .pb-sm-3 {
    padding-bottom: 1rem;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem;
  }
  .pb-sm-5 {
    padding-bottom: 3rem;
  }
  .ps-sm-0 {
    padding-left: 0;
  }
  .ps-sm-1 {
    padding-left: 0.25rem;
  }
  .ps-sm-2 {
    padding-left: 0.5rem;
  }
  .ps-sm-3 {
    padding-left: 1rem;
  }
  .ps-sm-4 {
    padding-left: 1.5rem;
  }
  .ps-sm-5 {
    padding-left: 3rem;
  }
  .gap-sm-0 {
    gap: 0;
  }
  .gap-sm-1 {
    gap: 0.25rem;
  }
  .gap-sm-2 {
    gap: 0.5rem;
  }
  .gap-sm-3 {
    gap: 1rem;
  }
  .gap-sm-4 {
    gap: 1.5rem;
  }
  .gap-sm-5 {
    gap: 3rem;
  }
  .row-gap-sm-0 {
    row-gap: 0;
  }
  .row-gap-sm-1 {
    row-gap: 0.25rem;
  }
  .row-gap-sm-2 {
    row-gap: 0.5rem;
  }
  .row-gap-sm-3 {
    row-gap: 1rem;
  }
  .row-gap-sm-4 {
    row-gap: 1.5rem;
  }
  .row-gap-sm-5 {
    row-gap: 3rem;
  }
  .column-gap-sm-0 {
    column-gap: 0;
  }
  .column-gap-sm-1 {
    column-gap: 0.25rem;
  }
  .column-gap-sm-2 {
    column-gap: 0.5rem;
  }
  .column-gap-sm-3 {
    column-gap: 1rem;
  }
  .column-gap-sm-4 {
    column-gap: 1.5rem;
  }
  .column-gap-sm-5 {
    column-gap: 3rem;
  }
  .text-sm-start {
    text-align: left;
  }
  .text-sm-end {
    text-align: right;
  }
  .text-sm-center {
    text-align: center;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left;
  }
  .float-md-end {
    float: right;
  }
  .float-md-none {
    float: none;
  }
  .object-fit-md-contain {
    object-fit: contain;
  }
  .object-fit-md-cover {
    object-fit: cover;
  }
  .object-fit-md-fill {
    object-fit: fill;
  }
  .object-fit-md-scale {
    object-fit: scale-down;
  }
  .object-fit-md-none {
    object-fit: none;
  }
  .d-md-inline {
    display: inline;
  }
  .d-md-inline-block {
    display: inline-block;
  }
  .d-md-block {
    display: block;
  }
  .d-md-grid {
    display: grid;
  }
  .d-md-inline-grid {
    display: inline-grid;
  }
  .d-md-table {
    display: table;
  }
  .d-md-table-row {
    display: table-row;
  }
  .d-md-table-cell {
    display: table-cell;
  }
  .d-md-flex {
    display: flex;
  }
  .d-md-inline-flex {
    display: inline-flex;
  }
  .d-md-none {
    display: none;
  }
  .flex-md-fill {
    flex: 1 1 auto;
  }
  .flex-md-row {
    flex-direction: row;
  }
  .flex-md-column {
    flex-direction: column;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-md-grow-0 {
    flex-grow: 0;
  }
  .flex-md-grow-1 {
    flex-grow: 1;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1;
  }
  .flex-md-wrap {
    flex-wrap: wrap;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-md-start {
    justify-content: flex-start;
  }
  .justify-content-md-end {
    justify-content: flex-end;
  }
  .justify-content-md-center {
    justify-content: center;
  }
  .justify-content-md-between {
    justify-content: space-between;
  }
  .justify-content-md-around {
    justify-content: space-around;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly;
  }
  .align-items-md-start {
    align-items: flex-start;
  }
  .align-items-md-end {
    align-items: flex-end;
  }
  .align-items-md-center {
    align-items: center;
  }
  .align-items-md-baseline {
    align-items: baseline;
  }
  .align-items-md-stretch {
    align-items: stretch;
  }
  .align-content-md-start {
    align-content: flex-start;
  }
  .align-content-md-end {
    align-content: flex-end;
  }
  .align-content-md-center {
    align-content: center;
  }
  .align-content-md-between {
    align-content: space-between;
  }
  .align-content-md-around {
    align-content: space-around;
  }
  .align-content-md-stretch {
    align-content: stretch;
  }
  .align-self-md-auto {
    align-self: auto;
  }
  .align-self-md-start {
    align-self: flex-start;
  }
  .align-self-md-end {
    align-self: flex-end;
  }
  .align-self-md-center {
    align-self: center;
  }
  .align-self-md-baseline {
    align-self: baseline;
  }
  .align-self-md-stretch {
    align-self: stretch;
  }
  .order-md-first {
    order: -1;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-last {
    order: 6;
  }
  .m-md-0 {
    margin: 0;
  }
  .m-md-1 {
    margin: 0.25rem;
  }
  .m-md-2 {
    margin: 0.5rem;
  }
  .m-md-3 {
    margin: 1rem;
  }
  .m-md-4 {
    margin: 1.5rem;
  }
  .m-md-5 {
    margin: 3rem;
  }
  .m-md-auto {
    margin: auto;
  }
  .mx-md-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-md-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-md-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-md-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-md-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-md-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-md-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-md-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-md-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-md-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-md-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-md-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-md-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-md-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-md-0 {
    margin-top: 0;
  }
  .mt-md-1 {
    margin-top: 0.25rem;
  }
  .mt-md-2 {
    margin-top: 0.5rem;
  }
  .mt-md-3 {
    margin-top: 1rem;
  }
  .mt-md-4 {
    margin-top: 1.5rem;
  }
  .mt-md-5 {
    margin-top: 3rem;
  }
  .mt-md-auto {
    margin-top: auto;
  }
  .me-md-0 {
    margin-right: 0;
  }
  .me-md-1 {
    margin-right: 0.25rem;
  }
  .me-md-2 {
    margin-right: 0.5rem;
  }
  .me-md-3 {
    margin-right: 1rem;
  }
  .me-md-4 {
    margin-right: 1.5rem;
  }
  .me-md-5 {
    margin-right: 3rem;
  }
  .me-md-auto {
    margin-right: auto;
  }
  .mb-md-0 {
    margin-bottom: 0;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem;
  }
  .mb-md-3 {
    margin-bottom: 1rem;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem;
  }
  .mb-md-5 {
    margin-bottom: 3rem;
  }
  .mb-md-auto {
    margin-bottom: auto;
  }
  .ms-md-0 {
    margin-left: 0;
  }
  .ms-md-1 {
    margin-left: 0.25rem;
  }
  .ms-md-2 {
    margin-left: 0.5rem;
  }
  .ms-md-3 {
    margin-left: 1rem;
  }
  .ms-md-4 {
    margin-left: 1.5rem;
  }
  .ms-md-5 {
    margin-left: 3rem;
  }
  .ms-md-auto {
    margin-left: auto;
  }
  .p-md-0 {
    padding: 0;
  }
  .p-md-1 {
    padding: 0.25rem;
  }
  .p-md-2 {
    padding: 0.5rem;
  }
  .p-md-3 {
    padding: 1rem;
  }
  .p-md-4 {
    padding: 1.5rem;
  }
  .p-md-5 {
    padding: 3rem;
  }
  .px-md-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-md-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-md-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-md-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-md-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-md-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-md-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-md-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-md-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-md-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-md-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-md-0 {
    padding-top: 0;
  }
  .pt-md-1 {
    padding-top: 0.25rem;
  }
  .pt-md-2 {
    padding-top: 0.5rem;
  }
  .pt-md-3 {
    padding-top: 1rem;
  }
  .pt-md-4 {
    padding-top: 1.5rem;
  }
  .pt-md-5 {
    padding-top: 3rem;
  }
  .pe-md-0 {
    padding-right: 0;
  }
  .pe-md-1 {
    padding-right: 0.25rem;
  }
  .pe-md-2 {
    padding-right: 0.5rem;
  }
  .pe-md-3 {
    padding-right: 1rem;
  }
  .pe-md-4 {
    padding-right: 1.5rem;
  }
  .pe-md-5 {
    padding-right: 3rem;
  }
  .pb-md-0 {
    padding-bottom: 0;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem;
  }
  .pb-md-3 {
    padding-bottom: 1rem;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem;
  }
  .pb-md-5 {
    padding-bottom: 3rem;
  }
  .ps-md-0 {
    padding-left: 0;
  }
  .ps-md-1 {
    padding-left: 0.25rem;
  }
  .ps-md-2 {
    padding-left: 0.5rem;
  }
  .ps-md-3 {
    padding-left: 1rem;
  }
  .ps-md-4 {
    padding-left: 1.5rem;
  }
  .ps-md-5 {
    padding-left: 3rem;
  }
  .gap-md-0 {
    gap: 0;
  }
  .gap-md-1 {
    gap: 0.25rem;
  }
  .gap-md-2 {
    gap: 0.5rem;
  }
  .gap-md-3 {
    gap: 1rem;
  }
  .gap-md-4 {
    gap: 1.5rem;
  }
  .gap-md-5 {
    gap: 3rem;
  }
  .row-gap-md-0 {
    row-gap: 0;
  }
  .row-gap-md-1 {
    row-gap: 0.25rem;
  }
  .row-gap-md-2 {
    row-gap: 0.5rem;
  }
  .row-gap-md-3 {
    row-gap: 1rem;
  }
  .row-gap-md-4 {
    row-gap: 1.5rem;
  }
  .row-gap-md-5 {
    row-gap: 3rem;
  }
  .column-gap-md-0 {
    column-gap: 0;
  }
  .column-gap-md-1 {
    column-gap: 0.25rem;
  }
  .column-gap-md-2 {
    column-gap: 0.5rem;
  }
  .column-gap-md-3 {
    column-gap: 1rem;
  }
  .column-gap-md-4 {
    column-gap: 1.5rem;
  }
  .column-gap-md-5 {
    column-gap: 3rem;
  }
  .text-md-start {
    text-align: left;
  }
  .text-md-end {
    text-align: right;
  }
  .text-md-center {
    text-align: center;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left;
  }
  .float-lg-end {
    float: right;
  }
  .float-lg-none {
    float: none;
  }
  .object-fit-lg-contain {
    object-fit: contain;
  }
  .object-fit-lg-cover {
    object-fit: cover;
  }
  .object-fit-lg-fill {
    object-fit: fill;
  }
  .object-fit-lg-scale {
    object-fit: scale-down;
  }
  .object-fit-lg-none {
    object-fit: none;
  }
  .d-lg-inline {
    display: inline;
  }
  .d-lg-inline-block {
    display: inline-block;
  }
  .d-lg-block {
    display: block;
  }
  .d-lg-grid {
    display: grid;
  }
  .d-lg-inline-grid {
    display: inline-grid;
  }
  .d-lg-table {
    display: table;
  }
  .d-lg-table-row {
    display: table-row;
  }
  .d-lg-table-cell {
    display: table-cell;
  }
  .d-lg-flex {
    display: flex;
  }
  .d-lg-inline-flex {
    display: inline-flex;
  }
  .d-lg-none {
    display: none;
  }
  .flex-lg-fill {
    flex: 1 1 auto;
  }
  .flex-lg-row {
    flex-direction: row;
  }
  .flex-lg-column {
    flex-direction: column;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-lg-grow-0 {
    flex-grow: 0;
  }
  .flex-lg-grow-1 {
    flex-grow: 1;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1;
  }
  .flex-lg-wrap {
    flex-wrap: wrap;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-lg-start {
    justify-content: flex-start;
  }
  .justify-content-lg-end {
    justify-content: flex-end;
  }
  .justify-content-lg-center {
    justify-content: center;
  }
  .justify-content-lg-between {
    justify-content: space-between;
  }
  .justify-content-lg-around {
    justify-content: space-around;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly;
  }
  .align-items-lg-start {
    align-items: flex-start;
  }
  .align-items-lg-end {
    align-items: flex-end;
  }
  .align-items-lg-center {
    align-items: center;
  }
  .align-items-lg-baseline {
    align-items: baseline;
  }
  .align-items-lg-stretch {
    align-items: stretch;
  }
  .align-content-lg-start {
    align-content: flex-start;
  }
  .align-content-lg-end {
    align-content: flex-end;
  }
  .align-content-lg-center {
    align-content: center;
  }
  .align-content-lg-between {
    align-content: space-between;
  }
  .align-content-lg-around {
    align-content: space-around;
  }
  .align-content-lg-stretch {
    align-content: stretch;
  }
  .align-self-lg-auto {
    align-self: auto;
  }
  .align-self-lg-start {
    align-self: flex-start;
  }
  .align-self-lg-end {
    align-self: flex-end;
  }
  .align-self-lg-center {
    align-self: center;
  }
  .align-self-lg-baseline {
    align-self: baseline;
  }
  .align-self-lg-stretch {
    align-self: stretch;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
  .order-lg-last {
    order: 6;
  }
  .m-lg-0 {
    margin: 0;
  }
  .m-lg-1 {
    margin: 0.25rem;
  }
  .m-lg-2 {
    margin: 0.5rem;
  }
  .m-lg-3 {
    margin: 1rem;
  }
  .m-lg-4 {
    margin: 1.5rem;
  }
  .m-lg-5 {
    margin: 3rem;
  }
  .m-lg-auto {
    margin: auto;
  }
  .mx-lg-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-lg-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-lg-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-lg-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-lg-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-lg-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-lg-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-lg-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-lg-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-lg-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-lg-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-lg-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-lg-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-lg-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-lg-0 {
    margin-top: 0;
  }
  .mt-lg-1 {
    margin-top: 0.25rem;
  }
  .mt-lg-2 {
    margin-top: 0.5rem;
  }
  .mt-lg-3 {
    margin-top: 1rem;
  }
  .mt-lg-4 {
    margin-top: 1.5rem;
  }
  .mt-lg-5 {
    margin-top: 3rem;
  }
  .mt-lg-auto {
    margin-top: auto;
  }
  .me-lg-0 {
    margin-right: 0;
  }
  .me-lg-1 {
    margin-right: 0.25rem;
  }
  .me-lg-2 {
    margin-right: 0.5rem;
  }
  .me-lg-3 {
    margin-right: 1rem;
  }
  .me-lg-4 {
    margin-right: 1.5rem;
  }
  .me-lg-5 {
    margin-right: 3rem;
  }
  .me-lg-auto {
    margin-right: auto;
  }
  .mb-lg-0 {
    margin-bottom: 0;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem;
  }
  .mb-lg-3 {
    margin-bottom: 1rem;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem;
  }
  .mb-lg-5 {
    margin-bottom: 3rem;
  }
  .mb-lg-auto {
    margin-bottom: auto;
  }
  .ms-lg-0 {
    margin-left: 0;
  }
  .ms-lg-1 {
    margin-left: 0.25rem;
  }
  .ms-lg-2 {
    margin-left: 0.5rem;
  }
  .ms-lg-3 {
    margin-left: 1rem;
  }
  .ms-lg-4 {
    margin-left: 1.5rem;
  }
  .ms-lg-5 {
    margin-left: 3rem;
  }
  .ms-lg-auto {
    margin-left: auto;
  }
  .p-lg-0 {
    padding: 0;
  }
  .p-lg-1 {
    padding: 0.25rem;
  }
  .p-lg-2 {
    padding: 0.5rem;
  }
  .p-lg-3 {
    padding: 1rem;
  }
  .p-lg-4 {
    padding: 1.5rem;
  }
  .p-lg-5 {
    padding: 3rem;
  }
  .px-lg-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-lg-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-lg-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-lg-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-lg-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-lg-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-lg-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-lg-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-lg-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-lg-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-lg-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-lg-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-lg-0 {
    padding-top: 0;
  }
  .pt-lg-1 {
    padding-top: 0.25rem;
  }
  .pt-lg-2 {
    padding-top: 0.5rem;
  }
  .pt-lg-3 {
    padding-top: 1rem;
  }
  .pt-lg-4 {
    padding-top: 1.5rem;
  }
  .pt-lg-5 {
    padding-top: 3rem;
  }
  .pe-lg-0 {
    padding-right: 0;
  }
  .pe-lg-1 {
    padding-right: 0.25rem;
  }
  .pe-lg-2 {
    padding-right: 0.5rem;
  }
  .pe-lg-3 {
    padding-right: 1rem;
  }
  .pe-lg-4 {
    padding-right: 1.5rem;
  }
  .pe-lg-5 {
    padding-right: 3rem;
  }
  .pb-lg-0 {
    padding-bottom: 0;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem;
  }
  .pb-lg-3 {
    padding-bottom: 1rem;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem;
  }
  .pb-lg-5 {
    padding-bottom: 3rem;
  }
  .ps-lg-0 {
    padding-left: 0;
  }
  .ps-lg-1 {
    padding-left: 0.25rem;
  }
  .ps-lg-2 {
    padding-left: 0.5rem;
  }
  .ps-lg-3 {
    padding-left: 1rem;
  }
  .ps-lg-4 {
    padding-left: 1.5rem;
  }
  .ps-lg-5 {
    padding-left: 3rem;
  }
  .gap-lg-0 {
    gap: 0;
  }
  .gap-lg-1 {
    gap: 0.25rem;
  }
  .gap-lg-2 {
    gap: 0.5rem;
  }
  .gap-lg-3 {
    gap: 1rem;
  }
  .gap-lg-4 {
    gap: 1.5rem;
  }
  .gap-lg-5 {
    gap: 3rem;
  }
  .row-gap-lg-0 {
    row-gap: 0;
  }
  .row-gap-lg-1 {
    row-gap: 0.25rem;
  }
  .row-gap-lg-2 {
    row-gap: 0.5rem;
  }
  .row-gap-lg-3 {
    row-gap: 1rem;
  }
  .row-gap-lg-4 {
    row-gap: 1.5rem;
  }
  .row-gap-lg-5 {
    row-gap: 3rem;
  }
  .column-gap-lg-0 {
    column-gap: 0;
  }
  .column-gap-lg-1 {
    column-gap: 0.25rem;
  }
  .column-gap-lg-2 {
    column-gap: 0.5rem;
  }
  .column-gap-lg-3 {
    column-gap: 1rem;
  }
  .column-gap-lg-4 {
    column-gap: 1.5rem;
  }
  .column-gap-lg-5 {
    column-gap: 3rem;
  }
  .text-lg-start {
    text-align: left;
  }
  .text-lg-end {
    text-align: right;
  }
  .text-lg-center {
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left;
  }
  .float-xl-end {
    float: right;
  }
  .float-xl-none {
    float: none;
  }
  .object-fit-xl-contain {
    object-fit: contain;
  }
  .object-fit-xl-cover {
    object-fit: cover;
  }
  .object-fit-xl-fill {
    object-fit: fill;
  }
  .object-fit-xl-scale {
    object-fit: scale-down;
  }
  .object-fit-xl-none {
    object-fit: none;
  }
  .d-xl-inline {
    display: inline;
  }
  .d-xl-inline-block {
    display: inline-block;
  }
  .d-xl-block {
    display: block;
  }
  .d-xl-grid {
    display: grid;
  }
  .d-xl-inline-grid {
    display: inline-grid;
  }
  .d-xl-table {
    display: table;
  }
  .d-xl-table-row {
    display: table-row;
  }
  .d-xl-table-cell {
    display: table-cell;
  }
  .d-xl-flex {
    display: flex;
  }
  .d-xl-inline-flex {
    display: inline-flex;
  }
  .d-xl-none {
    display: none;
  }
  .flex-xl-fill {
    flex: 1 1 auto;
  }
  .flex-xl-row {
    flex-direction: row;
  }
  .flex-xl-column {
    flex-direction: column;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-xl-grow-0 {
    flex-grow: 0;
  }
  .flex-xl-grow-1 {
    flex-grow: 1;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1;
  }
  .flex-xl-wrap {
    flex-wrap: wrap;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-xl-start {
    justify-content: flex-start;
  }
  .justify-content-xl-end {
    justify-content: flex-end;
  }
  .justify-content-xl-center {
    justify-content: center;
  }
  .justify-content-xl-between {
    justify-content: space-between;
  }
  .justify-content-xl-around {
    justify-content: space-around;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly;
  }
  .align-items-xl-start {
    align-items: flex-start;
  }
  .align-items-xl-end {
    align-items: flex-end;
  }
  .align-items-xl-center {
    align-items: center;
  }
  .align-items-xl-baseline {
    align-items: baseline;
  }
  .align-items-xl-stretch {
    align-items: stretch;
  }
  .align-content-xl-start {
    align-content: flex-start;
  }
  .align-content-xl-end {
    align-content: flex-end;
  }
  .align-content-xl-center {
    align-content: center;
  }
  .align-content-xl-between {
    align-content: space-between;
  }
  .align-content-xl-around {
    align-content: space-around;
  }
  .align-content-xl-stretch {
    align-content: stretch;
  }
  .align-self-xl-auto {
    align-self: auto;
  }
  .align-self-xl-start {
    align-self: flex-start;
  }
  .align-self-xl-end {
    align-self: flex-end;
  }
  .align-self-xl-center {
    align-self: center;
  }
  .align-self-xl-baseline {
    align-self: baseline;
  }
  .align-self-xl-stretch {
    align-self: stretch;
  }
  .order-xl-first {
    order: -1;
  }
  .order-xl-0 {
    order: 0;
  }
  .order-xl-1 {
    order: 1;
  }
  .order-xl-2 {
    order: 2;
  }
  .order-xl-3 {
    order: 3;
  }
  .order-xl-4 {
    order: 4;
  }
  .order-xl-5 {
    order: 5;
  }
  .order-xl-last {
    order: 6;
  }
  .m-xl-0 {
    margin: 0;
  }
  .m-xl-1 {
    margin: 0.25rem;
  }
  .m-xl-2 {
    margin: 0.5rem;
  }
  .m-xl-3 {
    margin: 1rem;
  }
  .m-xl-4 {
    margin: 1.5rem;
  }
  .m-xl-5 {
    margin: 3rem;
  }
  .m-xl-auto {
    margin: auto;
  }
  .mx-xl-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-xl-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-xl-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-xl-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-xl-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-xl-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-xl-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-xl-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-xl-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-xl-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-xl-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-xl-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-xl-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-xl-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-xl-0 {
    margin-top: 0;
  }
  .mt-xl-1 {
    margin-top: 0.25rem;
  }
  .mt-xl-2 {
    margin-top: 0.5rem;
  }
  .mt-xl-3 {
    margin-top: 1rem;
  }
  .mt-xl-4 {
    margin-top: 1.5rem;
  }
  .mt-xl-5 {
    margin-top: 3rem;
  }
  .mt-xl-auto {
    margin-top: auto;
  }
  .me-xl-0 {
    margin-right: 0;
  }
  .me-xl-1 {
    margin-right: 0.25rem;
  }
  .me-xl-2 {
    margin-right: 0.5rem;
  }
  .me-xl-3 {
    margin-right: 1rem;
  }
  .me-xl-4 {
    margin-right: 1.5rem;
  }
  .me-xl-5 {
    margin-right: 3rem;
  }
  .me-xl-auto {
    margin-right: auto;
  }
  .mb-xl-0 {
    margin-bottom: 0;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem;
  }
  .mb-xl-3 {
    margin-bottom: 1rem;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem;
  }
  .mb-xl-5 {
    margin-bottom: 3rem;
  }
  .mb-xl-auto {
    margin-bottom: auto;
  }
  .ms-xl-0 {
    margin-left: 0;
  }
  .ms-xl-1 {
    margin-left: 0.25rem;
  }
  .ms-xl-2 {
    margin-left: 0.5rem;
  }
  .ms-xl-3 {
    margin-left: 1rem;
  }
  .ms-xl-4 {
    margin-left: 1.5rem;
  }
  .ms-xl-5 {
    margin-left: 3rem;
  }
  .ms-xl-auto {
    margin-left: auto;
  }
  .p-xl-0 {
    padding: 0;
  }
  .p-xl-1 {
    padding: 0.25rem;
  }
  .p-xl-2 {
    padding: 0.5rem;
  }
  .p-xl-3 {
    padding: 1rem;
  }
  .p-xl-4 {
    padding: 1.5rem;
  }
  .p-xl-5 {
    padding: 3rem;
  }
  .px-xl-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-xl-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-xl-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-xl-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-xl-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-xl-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-xl-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-xl-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-xl-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-xl-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-xl-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-xl-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-xl-0 {
    padding-top: 0;
  }
  .pt-xl-1 {
    padding-top: 0.25rem;
  }
  .pt-xl-2 {
    padding-top: 0.5rem;
  }
  .pt-xl-3 {
    padding-top: 1rem;
  }
  .pt-xl-4 {
    padding-top: 1.5rem;
  }
  .pt-xl-5 {
    padding-top: 3rem;
  }
  .pe-xl-0 {
    padding-right: 0;
  }
  .pe-xl-1 {
    padding-right: 0.25rem;
  }
  .pe-xl-2 {
    padding-right: 0.5rem;
  }
  .pe-xl-3 {
    padding-right: 1rem;
  }
  .pe-xl-4 {
    padding-right: 1.5rem;
  }
  .pe-xl-5 {
    padding-right: 3rem;
  }
  .pb-xl-0 {
    padding-bottom: 0;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem;
  }
  .pb-xl-3 {
    padding-bottom: 1rem;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem;
  }
  .pb-xl-5 {
    padding-bottom: 3rem;
  }
  .ps-xl-0 {
    padding-left: 0;
  }
  .ps-xl-1 {
    padding-left: 0.25rem;
  }
  .ps-xl-2 {
    padding-left: 0.5rem;
  }
  .ps-xl-3 {
    padding-left: 1rem;
  }
  .ps-xl-4 {
    padding-left: 1.5rem;
  }
  .ps-xl-5 {
    padding-left: 3rem;
  }
  .gap-xl-0 {
    gap: 0;
  }
  .gap-xl-1 {
    gap: 0.25rem;
  }
  .gap-xl-2 {
    gap: 0.5rem;
  }
  .gap-xl-3 {
    gap: 1rem;
  }
  .gap-xl-4 {
    gap: 1.5rem;
  }
  .gap-xl-5 {
    gap: 3rem;
  }
  .row-gap-xl-0 {
    row-gap: 0;
  }
  .row-gap-xl-1 {
    row-gap: 0.25rem;
  }
  .row-gap-xl-2 {
    row-gap: 0.5rem;
  }
  .row-gap-xl-3 {
    row-gap: 1rem;
  }
  .row-gap-xl-4 {
    row-gap: 1.5rem;
  }
  .row-gap-xl-5 {
    row-gap: 3rem;
  }
  .column-gap-xl-0 {
    column-gap: 0;
  }
  .column-gap-xl-1 {
    column-gap: 0.25rem;
  }
  .column-gap-xl-2 {
    column-gap: 0.5rem;
  }
  .column-gap-xl-3 {
    column-gap: 1rem;
  }
  .column-gap-xl-4 {
    column-gap: 1.5rem;
  }
  .column-gap-xl-5 {
    column-gap: 3rem;
  }
  .text-xl-start {
    text-align: left;
  }
  .text-xl-end {
    text-align: right;
  }
  .text-xl-center {
    text-align: center;
  }
}
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left;
  }
  .float-xxl-end {
    float: right;
  }
  .float-xxl-none {
    float: none;
  }
  .object-fit-xxl-contain {
    object-fit: contain;
  }
  .object-fit-xxl-cover {
    object-fit: cover;
  }
  .object-fit-xxl-fill {
    object-fit: fill;
  }
  .object-fit-xxl-scale {
    object-fit: scale-down;
  }
  .object-fit-xxl-none {
    object-fit: none;
  }
  .d-xxl-inline {
    display: inline;
  }
  .d-xxl-inline-block {
    display: inline-block;
  }
  .d-xxl-block {
    display: block;
  }
  .d-xxl-grid {
    display: grid;
  }
  .d-xxl-inline-grid {
    display: inline-grid;
  }
  .d-xxl-table {
    display: table;
  }
  .d-xxl-table-row {
    display: table-row;
  }
  .d-xxl-table-cell {
    display: table-cell;
  }
  .d-xxl-flex {
    display: flex;
  }
  .d-xxl-inline-flex {
    display: inline-flex;
  }
  .d-xxl-none {
    display: none;
  }
  .flex-xxl-fill {
    flex: 1 1 auto;
  }
  .flex-xxl-row {
    flex-direction: row;
  }
  .flex-xxl-column {
    flex-direction: column;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-xxl-start {
    justify-content: flex-start;
  }
  .justify-content-xxl-end {
    justify-content: flex-end;
  }
  .justify-content-xxl-center {
    justify-content: center;
  }
  .justify-content-xxl-between {
    justify-content: space-between;
  }
  .justify-content-xxl-around {
    justify-content: space-around;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly;
  }
  .align-items-xxl-start {
    align-items: flex-start;
  }
  .align-items-xxl-end {
    align-items: flex-end;
  }
  .align-items-xxl-center {
    align-items: center;
  }
  .align-items-xxl-baseline {
    align-items: baseline;
  }
  .align-items-xxl-stretch {
    align-items: stretch;
  }
  .align-content-xxl-start {
    align-content: flex-start;
  }
  .align-content-xxl-end {
    align-content: flex-end;
  }
  .align-content-xxl-center {
    align-content: center;
  }
  .align-content-xxl-between {
    align-content: space-between;
  }
  .align-content-xxl-around {
    align-content: space-around;
  }
  .align-content-xxl-stretch {
    align-content: stretch;
  }
  .align-self-xxl-auto {
    align-self: auto;
  }
  .align-self-xxl-start {
    align-self: flex-start;
  }
  .align-self-xxl-end {
    align-self: flex-end;
  }
  .align-self-xxl-center {
    align-self: center;
  }
  .align-self-xxl-baseline {
    align-self: baseline;
  }
  .align-self-xxl-stretch {
    align-self: stretch;
  }
  .order-xxl-first {
    order: -1;
  }
  .order-xxl-0 {
    order: 0;
  }
  .order-xxl-1 {
    order: 1;
  }
  .order-xxl-2 {
    order: 2;
  }
  .order-xxl-3 {
    order: 3;
  }
  .order-xxl-4 {
    order: 4;
  }
  .order-xxl-5 {
    order: 5;
  }
  .order-xxl-last {
    order: 6;
  }
  .m-xxl-0 {
    margin: 0;
  }
  .m-xxl-1 {
    margin: 0.25rem;
  }
  .m-xxl-2 {
    margin: 0.5rem;
  }
  .m-xxl-3 {
    margin: 1rem;
  }
  .m-xxl-4 {
    margin: 1.5rem;
  }
  .m-xxl-5 {
    margin: 3rem;
  }
  .m-xxl-auto {
    margin: auto;
  }
  .mx-xxl-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-xxl-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-xxl-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-xxl-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-xxl-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-xxl-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-xxl-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-xxl-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-xxl-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-xxl-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-xxl-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-xxl-0 {
    margin-top: 0;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem;
  }
  .mt-xxl-3 {
    margin-top: 1rem;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem;
  }
  .mt-xxl-5 {
    margin-top: 3rem;
  }
  .mt-xxl-auto {
    margin-top: auto;
  }
  .me-xxl-0 {
    margin-right: 0;
  }
  .me-xxl-1 {
    margin-right: 0.25rem;
  }
  .me-xxl-2 {
    margin-right: 0.5rem;
  }
  .me-xxl-3 {
    margin-right: 1rem;
  }
  .me-xxl-4 {
    margin-right: 1.5rem;
  }
  .me-xxl-5 {
    margin-right: 3rem;
  }
  .me-xxl-auto {
    margin-right: auto;
  }
  .mb-xxl-0 {
    margin-bottom: 0;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem;
  }
  .mb-xxl-auto {
    margin-bottom: auto;
  }
  .ms-xxl-0 {
    margin-left: 0;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem;
  }
  .ms-xxl-3 {
    margin-left: 1rem;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem;
  }
  .ms-xxl-5 {
    margin-left: 3rem;
  }
  .ms-xxl-auto {
    margin-left: auto;
  }
  .p-xxl-0 {
    padding: 0;
  }
  .p-xxl-1 {
    padding: 0.25rem;
  }
  .p-xxl-2 {
    padding: 0.5rem;
  }
  .p-xxl-3 {
    padding: 1rem;
  }
  .p-xxl-4 {
    padding: 1.5rem;
  }
  .p-xxl-5 {
    padding: 3rem;
  }
  .px-xxl-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-xxl-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-xxl-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-xxl-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-xxl-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-xxl-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-xxl-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-xxl-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-xxl-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-xxl-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-xxl-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-xxl-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-xxl-0 {
    padding-top: 0;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem;
  }
  .pt-xxl-3 {
    padding-top: 1rem;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem;
  }
  .pt-xxl-5 {
    padding-top: 3rem;
  }
  .pe-xxl-0 {
    padding-right: 0;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem;
  }
  .pe-xxl-3 {
    padding-right: 1rem;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem;
  }
  .pe-xxl-5 {
    padding-right: 3rem;
  }
  .pb-xxl-0 {
    padding-bottom: 0;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem;
  }
  .ps-xxl-0 {
    padding-left: 0;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem;
  }
  .ps-xxl-3 {
    padding-left: 1rem;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem;
  }
  .ps-xxl-5 {
    padding-left: 3rem;
  }
  .gap-xxl-0 {
    gap: 0;
  }
  .gap-xxl-1 {
    gap: 0.25rem;
  }
  .gap-xxl-2 {
    gap: 0.5rem;
  }
  .gap-xxl-3 {
    gap: 1rem;
  }
  .gap-xxl-4 {
    gap: 1.5rem;
  }
  .gap-xxl-5 {
    gap: 3rem;
  }
  .row-gap-xxl-0 {
    row-gap: 0;
  }
  .row-gap-xxl-1 {
    row-gap: 0.25rem;
  }
  .row-gap-xxl-2 {
    row-gap: 0.5rem;
  }
  .row-gap-xxl-3 {
    row-gap: 1rem;
  }
  .row-gap-xxl-4 {
    row-gap: 1.5rem;
  }
  .row-gap-xxl-5 {
    row-gap: 3rem;
  }
  .column-gap-xxl-0 {
    column-gap: 0;
  }
  .column-gap-xxl-1 {
    column-gap: 0.25rem;
  }
  .column-gap-xxl-2 {
    column-gap: 0.5rem;
  }
  .column-gap-xxl-3 {
    column-gap: 1rem;
  }
  .column-gap-xxl-4 {
    column-gap: 1.5rem;
  }
  .column-gap-xxl-5 {
    column-gap: 3rem;
  }
  .text-xxl-start {
    text-align: left;
  }
  .text-xxl-end {
    text-align: right;
  }
  .text-xxl-center {
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.25rem;
  }
  .fs-2 {
    font-size: 1.75rem;
  }
  .fs-3 {
    font-size: 1.5rem;
  }
}
@media print {
  .d-print-inline {
    display: inline;
  }
  .d-print-inline-block {
    display: inline-block;
  }
  .d-print-block {
    display: block;
  }
  .d-print-grid {
    display: grid;
  }
  .d-print-inline-grid {
    display: inline-grid;
  }
  .d-print-table {
    display: table;
  }
  .d-print-table-row {
    display: table-row;
  }
  .d-print-table-cell {
    display: table-cell;
  }
  .d-print-flex {
    display: flex;
  }
  .d-print-inline-flex {
    display: inline-flex;
  }
  .d-print-none {
    display: none;
  }
}
/*
Tiny slider
==================================================
Import of Tiny slider vendor.

https://github.com/ganlanyuan/tiny-slider

@sw-package framework
*/
.tns-outer {
  padding: 0 !important;
}
.tns-outer [hidden] {
  display: none !important;
}
.tns-outer [aria-controls], .tns-outer [data-action] {
  cursor: pointer;
}
.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
}
.tns-slider > .tns-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tns-horizontal.tns-subpixel {
  white-space: nowrap;
}
.tns-horizontal.tns-subpixel > .tns-item {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}
.tns-horizontal.tns-no-subpixel:after {
  content: "";
  display: table;
  clear: both;
}
.tns-horizontal.tns-no-subpixel > .tns-item {
  float: left;
}
.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
  margin-right: -100%;
}
.tns-no-calc {
  position: relative;
  left: 0;
}
.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px;
}
.tns-gallery > .tns-item {
  position: absolute;
  left: -100%;
  -webkit-transition: transform 0s, opacity 0s;
  -moz-transition: transform 0s, opacity 0s;
  transition: transform 0s, opacity 0s;
}
.tns-gallery > .tns-slide-active {
  position: relative;
  left: auto !important;
}
.tns-gallery > .tns-moving {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  transition: all 0.25s;
}
.tns-autowidth {
  display: inline-block;
}
.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6;
}
.tns-lazy-img.tns-complete {
  opacity: 1;
}
.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s;
}
.tns-ovh {
  overflow: hidden;
}
.tns-visually-hidden {
  position: absolute;
  left: -10000em;
}
.tns-transparent {
  opacity: 0;
  visibility: hidden;
}
.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0;
}
.tns-normal, .tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}
.tns-vpfix {
  white-space: nowrap;
}
.tns-vpfix > div, .tns-vpfix > li {
  display: inline-block;
}
.tns-t-subp2 {
  margin: 0 auto;
  width: 310px;
  position: relative;
  height: 10px;
  overflow: hidden;
}
.tns-t-ct {
  width: 2333.3333333333%;
  width: -webkit-calc(100% * 70 / 3);
  width: -moz-calc(100% * 70 / 3);
  width: calc(100% * 70 / 3);
  position: absolute;
  right: 0;
}
.tns-t-ct:after {
  content: "";
  display: table;
  clear: both;
}
.tns-t-ct > div {
  width: 1.4285714286%;
  width: -webkit-calc(100% / 70);
  width: -moz-calc(100% / 70);
  width: calc(100% / 70);
  height: 10px;
  float: left;
}
/*
Datepicker
==================================================
Import of flatpickr vendor.

https://flatpickr.js.org/getting-started/
*/
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}
.flatpickr-calendar.open, .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before, .flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  /*
      /*rtl:begin:ignore*/
  left: 0;
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  /*
      /*rtl:begin:ignore*/
  right: 0;
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input, .numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}
.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}
.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch \0 ;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}
.dayContainer, .flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*
 * Base stuff
 * ---------- */
/*
Base
==================================================
Contains global base styles for all pages

@sw-package framework
*/
html {
  /* stylelint-disable selector-class-pattern -- allow BEM here as it is a generated class name from the administration
     * sw-text-editor component adds a column selector to configure the width of table columns
     * this must no be shown in the storefront as it breaks table layouts
     */
  /* stylelint-enable selector-class-pattern */
}
html.no-scroll {
  position: relative;
  overflow: hidden;
}
html .sw-text-editor-table .sw-text-editor-table__col {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
html .sw-text-editor-table .sw-text-editor-table__col-selector {
  display: none;
}
html .sw-text-editor-table__head td {
  background: #eee;
}
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
@media (max-width: 575.98px) {
  :root {
    --sw-current-breakpoint: "xs";
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --sw-current-breakpoint: "sm";
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --sw-current-breakpoint: "md";
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --sw-current-breakpoint: "lg";
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root {
    --sw-current-breakpoint: "xl";
  }
}
@media (min-width: 1400px) {
  :root {
    --sw-current-breakpoint: "xxl";
  }
}
/*
Reboot
==================================================
Reboot styles using only element selectors.

@sw-package framework

https://getbootstrap.com/docs/5.2/content/reboot
*/
input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
a[data-ajax-modal] {
  text-decoration: underline;
}
/*
 * Components
 * ---------- */
/*
Alert
==============================================
Custom styling for bootstrap alert component.

https://getbootstrap.com/docs/5.2/components/alerts
*/
.alert-list {
  padding-left: 20px;
  margin-bottom: 0;
}
/*
Card
==============================================
Custom styling for bootstrap card component.

https://getbootstrap.com/docs/5.2/components/card
*/
.card-title {
  color: #2b3136;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}
.card-col {
  margin-bottom: 1rem;
  display: flex;
}
.card-col .card {
  width: 100%;
}
.card-col .card-body {
  display: flex;
  flex-direction: column;
}
.card-actions {
  align-items: flex-start;
  margin-top: auto;
}
/*
Sidebar category navigation
==============================================
Styling for category navigation component.
*/
.category-navigation {
  list-style: none;
  margin: 0;
  padding-left: 20px;
}
.category-navigation.level-0 > .category-navigation-entry {
  border-bottom: 1px solid #e3ddd3;
}
.category-navigation.level-0 {
  padding-left: 0;
  font-size: 16px;
}
.category-navigation.level-1 {
  font-size: 14px;
}
.category-navigation.level-2 {
  font-size: 12px;
}
.category-navigation-entry {
  margin: 0;
  padding: 0;
}
.category-navigation-link {
  display: block;
  padding: 8px 20px;
  font-weight: 400;
  color: #2b3136;
  text-decoration: none;
}
.category-navigation-link:hover {
  text-decoration: none;
}
.category-navigation-link.is-active {
  color: #2F5D50;
  font-weight: 700;
}
.category-navigation-link.in-path {
  font-weight: 700;
}
/*
Backdrop
==============================================
Custom styling for backdrop used by bootstrap modal und custom offcanvas component.

https://getbootstrap.com/docs/5.2/components/modal
*/
.modal-backdrop {
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.3, 0, 0.15, 1), visibility 0.45s linear;
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop {
    transition: none;
  }
}
.modal-backdrop.modal-backdrop-open {
  opacity: 1;
}
.modal-backdrop > .loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1rem;
  margin-top: -1rem;
}
/*
Base slider
==============================================
Styling for base slider component.
Contains minimal styling for a slider with arrow and/or dot navigation.
based on: https://github.com/ganlanyuan/tiny-slider
*/
.base-slider {
  position: relative;
  overflow: hidden;
}
.base-slider .tns-nav, .base-slider .base-slider-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 10px 0;
}
.base-slider .tns-nav .base-slider-dot, .base-slider .tns-nav button, .base-slider .base-slider-dots .base-slider-dot, .base-slider .base-slider-dots button {
  background-color: #4a545b;
  border: 0;
  height: 8px;
  width: 8px;
  padding: 8px;
  border-radius: 50%;
  margin: 0 8px;
}
.base-slider .tns-nav .base-slider-dot:hover, .base-slider .tns-nav .base-slider-dot.tns-nav-active, .base-slider .tns-nav button:hover, .base-slider .tns-nav button.tns-nav-active, .base-slider .base-slider-dots .base-slider-dot:hover, .base-slider .base-slider-dots .base-slider-dot.tns-nav-active, .base-slider .base-slider-dots button:hover, .base-slider .base-slider-dots button.tns-nav-active {
  background-color: #2F5D50;
}
.base-slider .tns-nav .base-slider-dot.tns-nav-active, .base-slider .tns-nav button.tns-nav-active, .base-slider .base-slider-dots .base-slider-dot.tns-nav-active, .base-slider .base-slider-dots button.tns-nav-active {
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.base-slider .tns-nav .base-slider-dot:focus, .base-slider .tns-nav button:focus, .base-slider .base-slider-dots .base-slider-dot:focus, .base-slider .base-slider-dots button:focus {
  outline: none;
}
.base-slider.has-dots-outside {
  padding-bottom: 40px;
}
.base-slider.has-dots-outside .tns-nav, .base-slider.has-dots-outside .base-slider-dots {
  bottom: auto;
}
.base-slider.has-nav-outside {
  padding-left: 25px;
  padding-right: 25px;
}
.base-slider .tns-ovh {
  overflow: visible;
}
.base-slider-controls {
  margin-bottom: 0;
}
.base-slider-controls-prev, .base-slider-controls-next {
  display: block;
  width: 30px;
  height: 65px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 68px;
  transition: opacity 0.15s ease;
  cursor: pointer;
  padding: 0;
  color: #23201c;
  background: #fbf9f6;
  border: 1px solid #fbf9f6;
}
.base-slider-controls-prev .icon, .base-slider-controls-next .icon {
  color: currentColor;
}
.base-slider-controls-prev:hover, .base-slider-controls-next:hover {
  border-color: #2F5D50;
  color: #2F5D50;
}
.base-slider-controls-prev[disabled], .base-slider-controls-next[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.base-slider-controls-prev {
  border-radius: 0 8px 8px 0;
}
.base-slider-controls-prev.is-nav-prev-outside {
  border-radius: 8px 0 0 8px;
}
.base-slider-controls-next {
  border-radius: 8px 0 0 8px;
}
.base-slider-controls-next.is-nav-next-outside {
  border-radius: 0 8px 8px 0;
}
@media (min-width: 768px) {
  .base-slider .tns-nav .base-slider-dot, .base-slider .tns-nav button, .base-slider .base-slider-dots .base-slider-dot, .base-slider .base-slider-dots button {
    margin: 0 5px;
  }
  .base-slider .tns-nav.hide-dots, .base-slider .base-slider-dots.hide-dots {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .base-slider .tns-nav, .base-slider .base-slider-dots {
    width: 55%;
    text-align: center;
  }
  .base-slider .tns-nav.hide-dots, .base-slider .tns-nav.hide-dots-mobile, .base-slider .base-slider-dots.hide-dots, .base-slider .base-slider-dots.hide-dots-mobile {
    display: none;
  }
}
/*
Image slider
==============================================
Styling for image slider component.
Displays images in a reusable slider component.
based on "base-slider" component and "tiny-slider" (https://github.com/ganlanyuan/tiny-slider)
*/
.image-slider.has-nav-outside .image-slider-item-container {
  padding: 0 25px;
}
.image-slider-container {
  position: relative;
  height: 100%;
}
.image-slider-container.has-vertical-align {
  display: flex;
}
.image-slider-container.has-vertical-align.is-align-top {
  align-items: flex-start;
}
.image-slider-container.has-vertical-align.is-align-center {
  align-items: center;
}
.image-slider-container.has-vertical-align.is-align-bottom {
  align-items: flex-end;
}
.image-slider-container .image-slider-image {
  display: block;
  width: 100%;
}
.image-slider-container .image-slider-item {
  display: grid;
  max-width: 100%;
  position: relative;
}
.image-slider-container .image-slider-item.is-not-first {
  display: none;
}
.image-slider-container .image-slider-item.is-cover {
  height: 100%;
}
.image-slider-container .image-slider-item.is-cover .image-slider-image {
  object-fit: cover;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.image-slider-container .image-slider-link {
  display: block;
}
.js-slider-initialized .image-slider-item.is-not-first {
  display: block;
}
.image-slider-controls-prev.is-nav-prev-inside {
  left: 0;
}
.image-slider-controls-prev.is-nav-prev-outside {
  left: 0;
}
.image-slider-controls-next.is-nav-next-inside {
  right: 0;
}
.image-slider-controls-next.is-nav-next-outside {
  right: 0;
}
@media (min-width: 768px) {
  .image-slider-controls-prev.is-nav-prev-outside {
    left: -5px;
  }
  .image-slider-controls-next.is-nav-next-outside {
    right: -5px;
  }
}
/*
Product slider
==============================================
Styling for product slider component.
Displays product-boxes in a reusable slider component.
based on "base-slider" component and "tiny-slider" (https://github.com/ganlanyuan/tiny-slider)
*/
.product-slider.has-border {
  border: 1px solid #e3ddd3;
  border-radius: 8px;
  padding: 25px;
}
.product-slider-container {
  padding-bottom: 1px;
}
.product-slider-controls-prev, .product-slider-controls-next {
  border: 0;
  background: none;
}
.product-slider-controls-prev.is-nav-prev-inside, .product-slider-controls-prev.is-nav-next-inside, .product-slider-controls-next.is-nav-prev-inside, .product-slider-controls-next.is-nav-next-inside {
  background: var(--bs-gray-200);
}
.product-slider-controls-prev {
  left: -10px;
}
.product-slider-controls-prev.has-border {
  left: 0;
}
.product-slider-controls-prev.is-nav-prev-inside {
  left: 0;
}
.product-slider-controls-prev.is-nav-prev-inside.has-border {
  left: 25px;
}
.product-slider-controls-next {
  right: -10px;
}
.product-slider-controls-next.has-border {
  right: 0;
}
.product-slider-controls-next.is-nav-next-inside {
  right: 0;
}
.product-slider-controls-next.is-nav-next-inside.has-border {
  right: 25px;
}
/*
Gallery slider
==============================================
Styling for gallery slider component.
Displays images in a slider gallery with thumbnail navigation.
based on "base-slider" component and "tiny-slider" (https://github.com/ganlanyuan/tiny-slider)
*/
.gallery-slider {
  width: 99.9%;
}
.gallery-slider.has-nav-outside .gallery-slider-item-container {
  padding: 0 25px;
}
.gallery-slider-row {
  margin-bottom: 1rem;
}
.gallery-slider-row.is-loading {
  height: auto;
  overflow: hidden;
}
.gallery-slider-row.is-loading .gallery-slider-item-container:not(:first-child) {
  display: none;
}
.gallery-slider-row.is-loading .gallery-slider-thumbnails-col.is-underneath {
  display: none;
}
.gallery-slider-row.is-loading .gallery-slider-thumbnails-col.is-left .gallery-slider-thumbnails {
  max-height: 425px;
  overflow: hidden;
}
.gallery-slider-row.is-single-image {
  justify-content: center;
}
.gallery-slider-single-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-slider-container {
  position: relative;
  height: 100%;
}
.gallery-slider-container .gallery-slider-image {
  display: block;
}
.gallery-slider-container.has-vertical-align {
  display: flex;
}
.gallery-slider-container.has-vertical-align.is-align-top {
  align-items: flex-start;
}
.gallery-slider-container.has-vertical-align.is-align-center {
  align-items: center;
}
.gallery-slider-container.has-vertical-align.is-align-bottom {
  align-items: flex-end;
}
.gallery-slider-item, .gallery-slider-single-image {
  position: relative;
  backface-visibility: hidden;
  cursor: default;
  display: block;
  height: 100%;
  max-width: 100%;
}
.gallery-slider-item.is-cover, .gallery-slider-item.is-contain, .gallery-slider-single-image.is-cover, .gallery-slider-single-image.is-contain {
  height: 100%;
}
.gallery-slider-item.is-cover .gallery-slider-image, .gallery-slider-item.is-contain .gallery-slider-image, .gallery-slider-single-image.is-cover .gallery-slider-image, .gallery-slider-single-image.is-contain .gallery-slider-image {
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}
.gallery-slider-item.is-cover .gallery-slider-image, .gallery-slider-single-image.is-cover .gallery-slider-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.gallery-slider-item.is-contain .gallery-slider-image, .gallery-slider-single-image.is-contain .gallery-slider-image {
  margin: auto;
  object-fit: contain;
}
.gallery-slider-controls-prev {
  left: 0;
}
.gallery-slider-controls-prev.is-nav-prev-outside {
  left: 0;
}
.gallery-slider-controls-next {
  right: 0;
}
.gallery-slider-controls-next.is-nav-next-outside {
  right: 0;
}
.gallery-slider-thumbnails-container {
  position: relative;
}
.gallery-slider-thumbnails-container .tns-inner {
  display: flex;
  justify-content: center;
}
.gallery-slider-thumbnails-container.is-underneath .tns-inner {
  display: block;
}
.gallery-slider-thumbnails-container.is-underneath .tns-outer {
  margin: 0 30px;
}
.gallery-slider-thumbnails-container.hide-thumbs {
  display: none;
}
.gallery-slider-thumbnails-col .gallery-slider-thumbnails-controls-prev, .gallery-slider-thumbnails-col .gallery-slider-thumbnails-controls-next {
  border: 0;
  background: none;
  height: 30px;
  width: 65px;
  line-height: normal;
}
.gallery-slider-thumbnails-col.is-left {
  padding-right: 0;
}
.gallery-slider-thumbnails-col.is-left .gallery-slider-thumbnails-controls-prev {
  top: -30px;
}
.gallery-slider-thumbnails-col.is-left .gallery-slider-thumbnails-controls-next {
  bottom: -20px;
  top: auto;
}
.gallery-slider-thumbnails-col.is-left .gallery-slider-thumbnails-controls-prev, .gallery-slider-thumbnails-col.is-left .gallery-slider-thumbnails-controls-next {
  left: 50%;
  transform: translateX(-50%);
}
.gallery-slider-thumbnails-col.is-underneath .gallery-slider-thumbnails-controls-prev {
  left: -25px;
}
.gallery-slider-thumbnails-col.is-underneath .gallery-slider-thumbnails-controls-next {
  right: -25px;
}
.gallery-slider-thumbnails-col.is-underneath .gallery-slider-thumbnails-controls-prev, .gallery-slider-thumbnails-col.is-underneath .gallery-slider-thumbnails-controls-next {
  transform: translateY(-30%);
}
.gallery-slider-modal-controls {
  z-index: 10;
}
.gallery-slider-modal-controls .gallery-slider-thumbnails-controls-prev {
  left: 0;
}
.gallery-slider-modal-controls .gallery-slider-thumbnails-controls-next {
  right: 0;
}
.gallery-slider-thumbnails.is-underneath {
  display: flex;
  margin-top: 1rem;
}
.gallery-slider-thumbnails.is-underneath .gallery-slider-thumbnails-item {
  width: auto;
}
.gallery-slider-thumbnails-item {
  cursor: pointer;
  height: 75px;
  width: 75px;
}
.gallery-slider-thumbnails-item.tns-nav-active .gallery-slider-thumbnails-item-inner {
  border-color: #2F5D50;
}
.gallery-slider-thumbnails-item-inner {
  border: 1px solid #e3ddd3;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
}
.gallery-slider-thumbnails-image, .gallery-slider-image {
  flex: 0 0 auto;
  max-height: 100%;
  max-width: 100%;
}
.gallery-slider-thumbnails-play-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.gallery-slider-thumbnails-play-button::before, .gallery-slider-thumbnails-play-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}
.gallery-slider-thumbnails-play-button::before {
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}
.gallery-slider-thumbnails-play-button::after {
  transform: translate(-40%, -50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}
.gallery-slider-thumbnails-controls {
  display: none;
  margin: 0;
}
.gallery-slider-canvas-disabled .spatial-canvas-spinner {
  display: none;
}
.gallery-slider-canvas-disabled .gallery-slider-spatial-canvas-wrapper {
  display: none;
}
.spatial-anim-container .spatial-anim-button {
  height: 40px;
  width: 40px;
  border: none;
  outline: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
}
.spatial-anim-container .spatial-anim-button.spatial-anim-play .icon-play {
  display: none;
}
.spatial-anim-container .spatial-anim-button:not(.spatial-anim-play) .icon-pause {
  display: none;
}
.spatial-anim-container .spatial-anim-button .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--bs-white);
  width: 16px;
  height: 16px;
}
.spatial-anim-container .spatial-anim-button .icon svg {
  top: unset;
}
.spatial-anim-container .spatial-anim-button-circle {
  --stroke-width: 3px;
  --circomference: calc((50% - (var(--stroke-width) / 2)) * 3.14 * 2);
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.spatial-anim-container .spatial-anim-button-circle circle {
  fill: none;
  stroke-width: var(--stroke-width);
  stroke: var(--bs-white, #fff);
  stroke-dasharray: var(--circomference);
  stroke-dashoffset: calc(var(--circomference) * (1 - var(--progress, 0)));
  stroke-linecap: round;
  position: relative;
}
.spatial-anim-container .spatial-anim-switch-container .icon {
  position: absolute;
  right: 12px;
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-white);
  pointer-events: none;
}
.spatial-anim-container .spatial-anim-switch-container svg {
  top: unset;
}
.spatial-anim-container .spatial-anim-switch {
  appearance: none;
  height: 40px;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--bs-white, #fff);
  border-radius: 8px;
  border: none;
  outline: none;
  padding: 0 34px 0 12px;
}
.spatial-canvas-note {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #4a545b;
  color: #FBF9F6;
  padding: 0 8px;
  border-radius: 8px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.spatial-canvas-note.spatial-canvas-note--hidden {
  opacity: 0;
}
.spatial-canvas-note.spatial-slider-movement-note {
  bottom: 86px;
}
.ar-button {
  top: 10px;
  right: 9px;
  height: 32px;
  border: 2px solid #bcc1c7;
  border-radius: 5px;
  background-color: #fff;
}
.ar-button .icon-augmented {
  height: 18px;
  width: 18px;
  margin-right: 5px;
}
.ar-button .icon-augmented svg {
  top: unset;
}
.ar-button:hover {
  box-shadow: 0 0 11px #bcc1c7;
}
.gallery-slider-spatial-canvas-wrapper {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.gallery-slider-spatial-canvas-wrapper.spatial-canvas-display {
  background-color: #FBF9F6;
  opacity: 1;
}
@media (max-width: 575.98px) {
  .gallery-slider-item.is-cover, .gallery-slider-item.is-contain {
    min-height: 225px !important;
  }
}
@media (max-width: 767.98px) {
  .gallery-slider-single-image.is-cover, .gallery-slider-single-image.is-contain {
    min-height: 225px !important;
  }
}
@media (min-width: 768px) {
  .gallery-slider-row {
    justify-content: center;
  }
  .gallery-slider-thumbnails-controls {
    display: block;
  }
  .gallery-slider-thumbnails-col.is-left .gallery-slider-thumbnails-item {
    margin-bottom: 0 !important;
    padding-bottom: 10px;
  }
}
/*
Magnifier
==============================================
Styling for magnifier component.
Displays a lens over a single image or gallery slider and shows the magnified version of the image.
*/
.magnifier-overlay, .magnifier-zoom-image {
  background-clip: padding-box;
  opacity: 0;
  animation: magnifyLensFade 0.5s forwards;
  pointer-events: none;
  z-index: 1100;
}
.magnifier-overlay {
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #e3ddd3;
}
.magnifier-zoom-image {
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 0 0;
  top: 0;
  left: 0;
}
@keyframes magnifyLensFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
Zoom modal
==============================================
Styling for zoom modal component.
Displays a single image or a gallery slider in a zoom modal with zoom functions.
*/
.zoom-modal-wrapper {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.modal.zoom-modal {
  overflow: hidden;
}
.modal.zoom-modal .zoom-modal-actions, .modal.zoom-modal .btn-close {
  position: absolute;
  top: 0;
  opacity: 1;
  z-index: 1051;
  margin: 15px;
}
.modal.zoom-modal .zoom-modal-actions {
  left: 0;
}
.modal.zoom-modal .btn-close {
  right: 0;
}
.modal.zoom-modal .modal-dialog .modal-content, .modal.zoom-modal .modal-dialog .modal-body {
  padding: 0;
  overflow: hidden;
}
.modal.zoom-modal .modal-footer {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 0 1rem;
  justify-content: center;
  background-color: #fff;
  margin: 0 30px;
}
.modal.zoom-modal .gallery-slider {
  top: 0;
  bottom: 0;
  position: absolute;
  height: auto;
  width: 100%;
}
.modal.zoom-modal .gallery-slider-thumbnails {
  margin: 0 auto;
}
.modal.zoom-modal .gallery-slider-controls-next {
  right: 0;
}
.modal.zoom-modal .gallery-slider-controls-prev {
  left: 0;
}
.modal.zoom-modal .gallery-slider-thumbnails-item {
  width: auto;
}
.modal.zoom-modal .gallery-slider-thumbnails-controls-next {
  right: -30px;
}
.modal.zoom-modal .gallery-slider-thumbnails-controls-prev {
  left: -30px;
}
.modal.zoom-modal .image-zoom-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  touch-action: auto !important;
  -webkit-user-select: auto !important;
  -webkit-touch-callout: default !important;
  -webkit-user-drag: auto !important;
}
.modal.zoom-modal .image-zoom-container > * {
  position: relative;
}
.modal.zoom-modal .image-zoom-btn.disabled {
  opacity: 0.3;
}
@media (min-width: 768px) {
  .modal.zoom-modal .gallery-slider {
    bottom: 100px;
  }
  .modal.zoom-modal .modal-footer {
    display: flex;
  }
}
/*
OffCanvas
==============================================
Move page content like the navigation menu in a sliding OffCanvas menu.
The sliding direction can be left or right.

@see https://getbootstrap.com/docs/5.2/components/offcanvas
*/
.offcanvas {
  transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
}
.offcanvas.offcanvas-start .offcanvas-close {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.offcanvas.offcanvas-bottom {
  --bs-offcanvas-height: 90%;
  border-radius: 8px 8px 0 0;
}
.offcanvas.is-fullwidth {
  width: 100%;
}
.offcanvas .offcanvas-header {
  --bs-offcanvas-padding-y: 0;
  --bs-offcanvas-padding-x: 0;
  background-color: #fff;
}
.offcanvas .offcanvas-header .offcanvas-title {
  font-size: 24px;
  font-weight: 700;
}
.offcanvas .offcanvas-footer {
  bottom: 0;
  top: auto;
}
.offcanvas .offcanvas-close {
  width: 100%;
  border-radius: 0;
  font-weight: 400;
  padding: 0.5rem 1rem;
  text-align: left;
}
.offcanvas .offcanvas-close:focus-visible {
  box-shadow: inset 0 0 0 0.125rem #2f5d50, inset 0 0 0 0.25rem #fbf9f6;
}
.offcanvas > .loader, .offcanvas .offcanvas-body > .loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1rem;
  margin-top: -1rem;
}
.offcanvas .line-item-total-price-value, .offcanvas .offcanvas-body .line-item-total-price-value {
  text-align: left;
}
@media (max-width: 420px) {
  .offcanvas.offcanvas-end, .offcanvas.offcanvas-start {
    width: calc(100% - 20px);
  }
}
@media (max-width: 575.98px) {
  .offcanvas.offcanvas-start .offcanvas-close {
    gap: 0.5rem;
  }
  .offcanvas .offcanvas-close {
    white-space: normal;
    line-height: normal;
  }
  .offcanvas .offcanvas-close .icon {
    flex: 0 0 auto;
  }
}
/*
Product box
==============================================
Styling for productbox component.
*/
.product-box {
  height: 100%;
}
.product-box.box-standard .stretched-link::after, .product-box.box-minimal .stretched-link::after {
  height: calc(200px + var(--bs-card-spacer-y));
}
.product-box.box-image .stretched-link::after {
  height: calc(332px + var(--bs-card-spacer-y));
}
.product-box.box-image .product-image-wrapper {
  height: 332px;
}
.product-box.box-image .product-image {
  max-height: 332px;
}
.product-box.box-image .product-image.is-standard {
  height: 100%;
  object-fit: cover;
}
.product-variant-characteristics {
  min-height: 3em;
}
.product-variant-characteristics .product-variant-characteristics-text {
  overflow: hidden;
  line-height: 1.5em;
  height: 3em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  max-width: 95%;
  /* stylelint-disable */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* stylelint-enable */
  line-clamp: 2;
  text-overflow: ellipsis;
  font-size: 1.0625rem;
}
.product-variant-characteristics .product-variant-characteristics-option {
  font-weight: 700;
}
.product-image-wrapper {
  height: 200px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 180px;
  margin-bottom: 15px;
  position: relative;
}
.product-image-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-image-link.is-cover {
  align-items: flex-start;
}
.product-image {
  display: block;
  max-width: 100%;
  max-height: 200px;
}
.product-image.is-standard, .product-image.is-cover, .product-image.is-contain {
  width: 100%;
  height: 100%;
}
.product-image.is-cover {
  object-fit: cover;
}
.product-image.is-contain {
  object-fit: contain;
}
.product-image.is-standard {
  object-fit: scale-down;
}
.product-image-placeholder {
  max-width: 180px;
  height: 100%;
}
.product-rating {
  margin-bottom: 10px;
  height: 25px;
}
/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
.product-name {
  color: #2b3136;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  height: 2.75rem;
  margin-bottom: 10px;
  font-size: 1.125rem;
  line-height: 1.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.product-name:hover {
  color: var(--text-color-brand-primary);
  text-decoration: none;
}
.product-description {
  height: 4.5rem;
  margin-top: 10px;
  font-size: 1.1875rem;
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
.product-price-info {
  margin-top: 10px;
}
.product-price-info .product-advanced-list-price-wrapper {
  font-weight: 400;
}
.product-price-unit {
  height: 36px;
  font-size: 0.875rem;
  line-height: 1.125rem;
  overflow: hidden;
}
.product-unit-label {
  font-weight: 700;
}
.product-cheapest-price {
  min-height: 20px;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  margin-bottom: 32px;
}
.product-cheapest-price .product-cheapest-price-price {
  font-weight: 700;
}
.product-cheapest-price.with-regulation-price, .product-cheapest-price.with-list-price {
  margin-bottom: 6px;
}
.product-cheapest-price.with-from-price {
  margin-bottom: 5px;
}
.product-price {
  color: #2b3136;
  min-height: 20px;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25rem;
  overflow: hidden;
}
.product-price.with-list-price {
  color: #B8402F;
}
.product-price .list-price {
  color: #2b3136;
  font-weight: 400;
  padding-left: 5px;
  font-size: 0.75rem;
}
.product-price .list-price .list-price-price {
  text-decoration: line-through;
}
.product-price .regulation-price {
  color: #2b3136;
  font-weight: 400;
  font-size: 0.75rem;
  padding-left: 0;
}
.product-price .list-price-no-line-through .list-price-price {
  text-decoration: none;
}
.product-price .strikeprice-text {
  color: #2b3136;
  font-weight: 400;
  padding-left: 5px;
  font-size: 0.75rem;
}
.product-action {
  margin-top: 20px;
}
.product-badges {
  position: absolute;
  top: 30px;
  left: -1px;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.product-badges .badge {
  --bs-badge-padding-x: 8px;
  --bs-badge-padding-y: 0;
  --bs-badge-font-size: 1.125rem;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: 0 3px 3px 0;
  width: max-content;
  height: 2rem;
  margin: 0 0 8px;
  line-height: 2rem;
  letter-spacing: 0;
}
.product-price-wrapper {
  font-size: 1.125rem;
}
/*
Loader
==============================================
Defines the loader icon
*/
.loader {
  --bs-text-opacity: 1;
  --bs-spinner-border-width: 3px;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
}
/*
Element loader
==============================================
Element loader can be applied to any element.
*/
.has-element-loader {
  z-index: 15;
  pointer-events: none;
  position: relative;
}
.element-loader-backdrop {
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.3, 0, 0.15, 1), visibility 0.45s linear;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 11px 7px rgba(255, 255, 255, 0.5);
  z-index: 15;
}
.element-loader-backdrop.element-loader-backdrop-open {
  opacity: 1;
}
.element-loader-backdrop > .loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1rem;
  margin-top: -1rem;
}
/*
Skeleton screen
==============================================
Skeleton screen for reloading product-listing with subtle shimmer effect
*/
@keyframes skeletonShimmer {
  0% {
    background-position: -500px 0;
  }
  100% {
    background-position: 500px 0;
  }
}
.has-element-loader .cms-element-product-listing .product-badges, .has-element-loader .cms-element-product-listing .product-image-link, .has-element-loader .cms-element-product-listing .product-image, .has-element-loader .cms-element-product-listing .product-review-rating {
  display: none;
}
.has-element-loader .cms-element-product-listing .product-image-wrapper, .has-element-loader .cms-element-product-listing .product-rating, .has-element-loader .cms-element-product-listing .product-name, .has-element-loader .cms-element-product-listing .product-variant-characteristics, .has-element-loader .cms-element-product-listing .product-description, .has-element-loader .cms-element-product-listing .product-price-unit, .has-element-loader .cms-element-product-listing .product-cheapest-price-price, .has-element-loader .cms-element-product-listing .product-price {
  border-radius: 8px;
  color: transparent;
  animation: skeletonShimmer 1.5s linear 0s infinite normal forwards running;
  background: linear-gradient(to right, #bcc1c7 8%, #f9f9f9 18%, #bcc1c7 28%);
  background-size: 800px 100px;
}
.has-element-loader .cms-element-product-listing .product-rating {
  width: 50%;
}
.has-element-loader .cms-element-product-listing .product-name {
  width: 75%;
}
.has-element-loader .cms-element-product-listing .product-price {
  width: 35%;
}
.has-element-loader .cms-element-product-listing .product-wishlist-info-item {
  border-radius: 8px;
  color: transparent;
  animation: skeletonShimmer 1.5s linear 0s infinite normal forwards running;
  background: linear-gradient(to right, #bcc1c7 8%, #f9f9f9 18%, #bcc1c7 28%);
  background-size: 800px 100px;
}
.has-element-loader .cms-element-product-listing .product-wishlist-info-status {
  display: none;
}
.has-element-loader .cms-element-product-listing .product-variant-characteristics-text, .has-element-loader .cms-element-product-listing .product-wishlist-remove {
  display: none;
}
/*
Button loading indicator
==============================================
Can be shown before or after the button text or replace it.
*/
.btn > .loader {
  --bs-spinner-width: 18px;
  --bs-spinner-height: 18px;
  --bs-spinner-vertical-align: -0.25em;
  color: var(--bs-btn-color);
}
.btn.is-loading-indicator-before .loader {
  margin-right: var(--bs-btn-padding-x);
}
.btn.is-loading-indicator-after .loader {
  margin-left: var(--bs-btn-padding-x);
}
@keyframes slide-in {
  0% {
    opacity: 0;
    margin-bottom: -30px;
  }
  100% {
    opacity: 1;
    margin-bottom: 0;
  }
}
.btn.is-loading-indicator-inner .loader {
  animation: 0.15s ease-out 0s 1 slide-in, var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
  /* stylelint-enable */
}
/*
Modal
==============================================
Custom styling for bootstrap modal component.

https://getbootstrap.com/docs/5.2/components/modal
*/
.modal .modal-header.only-close {
  border-bottom-color: transparent;
}
.modal .modal-close:focus {
  outline: 0;
}
.modal .cms-section-default .boxed {
  padding: 0;
}
.modal.is-fullscreen .modal-dialog, .modal.is-fullscreen .modal-content {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  max-width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  overflow-y: scroll;
  box-shadow: none;
}
.modal.is-fullscreen .modal-dialog, .modal.is-fullscreen .modal-content, .modal.is-fullscreen .modal-header, .modal.is-fullscreen .modal-body, .modal.is-fullscreen .modal-footer {
  border-radius: 0;
}
/*
 * Temporary focusable element added via JS after a modal/offcanvas to keep the Bootstrap focus-trap
 * working when it is the last focusable element before `</body>`. Pinned inside the viewport so the
 * browser does not scroll to the bottom of the page while focus briefly bumps to it.
 *
 * @todo: Remove when upstream issue https://github.com/twbs/bootstrap/issues/42503 is resolved.
 */
.js-focus-trap-guard {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/*
Language flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.

inspired by: https://github.com/dhanishgajjar/css-flags

@deprecated tag:v6.8.0 - This file will be removed

You can use the Twig block 'layout_header_actions_languages_widget_form_items_flag_inner' and
'layout_header_actions_language_widget_content_inner' to add custom flags if desired.
*/
.language-flag {
  display: inline-block;
  height: 12px;
  width: 16px;
  border: 1px solid #adb5bd;
  margin-top: 1px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
}
.language-flag.country-de {
  background-image: linear-gradient(to bottom, #000 33%, #f00 33%, #f00 66%, #fc0 66%);
}
.language-flag.country-gb {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJmbGFnLWljb24tY3NzLWdiIiB2aWV3Qm94PSIwIDAgNjQwIDQ4MCI+CiAgPHBhdGggZmlsbD0iIzAxMjE2OSIgZD0iTTAgMGg2NDB2NDgwSDB6Ii8+CiAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTc1IDBsMjQ0IDE4MUw1NjIgMGg3OHY2Mkw0MDAgMjQxbDI0MCAxNzh2NjFoLTgwTDMyMCAzMDEgODEgNDgwSDB2LTYwbDIzOS0xNzhMMCA2NFYwaDc1eiIvPgogIDxwYXRoIGZpbGw9IiNDODEwMkUiIGQ9Ik00MjQgMjgxbDIxNiAxNTl2NDBMMzY5IDI4MWg1NXptLTE4NCAyMGw2IDM1TDU0IDQ4MEgwbDI0MC0xNzl6TTY0MCAwdjNMMzkxIDE5MWwyLTQ0TDU5MCAwaDUwek0wIDBsMjM5IDE3NmgtNjBMMCA0MlYweiIvPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yNDEgMHY0ODBoMTYwVjBIMjQxek0wIDE2MHYxNjBoNjQwVjE2MEgweiIvPgogIDxwYXRoIGZpbGw9IiNDODEwMkUiIGQ9Ik0wIDE5M3Y5Nmg2NDB2LTk2SDB6TTI3MyAwdjQ4MGg5NlYwaC05NnoiLz4KPC9zdmc+Cg==");
}
.language-flag.country-us {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJmbGFnLWljb24tY3NzLXVzIiB2aWV3Qm94PSIwIDAgNjQwIDQ4MCI+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxnIHN0cm9rZS13aWR0aD0iMXB0Ij4KICAgICAgPHBhdGggZmlsbD0iI2JkM2Q0NCIgZD0iTTAgMGg5NzIuOHYzOS40SDB6bTAgNzguOGg5NzIuOHYzOS40SDB6bTAgNzguN2g5NzIuOFYxOTdIMHptMCA3OC44aDk3Mi44djM5LjRIMHptMCA3OC44aDk3Mi44djM5LjRIMHptMCA3OC43aDk3Mi44djM5LjRIMHptMCA3OC44aDk3Mi44VjUxMkgweiIgdHJhbnNmb3JtPSJzY2FsZSguOTM3NSkiLz4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMzkuNGg5NzIuOHYzOS40SDB6bTAgNzguOGg5NzIuOHYzOS4zSDB6bTAgNzguN2g5NzIuOHYzOS40SDB6bTAgNzguOGg5NzIuOHYzOS40SDB6bTAgNzguOGg5NzIuOHYzOS40SDB6bTAgNzguN2g5NzIuOHYzOS40SDB6IiB0cmFuc2Zvcm09InNjYWxlKC45Mzc1KSIvPgogICAgPC9nPgogICAgPHBhdGggZmlsbD0iIzE5MmY1ZCIgZD0iTTAgMGgzODkuMXYyNzUuN0gweiIgdHJhbnNmb3JtPSJzY2FsZSguOTM3NSkiLz4KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zMi40IDExLjhMMzYgMjIuN2gxMS40bC05LjIgNi43IDMuNSAxMS05LjMtNi44LTkuMiA2LjcgMy41LTEwLjktOS4zLTYuN0gyOXptNjQuOSAwbDMuNSAxMC45aDExLjVsLTkuMyA2LjcgMy41IDExLTkuMi02LjgtOS4zIDYuNyAzLjUtMTAuOS05LjItNi43aDExLjR6bTY0LjggMGwzLjYgMTAuOUgxNzdsLTkuMiA2LjcgMy41IDExLTkuMy02LjgtOS4yIDYuNyAzLjUtMTAuOS05LjMtNi43aDExLjV6bTY0LjkgMGwzLjUgMTAuOUgyNDJsLTkuMyA2LjcgMy42IDExLTkuMy02LjgtOS4zIDYuNyAzLjYtMTAuOS05LjMtNi43aDExLjR6bTY0LjggMGwzLjYgMTAuOWgxMS40bC05LjIgNi43IDMuNSAxMS05LjMtNi44LTkuMiA2LjcgMy41LTEwLjktOS4yLTYuN2gxMS40em02NC45IDBsMy41IDEwLjloMTEuNWwtOS4zIDYuNyAzLjYgMTEtOS4zLTYuOC05LjMgNi43IDMuNi0xMC45LTkuMy02LjdoMTEuNXpNNjQuOSAzOS40bDMuNSAxMC45aDExLjVMNzAuNiA1NyA3NCA2Ny45bC05LTYuNy05LjMgNi43TDU5IDU3bC05LTYuN2gxMS40em02NC44IDBsMy42IDEwLjloMTEuNGwtOS4zIDYuNyAzLjYgMTAuOS05LjMtNi43LTkuMyA2LjdMMTI0IDU3bC05LjMtNi43aDExLjV6bTY0LjkgMGwzLjUgMTAuOWgxMS41bC05LjMgNi43IDMuNSAxMC45LTkuMi02LjctOS4zIDYuNyAzLjUtMTAuOS05LjItNi43SDE5MXptNjQuOCAwbDMuNiAxMC45aDExLjRsLTkuMyA2LjcgMy42IDEwLjktOS4zLTYuNy05LjIgNi43IDMuNS0xMC45LTkuMy02LjdIMjU2em02NC45IDBsMy41IDEwLjloMTEuNUwzMzAgNTdsMy41IDEwLjktOS4yLTYuNy05LjMgNi43IDMuNS0xMC45LTkuMi02LjdoMTEuNHpNMzIuNCA2Ni45TDM2IDc4aDExLjRsLTkuMiA2LjcgMy41IDEwLjktOS4zLTYuOC05LjIgNi44IDMuNS0xMS05LjMtNi43SDI5em02NC45IDBsMy41IDExaDExLjVsLTkuMyA2LjcgMy41IDEwLjktOS4yLTYuOC05LjMgNi44IDMuNS0xMS05LjItNi43aDExLjR6bTY0LjggMGwzLjYgMTFIMTc3bC05LjIgNi43IDMuNSAxMC45LTkuMy02LjgtOS4yIDYuOCAzLjUtMTEtOS4zLTYuN2gxMS41em02NC45IDBsMy41IDExSDI0MmwtOS4zIDYuNyAzLjYgMTAuOS05LjMtNi44LTkuMyA2LjggMy42LTExLTkuMy02LjdoMTEuNHptNjQuOCAwbDMuNiAxMWgxMS40bC05LjIgNi43IDMuNSAxMC45LTkuMy02LjgtOS4yIDYuOCAzLjUtMTEtOS4yLTYuN2gxMS40em02NC45IDBsMy41IDExaDExLjVsLTkuMyA2LjcgMy42IDEwLjktOS4zLTYuOC05LjMgNi44IDMuNi0xMS05LjMtNi43aDExLjV6TTY0LjkgOTQuNWwzLjUgMTAuOWgxMS41bC05LjMgNi43IDMuNSAxMS05LjItNi44LTkuMyA2LjcgMy41LTEwLjktOS4yLTYuN2gxMS40em02NC44IDBsMy42IDEwLjloMTEuNGwtOS4zIDYuNyAzLjYgMTEtOS4zLTYuOC05LjMgNi43IDMuNi0xMC45LTkuMy02LjdoMTEuNXptNjQuOSAwbDMuNSAxMC45aDExLjVsLTkuMyA2LjcgMy41IDExLTkuMi02LjgtOS4zIDYuNyAzLjUtMTAuOS05LjItNi43SDE5MXptNjQuOCAwbDMuNiAxMC45aDExLjRsLTkuMiA2LjcgMy41IDExLTkuMy02LjgtOS4yIDYuNyAzLjUtMTAuOS05LjMtNi43SDI1NnptNjQuOSAwbDMuNSAxMC45aDExLjVsLTkuMyA2LjcgMy41IDExLTkuMi02LjgtOS4zIDYuNyAzLjUtMTAuOS05LjItNi43aDExLjR6TTMyLjQgMTIyLjFMMzYgMTMzaDExLjRsLTkuMiA2LjcgMy41IDExLTkuMy02LjgtOS4yIDYuNyAzLjUtMTAuOS05LjMtNi43SDI5em02NC45IDBsMy41IDEwLjloMTEuNWwtOS4zIDYuNyAzLjUgMTAuOS05LjItNi43LTkuMyA2LjcgMy41LTEwLjktOS4yLTYuN2gxMS40em02NC44IDBsMy42IDEwLjlIMTc3bC05LjIgNi43IDMuNSAxMS05LjMtNi44LTkuMiA2LjcgMy41LTEwLjktOS4zLTYuN2gxMS41em02NC45IDBsMy41IDEwLjlIMjQybC05LjMgNi43IDMuNiAxMS05LjMtNi44LTkuMyA2LjcgMy42LTEwLjktOS4zLTYuN2gxMS40em02NC44IDBsMy42IDEwLjloMTEuNGwtOS4yIDYuNyAzLjUgMTEtOS4zLTYuOC05LjIgNi43IDMuNS0xMC45LTkuMi02LjdoMTEuNHptNjQuOSAwbDMuNSAxMC45aDExLjVsLTkuMyA2LjcgMy42IDExLTkuMy02LjgtOS4zIDYuNyAzLjYtMTAuOS05LjMtNi43aDExLjV6TTY0LjkgMTQ5LjdsMy41IDEwLjloMTEuNWwtOS4zIDYuNyAzLjUgMTAuOS05LjItNi44LTkuMyA2LjggMy41LTExLTkuMi02LjdoMTEuNHptNjQuOCAwbDMuNiAxMC45aDExLjRsLTkuMyA2LjcgMy42IDEwLjktOS4zLTYuOC05LjMgNi44IDMuNi0xMS05LjMtNi43aDExLjV6bTY0LjkgMGwzLjUgMTAuOWgxMS41bC05LjMgNi43IDMuNSAxMC45LTkuMi02LjgtOS4zIDYuOCAzLjUtMTEtOS4yLTYuN0gxOTF6bTY0LjggMGwzLjYgMTAuOWgxMS40bC05LjIgNi43IDMuNSAxMC45LTkuMy02LjgtOS4yIDYuOCAzLjUtMTEtOS4zLTYuN0gyNTZ6bTY0LjkgMGwzLjUgMTAuOWgxMS41bC05LjMgNi43IDMuNSAxMC45LTkuMi02LjgtOS4zIDYuOCAzLjUtMTEtOS4yLTYuN2gxMS40ek0zMi40IDE3Ny4ybDMuNiAxMWgxMS40bC05LjIgNi43IDMuNSAxMC44LTkuMy02LjctOS4yIDYuNyAzLjUtMTAuOS05LjMtNi43SDI5em02NC45IDBsMy41IDExaDExLjVsLTkuMyA2LjcgMy42IDEwLjgtOS4zLTYuNy05LjMgNi43IDMuNi0xMC45LTkuMy02LjdoMTEuNHptNjQuOCAwbDMuNiAxMUgxNzdsLTkuMiA2LjcgMy41IDEwLjgtOS4zLTYuNy05LjIgNi43IDMuNS0xMC45LTkuMy02LjdoMTEuNXptNjQuOSAwbDMuNSAxMUgyNDJsLTkuMyA2LjcgMy42IDEwLjgtOS4zLTYuNy05LjMgNi43IDMuNi0xMC45LTkuMy02LjdoMTEuNHptNjQuOCAwbDMuNiAxMWgxMS40bC05LjIgNi43IDMuNSAxMC44LTkuMy02LjctOS4yIDYuNyAzLjUtMTAuOS05LjItNi43aDExLjR6bTY0LjkgMGwzLjUgMTFoMTEuNWwtOS4zIDYuNyAzLjYgMTAuOC05LjMtNi43LTkuMyA2LjcgMy42LTEwLjktOS4zLTYuN2gxMS41ek02NC45IDIwNC44bDMuNSAxMC45aDExLjVsLTkuMyA2LjcgMy41IDExLTkuMi02LjgtOS4zIDYuNyAzLjUtMTAuOS05LjItNi43aDExLjR6bTY0LjggMGwzLjYgMTAuOWgxMS40bC05LjMgNi43IDMuNiAxMS05LjMtNi44LTkuMyA2LjcgMy42LTEwLjktOS4zLTYuN2gxMS41em02NC45IDBsMy41IDEwLjloMTEuNWwtOS4zIDYuNyAzLjUgMTEtOS4yLTYuOC05LjMgNi43IDMuNS0xMC45LTkuMi02LjdIMTkxem02NC44IDBsMy42IDEwLjloMTEuNGwtOS4yIDYuNyAzLjUgMTEtOS4zLTYuOC05LjIgNi43IDMuNS0xMC45LTkuMy02LjdIMjU2em02NC45IDBsMy41IDEwLjloMTEuNWwtOS4zIDYuNyAzLjUgMTEtOS4yLTYuOC05LjMgNi43IDMuNS0xMC45LTkuMi02LjdoMTEuNHpNMzIuNCAyMzIuNGwzLjYgMTAuOWgxMS40bC05LjIgNi43IDMuNSAxMC45LTkuMy02LjctOS4yIDYuNyAzLjUtMTEtOS4zLTYuN0gyOXptNjQuOSAwbDMuNSAxMC45aDExLjVMMTAzIDI1MGwzLjYgMTAuOS05LjMtNi43LTkuMyA2LjcgMy42LTExLTkuMy02LjdoMTEuNHptNjQuOCAwbDMuNiAxMC45SDE3N2wtOSA2LjcgMy41IDEwLjktOS4zLTYuNy05LjIgNi43IDMuNS0xMS05LjMtNi43aDExLjV6bTY0LjkgMGwzLjUgMTAuOUgyNDJsLTkuMyA2LjcgMy42IDEwLjktOS4zLTYuNy05LjMgNi43IDMuNi0xMS05LjMtNi43aDExLjR6bTY0LjggMGwzLjYgMTAuOWgxMS40bC05LjIgNi43IDMuNSAxMC45LTkuMy02LjctOS4yIDYuNyAzLjUtMTEtOS4yLTYuN2gxMS40em02NC45IDBsMy41IDEwLjloMTEuNWwtOS4zIDYuNyAzLjYgMTAuOS05LjMtNi43LTkuMyA2LjcgMy42LTExLTkuMy02LjdoMTEuNXoiIHRyYW5zZm9ybT0ic2NhbGUoLjkzNzUpIi8+CiAgPC9nPgo8L3N2Zz4K");
}
/*
Icons
==============================================
Basic styling for icon component plus helper classes for sizing and colors.
Credit: https://github.com/FortAwesome/Font-Awesome
*/
.icon {
  width: 1.375rem;
  height: 1.375rem;
  display: inline-flex;
  align-self: center;
  font-size: inherit;
  overflow: visible;
  color: #4a545b;
}
.icon > svg {
  width: 100%;
  height: 100%;
  top: 0.25em;
  position: relative;
  fill: currentColor;
}
.icon > svg path, .icon > svg use {
  fill: currentColor;
}
.icon-primary {
  color: var(--text-color-brand-primary);
}
.icon-secondary {
  color: #B4573A;
}
.icon-success {
  color: #2F7D5B;
}
.icon-info {
  color: #55B4E6;
}
.icon-warning {
  color: #974200;
}
.icon-danger {
  color: #B8402F;
}
.icon-light {
  color: #eee;
}
.icon-dark {
  color: #4a545b;
}
.icon-review {
  color: #fedc70;
}
.icon-fluid {
  width: 100%;
  height: 100%;
}
.icon-lg {
  width: 1.8333333333rem;
  height: 1.8333333333rem;
}
.icon-sm {
  width: 1.203125rem;
  height: 1.203125rem;
}
.icon-xs {
  width: 1.03125rem;
  height: 1.03125rem;
}
.icon-1x {
  width: 1.375rem;
  height: 1.375rem;
}
.icon-2x {
  width: 2.75rem;
  height: 2.75rem;
}
.icon-3x {
  width: 4.125rem;
  height: 4.125rem;
}
.icon-4x {
  width: 5.5rem;
  height: 5.5rem;
}
.icon-5x {
  width: 6.875rem;
  height: 6.875rem;
}
.icon-6x {
  width: 8.25rem;
  height: 8.25rem;
}
.icon-7x {
  width: 9.625rem;
  height: 9.625rem;
}
.icon-8x {
  width: 11rem;
  height: 11rem;
}
.icon-9x {
  width: 12.375rem;
  height: 12.375rem;
}
.icon-10x {
  width: 13.75rem;
  height: 13.75rem;
}
.icon-rotate-90 svg {
  filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg);
}
.icon-rotate-180 svg {
  filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg);
}
.icon-rotate-270 svg {
  filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg);
}
.icon-flip-horizontal svg {
  filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1);
}
.icon-flip-vertical svg {
  filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1);
}
.icon-flip-both svg, .icon-flip-horizontal.icon-flip-vertical svg {
  filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(-1, -1);
}
:root .icon-rotate-90 svg, :root .icon-rotate-180 svg, :root .icon-rotate-270 svg, :root .icon-flip-horizontal svg, :root .icon-flip-vertical svg, :root .icon-flip-both svg {
  filter: none;
}
.alert-primary .icon {
  color: #2F5D50;
}
.alert-secondary .icon {
  color: #B4573A;
}
.alert-success .icon {
  color: #2F7D5B;
}
.alert-info .icon {
  color: #55B4E6;
}
.alert-warning .icon {
  color: #974200;
}
.alert-danger .icon {
  color: #B8402F;
}
.alert-light .icon {
  color: #f9f9f9;
}
.alert-dark .icon {
  color: #4a545b;
}
.btn-primary .icon {
  color: #fff;
}
.btn-secondary .icon {
  color: #fff;
}
.btn-success .icon {
  color: #fff;
}
.btn-info .icon {
  color: #000;
}
.btn-warning .icon {
  color: #fff;
}
.btn-danger .icon {
  color: #fff;
}
.btn-light .icon {
  color: #000;
}
.btn-dark .icon {
  color: #fff;
}
.btn .icon {
  pointer-events: none;
}
.btn .icon > svg {
  top: 6px;
}
.pagination .icon {
  width: 13px;
  height: 13px;
}
.pagination .icon > svg {
  top: 2px;
}
.is-left .offcanvas-close svg, .offcanvas-start .offcanvas-close svg {
  top: 0;
}
.is-right .offcanvas-close svg, .offcanvas-end .offcanvas-close svg {
  top: 0.25rem;
}
.navigation-offcanvas-link-icon .icon > svg {
  top: 0;
}
/*
Pagination
==============================================
Custom styling for bootstrap pagination component.

https://getbootstrap.com/docs/5.2/components/pagination
*/
.pagination {
  margin-bottom: 0;
}
.pagination .page-link {
  cursor: pointer;
  margin-bottom: 0;
}
/*
CMS sections
==============================================
General styling for cms sections
*/
.cms-section.bg-image {
  background-repeat: no-repeat;
  background-position: 50%;
}
.cms-section .full-width {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
  --bs-gutter-x: 0;
}
.cms-section .cms-section-sidebar > .row {
  --bs-gutter-x: 60px;
}
@media (max-width: 767.98px) {
  .cms-section-sidebar-mobile-wrap {
    flex-direction: column;
  }
  .cms-section-sidebar-mobile-hidden .cms-section-sidebar-sidebar-content {
    display: none;
  }
}
/*
CMS blocks
==============================================
General styling for cms blocks and
specific styling for elements dependent on their parent block
*/
.cms-block.bg-image {
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%;
}
.cms-block .cms-block-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: none;
}
.cms-block .cms-block-background.media-mode--contain {
  object-fit: contain;
}
.cms-block .cms-block-background.media-mode--cover {
  object-fit: cover;
}
.cms-block .cms-block-container {
  position: relative;
}
.cms-block .cms-block-container .cms-block-container-row {
  flex-direction: row;
}
.cms-block-center-text .cms-element-text {
  padding: 30px;
}
.cms-block-image-three-cover .row {
  margin: 0;
}
.cms-block-image-three-cover [class^="col-"] {
  padding: 0;
}
.cms-block-image-text-bubble .cms-element-image .cms-image-container, .cms-block-image-bubble-row .cms-element-image .cms-image-container {
  height: 300px;
  width: 300px;
  margin: auto;
  border-radius: 50%;
  background-clip: padding-box;
  overflow: hidden;
}
.cms-block-image-highlight-row .cms-element-image {
  border: 12px solid #fff;
}
.cms-block-image-text-bubble .cms-element-text, .cms-block-image-text-row .cms-element-text {
  padding-top: 20px;
}
.cms-block-image-text-gallery .image-text-gallery-card {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.cms-block-image-text-gallery .cms-element-text {
  padding: 20px;
}
.cms-block-text-on-image .cms-element-text {
  padding: 30px;
  align-items: center;
  min-height: 240px;
}
.cms-block-image-text-cover .cms-element-text {
  padding-top: 30px;
}
.cms-block-image-simple-grid .left-top {
  margin-bottom: 40px;
}
.cms-block-image-simple-grid .right {
  height: 100%;
}
@media (min-width: 992px) {
  .cms-block-container .cms-block-container-row.has--sidebar {
    flex-direction: column;
  }
  .cms-block-container .cms-block-container-row.has--sidebar > div {
    flex-basis: auto;
    flex-grow: 1;
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  .cms-block-image-text-gallery .cms-row > :not(:last-child), .cms-block-image-two-column .cms-row > :not(:last-child), .cms-block-image-three-column .cms-row > :not(:last-child), .cms-block-image-four-column .cms-row > :not(:last-child), .cms-block-image-bubble-row .cms-row > :not(:last-child), .cms-block-image-highlight-row .cms-row > :not(:last-child) {
    margin-bottom: 40px;
  }
  .cms-block-image-text .cms-row > :first-child, .cms-block-image-text-cover .cms-row > :first-child {
    margin-bottom: 40px;
  }
  .cms-block-image-simple-grid .left-bottom {
    margin-bottom: 40px;
  }
}
.cms-block-sidebar-filter {
  overflow: visible;
  /*
    The filter's col is set to "initial" because the "boundary" option
    of the filter panel bootstrap dropdown is not working otherwise.
    The "boundary" option sets the dropdown container to "static" to
    be able to "break out" of "overflow: hidden". But this interferes
    with position "relative" on surrounding columns.
    */
}
.cms-block-sidebar-filter .col-12 {
  position: initial;
}
.cms-element-product-name {
  display: inline-block;
}
.cms-element-manufacturer-logo .cms-image-container.is-standard img {
  max-height: 100px;
}
/*
CMS elements
==============================================
General styling for cms elements
*/
.cms-element-image, .cms-element-video {
  position: relative;
  height: 100%;
}
.cms-element-image[tabindex]:focus-visible, .cms-element-video[tabindex]:focus-visible {
  outline: 0;
}
.cms-element-image[tabindex]:focus-visible .cms-video-container, .cms-element-video[tabindex]:focus-visible .cms-video-container {
  box-shadow: 0 0 0 0.25rem #2f5d50;
}
.cms-element-image .cms-image, .cms-element-image .cms-video, .cms-element-video .cms-image, .cms-element-video .cms-video {
  display: block;
  max-width: 100%;
}
.cms-element-image .cms-video:not([controls]), .cms-element-video .cms-video:not([controls]) {
  cursor: pointer;
}
.cms-element-image .cms-image-container, .cms-element-image .cms-video-container, .cms-element-video .cms-image-container, .cms-element-video .cms-video-container {
  display: block;
  max-width: 100%;
  position: relative;
}
.cms-element-image .cms-image-container.is-cover, .cms-element-image .cms-video-container.is-cover, .cms-element-video .cms-image-container.is-cover, .cms-element-video .cms-video-container.is-cover {
  object-fit: contain;
  height: 100%;
}
.cms-element-image .cms-image-container.is-cover .cms-image, .cms-element-image .cms-image-container.is-cover .cms-video, .cms-element-image .cms-video-container.is-cover .cms-image, .cms-element-image .cms-video-container.is-cover .cms-video, .cms-element-video .cms-image-container.is-cover .cms-image, .cms-element-video .cms-image-container.is-cover .cms-video, .cms-element-video .cms-video-container.is-cover .cms-image, .cms-element-video .cms-video-container.is-cover .cms-video {
  object-fit: cover;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.cms-element-image .cms-image-container.is-cover .cms-image, .cms-element-image .cms-image-container.is-cover .cms-video, .cms-element-image .cms-image-container.is-stretch .cms-image, .cms-element-image .cms-image-container.is-stretch .cms-video, .cms-element-image .cms-video-container.is-cover .cms-image, .cms-element-image .cms-video-container.is-cover .cms-video, .cms-element-image .cms-video-container.is-stretch .cms-image, .cms-element-image .cms-video-container.is-stretch .cms-video, .cms-element-video .cms-image-container.is-cover .cms-image, .cms-element-video .cms-image-container.is-cover .cms-video, .cms-element-video .cms-image-container.is-stretch .cms-image, .cms-element-video .cms-image-container.is-stretch .cms-video, .cms-element-video .cms-video-container.is-cover .cms-image, .cms-element-video .cms-video-container.is-cover .cms-video, .cms-element-video .cms-video-container.is-stretch .cms-image, .cms-element-video .cms-video-container.is-stretch .cms-video {
  width: 100%;
}
.cms-element-image .cms-video-play-icon, .cms-element-video .cms-video-play-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: 96px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 220ms ease-out, transform 140ms ease-in;
  will-change: transform, opacity;
}
.cms-element-image .cms-video-play-icon img, .cms-element-video .cms-video-play-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.cms-element-image.is-animating .cms-video-play-icon, .cms-element-video.is-animating .cms-video-play-icon {
  animation: cms-video-start 220ms ease-out;
}
.cms-element-image.is-playing .cms-video-play-icon, .cms-element-video.is-playing .cms-video-play-icon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
}
.cms-element-image.is-paused .cms-video-play-icon, .cms-element-video.is-paused .cms-video-play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: cms-video-stop 300ms linear;
}
.cms-element-image .cms-image-link, .cms-element-video .cms-image-link {
  display: block;
}
.cms-element-image.is-stretch .cms-element-alignment, .cms-element-video.is-stretch .cms-element-alignment {
  width: 100%;
}
.cms-element-image__backdrop, .cms-element-video__backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cms-element-image__backdrop > div, .cms-element-video__backdrop > div {
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem;
}
@keyframes cms-video-start {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.32);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes cms-video-stop {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  40% {
    transform: translate(-50%, -50%) scale(1.32);
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.cms-element-youtube-video {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-element-youtube-video.is--streched {
  height: 100%;
}
.cms-element-youtube-video::before {
  padding-top: calc((9 / 16) * 100%);
}
.cms-element-youtube-video, .cms-element-vimeo-video {
  position: relative;
  width: 100%;
}
.cms-element-youtube-video::before, .cms-element-vimeo-video::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.cms-element-youtube-video__video, .cms-element-youtube-video__placeholder, .cms-element-vimeo-video__video, .cms-element-vimeo-video__placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0 none;
}
.cms-element-youtube-video__placeholder img, .cms-element-vimeo-video__placeholder img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.cms-element-youtube-video__backdrop, .cms-element-vimeo-video__backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cms-element-youtube-video__backdrop > div, .cms-element-vimeo-video__backdrop > div {
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem;
}
.cms-element-youtube-video__container:hover .js-vimeo-link, .cms-element-vimeo-video__container:hover .js-vimeo-link {
  display: block;
}
.cms-element-product-listing-actions {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.cms-element-product-listing-actions .sorting {
  margin-left: auto;
}
.cms-element-buy-box, .cms-element-product-box {
  width: 100%;
}
.cms-element-product-slider .cms-element-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: #2b3136;
}
.cms-element-product-slider.has-vertical-alignment {
  justify-content: center;
}
.cms-element-product-slider.has-vertical-alignment .cms-element-alignment {
  width: 100%;
}
.cms-element-product-slider.has-border .cms-element-title {
  margin-top: 0.5rem;
}
.cms-element-text, .cms-element-image, .cms-element-video, .cms-element-product-box, .cms-element-buy-box, .cms-element-product-slider, .cms-element-product-description-reviews, .cms-element-image-slider, .cms-element-image-gallery {
  word-break: break-word;
}
.cms-element-text.has-vertical-alignment, .cms-element-image.has-vertical-alignment, .cms-element-video.has-vertical-alignment, .cms-element-product-box.has-vertical-alignment, .cms-element-buy-box.has-vertical-alignment, .cms-element-product-slider.has-vertical-alignment, .cms-element-product-description-reviews.has-vertical-alignment, .cms-element-image-slider.has-vertical-alignment, .cms-element-image-gallery.has-vertical-alignment {
  display: flex;
  height: 100%;
}
.cms-element-image-gallery .js-magnifier-zoom-image-container .magnifier-overlay {
  display: none;
}
@media (max-width: 991.98px) {
  .cms-element-product-listing-actions {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .cms-element-product-listing-actions .sorting {
    width: 100%;
    margin-left: 0;
  }
}
div.card-tabs .cms-card-header {
  padding-left: 0;
  padding-right: 0;
}
.cms-element-text {
  position: relative;
  overflow: auto;
}
.cms-element-text img {
  max-width: 100%;
  height: auto;
}
.confirm-message {
  padding: 10% 20%;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
.confirm-message div.alert {
  margin-top: 1em;
}
.confirm-alert {
  padding: 1em 1em 3em;
}
@media (max-width: 767.98px) {
  .confirm-message {
    padding: 10% 0;
  }
}
/*
Form
==============================================
Custom styling for bootstrap forms.

https://getbootstrap.com/docs/5.2/forms/overview
*/
.was-validated .form-control:valid, .form-control.is-valid {
  background-position: right 0.75rem center;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  background-position: right 0.75rem center;
}
.was-validated .custom-control-input:valid ~ .custom-control-label.no-validation {
  color: inherit;
}
.was-validated .custom-control-input:valid ~ .custom-control-label.no-validation::before {
  border-color: inherit;
}
.required-fields {
  margin-bottom: 1rem;
}
.form-text {
  font-size: 1.1875rem;
}
.forms-boolean {
  display: block;
  border: 1px solid #e3ddd3;
  padding: 0 36px;
  margin: 12px 0;
  height: 40px;
  border-radius: 3px;
  cursor: pointer;
}
.forms-boolean.is-active {
  border-color: #2F5D50;
}
.forms-boolean:hover {
  border-color: #2F5D50;
  color: #2F5D50;
}
.forms-boolean-label {
  cursor: pointer;
  height: 38px;
  line-height: 38px;
  width: 100%;
}
.forms-boolean-label::before, .forms-boolean-label::after {
  top: 11px;
}
.address-manager-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.address-manager-modal .btn-icon-hover-white:hover span.icon, .address-manager-modal .btn-icon-hover-white:focus span.icon {
  color: #fff;
}
.address-manager-modal .loader {
  color: #fff;
}
.address-manager-modal .address-manager-modal-header-content {
  width: 100%;
}
.address-manager-modal .modal-body {
  padding-top: 4px;
  height: 550px;
}
.address-manager-modal .modal-footer {
  background-color: #f9f9f9;
}
.address-manager-modal .address-manager-modal-select-address:hover {
  border-color: #2F5D50;
  cursor: pointer;
}
.address-manager-modal .address-manager-modal-select-address {
  height: 210px;
}
.sorting {
  display: inline-block;
  width: 260px;
}
/*
Delivery status
==============================================
Shows the delivery status for products e.g. on detail page.
*/
.delivery-status-indicator {
  border-radius: 100%;
  background-clip: padding-box;
  display: inline-block;
  height: 10px;
  line-height: 10px;
  margin-right: 5px;
  position: relative;
  width: 10px;
}
.quickview-minimal-top, .quickview-minimal-image {
  margin-bottom: 1rem;
}
.quickview-minimal-product-manufacturer-logo {
  width: 100%;
}
@media (min-width: 768px) {
  .quickview-minimal-top {
    margin-bottom: 1.5rem;
  }
}
/*
Payment method
==============================================
Custom styling for payment form used e.g. on account and checkout pages.
*/
.payment-method-image {
  max-height: 24px;
  max-width: 100%;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  float: right;
}
/*
Shipping method
==============================================
Custom styling for shipping form used e.g. on account and checkout pages.
*/
.shipping-method-image {
  max-height: 24px;
  max-width: 100%;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  float: right;
}
/*
Filter panel
==============================================
Styling for filter panel component.
This file contains the generic styling for all filter items.
*/
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom: 8px;
}
.icon.icon-filter-panel-item-toggle {
  margin-left: 8px;
}
.icon.icon-filter-panel-item-toggle > svg {
  top: 2px;
}
.filter-panel-items-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom: 8px;
  width: 100%;
}
.filter-panel-item {
  margin-right: 12px;
  margin-bottom: 12px;
}
.filter-panel-item .filter-panel-item-toggle {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-btn-border-color: #798490;
  --bs-btn-hover-border-color: #798490;
  --bs-btn-active-border-color: #2F5D50;
  --bs-btn-active-color: #2F5D50;
  --bs-btn-font-weight: 400;
}
.filter-panel-item-toggle.show .icon-filter-panel-item-toggle svg {
  color: #2F5D50;
  transform: rotate(180deg);
}
.filter-panel-item-dropdown {
  min-width: 240px;
  max-height: 200px;
  overflow: auto;
  padding: 13px 0;
}
.filter-panel-submit {
  height: 40px;
  margin-bottom: 12px;
  border: 1px solid #2F5D50;
  background-color: #fff;
  color: #4a545b;
}
.filter-active {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-btn-border-color: #798490;
  --bs-btn-hover-border-color: #2F5D50;
  --bs-btn-hover-color: #2F5D50;
  --bs-btn-hover-bg: #f9f9f9;
  --bs-btn-active-border-color: #2F5D50;
  --bs-btn-active-color: #2F5D50;
  --bs-btn-font-weight: 400;
  --bs-btn-border-radius: 50rem;
  --bs-btn-padding-y: 0.125rem;
  --bs-btn-line-height: 1.625rem;
}
.filter-active-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #e3ddd3;
  margin-right: 0.25rem;
  background-position: center center;
  background-size: cover;
  vertical-align: -0.125em;
}
.btn.filter-reset-all {
  --bs-btn-border-radius: 50rem;
  --bs-btn-padding-y: 0.125rem;
  --bs-btn-line-height: 1.625rem;
  --bs-btn-font-weight: 400;
}
.is--sidebar .filter-panel, .is--sidebar .filter-panel-items-container {
  display: block;
}
.is--sidebar .filter-panel-item-dropdown {
  min-width: 100%;
  border: 1px solid #2F5D50;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.is--sidebar .filter-panel-item {
  margin-right: 0;
  width: 100%;
}
.is--sidebar .filter-panel-item-toggle {
  text-align: left;
  display: flex;
}
.is--sidebar .filter-panel-item-toggle[aria-expanded="true"] {
  color: #2F5D50;
  border-color: #2F5D50;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0 none;
}
.is--sidebar .filter-panel-item-toggle[aria-expanded="true"] svg {
  color: #2F5D50;
  transform: rotate(180deg);
}
.is--sidebar .icon-filter-panel-item-toggle {
  margin-left: auto;
}
.is--sidebar .icon-filter-panel-item-toggle > svg {
  top: 0;
}
.is-loading .filter-panel-item-toggle, .is-loading .filter-active, .is-loading .filter-reset-all, .is-loading .filter-boolean, .is-loading .filter-panel-submit {
  pointer-events: none;
  opacity: 0.6;
}
.btn.filter-panel-wrapper-toggle {
  --bs-btn-padding-x: 6px;
  --bs-btn-padding-y: 6px;
  --bs-btn-hover-bg: var(--bs-gray-200);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-gray-200);
  --bs-btn-active-color: var(--bs-primary);
  display: none;
  width: 100%;
}
.btn.filter-panel-wrapper-toggle .icon {
  color: currentColor;
  margin-right: 0.5rem;
  vertical-align: text-bottom;
}
.btn.filter-panel-wrapper-toggle .icon svg {
  top: 0;
}
.filter-panel-offcanvas-header {
  height: 80px;
  align-items: center;
  padding: 25px;
  display: none;
}
.filter-panel-offcanvas-title {
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  color: #2b3136;
}
.filter-panel-offcanvas-close {
  margin-left: auto;
}
@media (max-width: 991.98px) {
  .btn.filter-panel-wrapper-toggle {
    display: block;
  }
  .filter-panel-wrapper {
    display: none;
  }
}
.offcanvas-filter {
  overflow: hidden;
}
.offcanvas-filter .filter-panel {
  height: calc(100% - 80px);
  overflow-y: auto;
  width: 100%;
  padding: 4px 25px 25px;
}
.offcanvas-filter .filter-panel-offcanvas-header {
  display: flex;
}
/*
Filter multi select
==============================================
Styling for multi select filter item.
This filter item should only be used inside a filter panel.
*/
.filter-multi-select .filter-panel-item-toggle.disabled {
  cursor: default;
}
.filter-multi-select-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.filter-multi-select-list-item {
  padding: 5px 15px;
}
.filter-multi-select-list-item.disabled {
  opacity: 0.3;
}
.filter-multi-select-list-item.disabled .filter-multi-select-item-label {
  cursor: default;
}
.filter-multi-select-item {
  width: 100%;
}
.filter-multi-select-item:hover {
  color: var(--bs-primary);
}
.filter-multi-select-item-label {
  cursor: pointer;
  margin-bottom: 0;
  padding: 0 10px;
  width: 100%;
}
.filter-multi-select-count {
  margin-left: 3px;
}
/*
Filter property select
==============================================
Styling for property select filter item.
This filter item should only be used inside a filter panel.
*/
.filter-property-select-list-item {
  display: flex;
  align-items: center;
}
.filter-property-select-preview {
  width: 32px;
  height: 32px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #e3ddd3;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath fill='%23cdd5db' d='M0 0h30v30H0zM30 30h30v30H30zM60 0h30v30H60zM60 60h30v30H60zM0 60h30v30H0z'/%3E%3C/svg%3E");
  background-position: center center;
  background-size: cover;
  position: relative;
  flex-shrink: 0;
}
.filter-property-select-preview-checkmark {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-in-out;
  opacity: 0;
  transform: translateY(-5px);
  background-color: #2F5D50;
  border: 0.125rem solid #fbf9f6;
  top: -0.375rem;
  right: -0.375rem;
}
.filter-property-select-preview-checkmark .icon {
  width: 10px;
  height: 10px;
  color: #fff;
}
.filter-property-select-preview-checkmark .icon svg {
  top: 0;
}
.filter-property-select-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  appearance: none;
  background-color: transparent;
  outline: none;
}
.filter-property-select-checkbox:focus {
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.filter-property-select-checkbox:checked ~ .filter-property-select-preview-checkmark {
  transform: translateY(0);
  opacity: 1;
}
/*
Filter boolean
==============================================
Styling for boolean filter item.
This filter item should only be used inside a filter panel.
*/
.filter-boolean {
  display: inline-block;
  border: 1px solid #e3ddd3;
  padding-left: 12px;
  padding-right: 12px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
}
.filter-boolean.is-active {
  border-color: #2F5D50;
}
.filter-boolean:hover {
  border-color: #2F5D50;
  color: #2F5D50;
}
.filter-boolean.disabled {
  cursor: default;
  background: #eee;
  border-color: #eee;
}
.filter-boolean.disabled .filter-boolean-label {
  color: #bcc1c7;
  cursor: default;
}
.filter-boolean-input {
  margin-top: 11px;
}
.filter-boolean-label {
  cursor: pointer;
  height: 38px;
  line-height: 38px;
  width: 100%;
}
/*
Filter range
==============================================
Styling for range filter item.
This filter item should only be used inside a filter panel.
*/
.filter-range-dropdown {
  padding: 0;
  overflow: hidden;
}
.filter-range-container {
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.filter-range-error {
  padding: 0 16px 16px;
  font-size: 13px;
  color: #B8402F;
}
.filter-range-min, .filter-range-max {
  width: calc(50% - 14px);
  margin-bottom: 0;
  font-size: 11px;
  position: relative;
}
.min-input, .max-input {
  margin-bottom: 0;
  height: 28px;
  padding: 6px 10px;
  appearance: none;
}
.min-input::-webkit-inner-spin-button, .min-input::-webkit-outer-spin-button, .max-input::-webkit-inner-spin-button, .max-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.filter-range-unit {
  position: absolute;
  bottom: 1px;
  right: 1px;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  padding: 0 10px;
  background-color: #fff;
  border-radius: 8px;
}
.filter-range-divider {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-weight: 700;
}
/*
Filter rating select
==============================================
Styling for rating select filter item.
This filter item should only be used inside a filter panel.
*/
.filter-rating-select-radio {
  appearance: none;
  opacity: 0;
}
.filter-rating-select-radio:checked ~ .filter-rating-select-item-checkmark {
  transform: translateY(2px);
  opacity: 1;
}
.filter-rating-select-radio:focus-visible ~ .filter-rating-select-item-label {
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.filter-rating-select-radio:focus-visible ~ .filter-rating-select-item-label .filter-rating-select-item-label-text {
  color: #2F5D50;
}
.filter-rating-select-item-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.filter-rating-select-item-label .product-review-rating {
  margin-right: 8px;
  display: inline-block;
  margin-top: 3px;
}
.filter-rating-select-item-label:hover .icon-review {
  color: #fed03d;
}
.filter-rating-select-item-label:hover .filter-rating-select-item-label-text {
  color: #2F5D50;
}
.filter-rating-select-list-item {
  display: flex;
  position: relative;
  margin-left: 16px;
}
.filter-rating-select-list-item .filter-rating-select-item-label {
  margin-bottom: 5px;
}
.filter-rating-select-list-item:last-child.filter-rating-select-item-label {
  margin-bottom: 0;
}
.filter-rating-select-list-item.disabled {
  opacity: 0.3;
}
.filter-rating-select-list-item.disabled .icon-review {
  color: #bcc1c7;
}
.filter-rating-select-list-item.disabled .filter-rating-select-item-label {
  cursor: default;
}
.filter-rating-select-list-item.disabled:hover .filter-rating-select-item-label-text {
  color: #2b3136;
}
.filter-rating-select-item-checkmark {
  width: 20px;
  height: 20px;
  background-color: #798490;
  position: absolute;
  border: 1px solid #fff;
  border-radius: 50%;
  top: -8px;
  left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-in-out;
  opacity: 0;
  transform: translateY(-7px);
}
.filter-rating-select-item-checkmark .icon {
  width: 10px;
  height: 10px;
  color: #fff;
}
.filter-rating-select-item-checkmark .icon svg {
  top: 0;
}
.filter-multi-select-rating .filter-panel-item-dropdown {
  padding-bottom: 6px;
}
.product-feature-list-list {
  list-style: none;
  padding-left: unset;
}
.product-feature-feature {
  font-size: 1.0625rem;
}
.product-feature-value {
  font-weight: 700;
}
/*
Notification dot
==============================================
Styling for notification dot component.
*/
.notification-dot {
  background-color: #bcc1c7;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.notification-dot.notification-dot-primary {
  background-color: #2F5D50;
}
.notification-dot.notification-dot-secondary {
  background-color: #B4573A;
}
.notification-dot.notification-dot-success {
  background-color: #2F7D5B;
}
.notification-dot.notification-dot-danger {
  background-color: #B8402F;
}
.notification-dot.notification-dot-warning {
  background-color: #974200;
}
.notification-dot.notification-dot-info {
  background-color: #55B4E6;
}
.notification-dot.notification-dot-light {
  background-color: #f9f9f9;
}
.notification-dot.notification-dot-dark {
  background-color: #4a545b;
}
/*
Product box for wishlist
==============================================
Styling for productbox component.
*/
.product-box.box-wishlist .stretched-link::after {
  height: calc(200px + var(--bs-card-spacer-y));
}
.product-wishlist {
  margin-top: 10px;
}
.product-wishlist .icon-wishlist svg {
  top: 0;
}
.product-wishlist-not-added .icon-wishlist-added, .product-wishlist-not-added .text-wishlist-remove {
  display: none;
}
.product-wishlist-not-added .icon-wishlist-not-added, .product-wishlist-not-added .text-wishlist-not-added {
  display: inline-flex;
}
.product-wishlist-not-added .icon-wishlist-not-added {
  animation: pulse 0.5s alternate;
}
.product-wishlist-added .icon-wishlist-added, .product-wishlist-added .text-wishlist-remove {
  display: inline-flex;
}
.product-wishlist-added .icon-wishlist-added {
  animation: pulse 0.5s alternate;
}
.product-wishlist-added .icon-wishlist-not-added, .product-wishlist-added .text-wishlist-not-added {
  display: none;
}
.product-wishlist-action-circle {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.product-wishlist-action-circle.btn {
  text-overflow: initial;
}
.product-wishlist-action-circle::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
}
.product-wishlist-action {
  background: transparent;
  border-style: none;
  padding: 0;
  display: inline-flex;
}
.product-wishlist-btn {
  --bs-btn-border-radius: 50%;
  --bs-btn-border-width: 0;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-color: var(--bs-gray-800);
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  height: 40px;
  width: 40px;
}
.product-wishlist-btn-remove {
  z-index: 10;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
}
.product-wishlist .icon-wishlist svg, .product-wishlist .icon-wishlist-remove svg {
  top: 0;
}
.product-wishlist-btn-content {
  text-decoration: underline;
}
.product-wishlist-btn-content-md {
  margin-left: 8px;
  font-size: 14px;
}
.product-wishlist-btn-content-sm {
  margin-left: 6px;
  font-size: 12px;
}
.product-wishlist-btn-content-disabled {
  display: none;
}
.product-wishlist-btn-content-active {
  display: inline-flex;
}
.product-wishlist-info {
  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
}
.product-wishlist-info-item {
  min-height: 2em;
  font-size: 1.0625rem;
}
.product-wishlist-info-text {
  font-weight: 700;
}
.product-wishlist-info-manufacturer {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-wishlist-info .product-variant-characteristics-text {
  text-transform: capitalize;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.quantity-selector-group .quantity-selector-group-input {
  -moz-appearance: textfield;
  text-align: center;
  border-left: 0;
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
  line-height: 1rem;
}
.quantity-selector-group .quantity-selector-group-input:disabled {
  color: #798490;
}
.quantity-selector-group .quantity-selector-group-input::-webkit-outer-spin-button, .quantity-selector-group .quantity-selector-group-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-selector-group .btn-outline-light {
  --bs-btn-disabled-bg: #eee;
  --bs-btn-disabled-border-color: #e3ddd3;
  --bs-btn-border-color: #e3ddd3;
  --bs-btn-active-border-color: #e3ddd3;
  --bs-btn-hover-border-color: #e3ddd3;
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.quantity-selector-group .btn-outline-light.btn-plus {
  border-left: 0;
}
.quantity-selector-group .btn-outline-light.btn-minus {
  border-right: 0;
}
.quantity-selector-group .btn-outline-light:disabled .icon {
  color: #bcc1c7;
}
.quantity-selector-group .btn-outline-light svg {
  top: 4px;
}
.quantity-selector-group .input-group-text {
  line-height: 1rem;
}
.basic-captcha-content-image {
  width: 85%;
}
.basic-captcha-content-image img {
  border: 1px solid #e3ddd3;
  border-radius: 8px;
  width: 100%;
}
.basic-captcha-content-code {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.25em;
  max-width: 440px;
}
.basic-captcha-content-refresh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  height: 42px;
  align-self: flex-end;
  border-color: #e3ddd3;
}
.basic-captcha-content-refresh-icon.btn .icon > svg {
  top: 0;
}
.basic-captcha-content-refresh-icon:hover {
  cursor: pointer;
  border-color: #2F5D50;
  background-color: #fff;
}
.basic-captcha-content-refresh-icon:hover .icon.icon-arrow-switch {
  color: #2F5D50;
}
.line-item {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #e3ddd3;
}
.line-item.is-discount .line-item-total-price {
  color: #2F7D5B;
}
.line-item:last-child {
  border-bottom: 0;
}
.line-item-info {
  order: 1;
  margin-bottom: 1rem;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 83.33333333%;
}
@media (min-width: 768px) {
  .line-item-info {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
}
.line-item-details {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px) {
  .line-item-details {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
}
@media (min-width: 768px) {
  .line-item-details {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}
.line-item-quantity {
  order: 3;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px) {
  .line-item-quantity {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
@media (min-width: 768px) {
  .line-item-quantity {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
}
.line-item-quantity-label {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 50%;
}
@media (min-width: 576px) {
  .line-item-quantity-label {
    flex: 0 0 auto;
    width: 100%;
  }
}
.line-item-quantity-select-wrapper {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 50%;
}
@media (min-width: 576px) {
  .line-item-quantity-select-wrapper {
    flex: 0 0 auto;
    width: 100%;
  }
}
.line-item-unit-price {
  display: none;
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px) {
  .line-item-unit-price {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
@media (min-width: 768px) {
  .line-item-unit-price {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
}
.line-item-tax-price {
  justify-content: flex-end;
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px) {
  .line-item-tax-price {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
@media (min-width: 768px) {
  .line-item-tax-price {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
}
.line-item-total-price {
  order: 4;
  font-weight: 700;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px) {
  .line-item-total-price {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
@media (min-width: 768px) {
  .line-item-total-price {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
}
.line-item-remove {
  order: 2;
  text-align: right;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 16.66666667%;
}
@media (min-width: 768px) {
  .line-item-remove {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
}
.is-offcanvas .line-item-info {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.is-offcanvas .line-item-details {
  flex: 0 0 auto;
  width: 100%;
}
.is-offcanvas .line-item-quantity {
  flex: 0 0 auto;
  width: 100%;
}
.is-offcanvas .line-item-quantity-label {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.is-offcanvas .line-item-quantity-select-wrapper {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.is-offcanvas .line-item-unit-price {
  flex: 0 0 auto;
  width: 100%;
  display: none;
  font-size: 1.0625rem;
  font-style: italic;
}
.is-offcanvas .line-item-unit-price.is-shown {
  display: flex;
  justify-content: flex-end;
}
.is-offcanvas .line-item-tax-price {
  flex: 0 0 auto;
  width: 100%;
}
.is-offcanvas .line-item-total-price {
  flex: 0 0 auto;
  width: 100%;
}
.is-offcanvas .line-item-remove {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.is-offcanvas .line-item-details-container {
  padding-left: 0;
}
.is-offcanvas .line-item-unit-price-value-descriptor {
  display: inline;
}
.is-offcanvas .line-item-unit-price-label, .is-offcanvas .line-item-tax-price-label, .is-offcanvas .line-item-total-price-label {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.is-offcanvas .line-item-unit-price-label:not(caption), .is-offcanvas .line-item-tax-price-label:not(caption), .is-offcanvas .line-item-total-price-label:not(caption) {
  position: absolute !important;
}
.is-offcanvas .line-item-unit-price-label *, .is-offcanvas .line-item-tax-price-label *, .is-offcanvas .line-item-total-price-label * {
  overflow: hidden !important;
}
@media (min-width: 768px) {
  .no-remove-button .line-item-info {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .no-remove-button .line-item-details {
    flex: 0 0 auto;
    width: 75%;
  }
}
@media (min-width: 768px) {
  .no-summary .line-item-info {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
}
@media (min-width: 768px) {
  .no-summary .line-item-details {
    flex: 0 0 auto;
    width: 75%;
  }
}
@media (min-width: 768px) {
  .no-summary.no-remove-button .line-item-info {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}
@media (min-width: 768px) {
  .no-summary.no-remove-button .line-item-details {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}
.line-item.is-order {
  margin-left: 20px;
  margin-right: 20px;
}
.line-item.is-order .line-item-children .line-item {
  margin-left: 0;
  margin-right: 0;
}
.line-item-info, .line-item-details, .line-item-quantity, .line-item-unit-price, .line-item-total-price, .line-item-tax-price, .line-item-remove {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
.line-item-discount-icon, .line-item-icon {
  text-align: center;
  height: 100%;
}
.line-item-discount-icon .icon, .line-item-icon .icon {
  height: 100%;
}
.line-item-discount-icon .icon > svg, .line-item-icon .icon > svg {
  top: 0;
}
.line-item-discount .line-item-icon .icon, .line-item-promotion .line-item-icon .icon {
  color: #2F7D5B;
}
.line-item-container .line-item-icon .icon {
  color: #B4573A;
}
.line-item-nested-icon {
  background-color: #798490;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  display: flex;
  margin: 0 auto;
  width: 65px;
  height: 65px;
}
.line-item-nested-icon .icon > svg {
  top: 0;
}
.line-item-unit-price, .line-item-tax-price {
  order: 5;
}
.line-item-img-container {
  text-align: center;
  width: 70px;
  margin-bottom: 0.5rem;
}
.line-item-img-link {
  display: block;
}
.line-item-img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  padding: 0.25rem;
  border: 1px solid #e3ddd3;
  border-radius: 8px;
}
.line-item-total-price, .line-item-tax-price {
  justify-content: space-between;
  display: flex;
}
@media (max-width: 575.98px) {
  .line-item-tax-price, .line-item-unit-price {
    font-size: 1.0625rem;
    font-style: italic;
  }
}
@media (min-width: 576px) {
  .line-item-unit-price {
    display: flex;
    justify-content: flex-end;
  }
}
.line-item-unit-price.is-shown {
  display: flex;
  justify-content: flex-end;
}
.line-item-quantity-label, .line-item-unit-price-label, .line-item-total-price-label, .line-item-tax-price-label {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.line-item-quantity-row {
  align-items: center;
  margin-bottom: 0.5rem;
}
.line-item-details-characteristics {
  font-size: 1.0625rem;
  margin: 0.5rem 0;
}
.line-item-details-characteristics .line-item-details-characteristics-option {
  font-weight: 700;
}
.line-item-variants {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}
.line-item-variants-properties {
  display: flex;
}
.line-item-variants-properties-name {
  font-weight: 700;
  margin-right: 0.5rem;
}
@media (min-width: 576px) {
  .is-default .line-item-quantity-container, .is-order .line-item-quantity-container {
    margin-left: auto;
  }
  .is-default .line-item-quantity-row, .is-order .line-item-quantity-row {
    align-items: normal;
    margin-bottom: 0;
  }
  .is-default .line-item-quantity, .is-order .line-item-quantity {
    flex-direction: column;
    display: flex;
  }
  .is-default .line-item-unit-price, .is-default .line-item-total-price, .is-default .line-item-tax-price, .is-order .line-item-unit-price, .is-order .line-item-total-price, .is-order .line-item-tax-price {
    text-align: right;
    justify-content: normal;
    flex-direction: column;
  }
  .is-default .line-item-tax-price, .is-order .line-item-tax-price {
    order: 4;
  }
  .is-default .line-item-total-price, .is-order .line-item-total-price {
    order: 5;
  }
}
@media (min-width: 768px) {
  .is-default .line-item-info, .is-default .line-item-quantity, .is-default .line-item-unit-price, .is-default .line-item-total-price, .is-default .line-item-tax-price, .is-default .line-item-remove, .is-order .line-item-info, .is-order .line-item-quantity, .is-order .line-item-unit-price, .is-order .line-item-total-price, .is-order .line-item-tax-price, .is-order .line-item-remove {
    order: 0;
  }
  .is-default .line-item-info, .is-order .line-item-info {
    margin-bottom: 0;
  }
  .is-default .line-item-quantity-label, .is-order .line-item-quantity-label {
    display: none;
  }
}
.line-item-children {
  background-color: #f9f9f9;
  font-size: 1.0625rem;
  width: 100%;
  padding: 10px 20px;
  order: 10;
  margin-top: 10px;
  flex-shrink: initial;
}
.line-item-children .line-item-children-elements {
  padding: 12px 0 0;
}
.line-item-children .line-item-headline {
  padding: 0;
  font-weight: 600;
}
.line-item-children .line-item-change-button {
  width: fit-content;
  margin: 0 12px;
  font-size: 12px;
  text-decoration: underline;
  background-color: transparent;
  border-style: none;
}
.line-item-children .line-item-change-button:focus {
  outline: none;
}
.line-item-children .line-item-collapse {
  margin: 0;
  align-items: center;
}
.line-item-children .line-item-collapse-container, .line-item-children .line-item-child-label {
  padding: 0;
}
.line-item-children .line-item-child-label {
  position: relative;
}
.line-item-children .line-item-collapse-icon-container {
  padding: 0;
  text-align: right;
}
.line-item-children .line-item-collapse-button, .line-item-children .line-item-child-remove-icon {
  background-color: transparent;
  border-style: none;
}
.line-item-children .line-item-collapse-button:focus, .line-item-children .line-item-child-remove-icon:focus {
  outline: none;
}
.line-item-children .line-item-collapse-button > .line-item-collapse-icon {
  transform: rotate(180deg);
  transition: all 0.2s ease-out;
}
.line-item-children .line-item-collapse-button.collapsed > .line-item-collapse-icon {
  transform: rotate(0deg);
}
.line-item-children .line-item-children-element {
  margin: 0;
  padding: 8px 4px 0;
}
.line-item-children .line-item-children-element > .nesting-level-0 {
  list-style: none;
}
.line-item-children .line-item-children-element:last-child, .line-item-children .line-item-children-element-divider:last-child {
  border-style: none;
}
.line-item-children .line-item-child-label-bullet {
  display: list-item;
}
.line-item-children .line-item-child-total-price {
  padding: 0;
  text-align: right;
  font-weight: 600;
}
.line-item-children .line-item-child-remove-icon-container {
  padding: 0;
  text-align: right;
}
.line-item-children .line-item-children-element-divider {
  border-top: 1px solid #798490;
  margin: 1rem 0;
}
.line-item-children.nesting-level-2 {
  background-color: #f0f0f0;
}
.line-item-children.nesting-level-3 {
  background-color: #ebebeb;
}
.line-item-children .line-item-details-container {
  padding-left: 0;
}
.line-item-children .line-item-headline-text {
  font-weight: normal;
}
@media (min-width: 768px) {
  .line-item-children.nesting-level-1 {
    margin-left: 96px;
  }
}
@media (min-width: 992px) {
  .line-item-children.nesting-level-1 {
    margin-left: 4px;
  }
}
@media (min-width: 1200px) {
  .line-item-children.nesting-level-1 {
    margin-left: 96px;
  }
}
.is-offcanvas .line-item-children {
  margin-left: 0;
  padding-left: 12px;
  padding-right: 12px;
}
.line-item-product-number {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
}
.line-item-delivery-date {
  font-size: 1.0625rem;
}
.line-item-label {
  color: #23201c;
  font-weight: 700;
}
a.line-item-label:hover {
  color: #2F5D50;
}
.line-item-tax-price-label {
  display: inline;
  font-weight: normal;
  margin-right: 5px;
}
@media (max-width: 575.98px) {
  .line-item-unit-price-label, .line-item-total-price-label {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .line-item-unit-price-label:not(caption), .line-item-total-price-label:not(caption) {
    position: absolute !important;
  }
  .line-item-unit-price-label *, .line-item-total-price-label * {
    overflow: hidden !important;
  }
}
@media (min-width: 768px) {
  .line-item-unit-price-label, .line-item-tax-price-label, .line-item-total-price-label {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .line-item-unit-price-label:not(caption), .line-item-tax-price-label:not(caption), .line-item-total-price-label:not(caption) {
    position: absolute !important;
  }
  .line-item-unit-price-label *, .line-item-tax-price-label *, .line-item-total-price-label * {
    overflow: hidden !important;
  }
}
@media (min-width: 576px) {
  .line-item-unit-price-value-descriptor {
    display: none;
  }
  .line-item-tax-price-label {
    display: block;
    font-weight: bold;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .line-item-details-container {
    padding-left: 0.25rem;
  }
}
.line-item-characteristics {
  margin: 0.5rem 0;
  font-size: 1.0625rem;
}
.line-item-characteristics .line-item-characteristics-option {
  font-weight: 700;
}
.line-item-remove-button .icon {
  color: inherit;
}
@media (max-width: 767.98px) {
  .hidden-mobile {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hidden-tablet {
    display: none;
  }
}
@media (min-width: 992px) {
  .hidden-desktop {
    display: none;
  }
}
.spatial-ar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(1, 0, 0, 0.5);
  display: none;
  z-index: 1100;
}
.spatial-ar-overlay .spatial-ar-exit-button {
  position: absolute;
  top: 25px;
  right: 20px;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
  z-index: 1101;
  background-color: #000;
  border: 1px solid #fff;
}
.spatial-ar-overlay .spatial-ar-exit-button svg {
  color: #fff;
}
.spatial-ar-overlay .spatial-ar-placement-hint {
  display: none;
  background-color: black;
}
.spatial-ar-overlay .spatial-ar-movement-hint {
  display: none;
  background-color: rgba(0, 0, 0, 0.45);
}
.spatial-ar-overlay .spatial-ar-movement-hint svg {
  color: #fff;
}
.spatial-ar-overlay .spatial-ar-movement-hint .ar-anim-container {
  position: relative;
  margin-bottom: 90px;
  margin-left: -200px;
}
.spatial-ar-overlay .spatial-ar-movement-hint .ar-anim-container .icon-ar-icon-surface {
  position: absolute;
  width: 200px;
  height: auto;
}
.spatial-ar-overlay .spatial-ar-movement-hint .ar-anim-container .icon-ar-icon-phone {
  position: absolute;
  bottom: -75px;
  left: 2px;
  width: 30px;
  height: auto;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: move-around;
}
@keyframes move-around {
  0% {
    bottom: -75px;
    left: 2px;
  }
  25% {
    bottom: -100px;
    left: 80px;
  }
  50% {
    bottom: -75px;
    left: 165px;
  }
  75% {
    bottom: -100px;
    left: 80px;
  }
  100% {
    bottom: -75px;
    left: 2px;
  }
}
.spatial-ar-overlay .progress {
  bottom: 80px;
  height: 4px;
}
.spatial-ar-overlay.is--visible {
  display: block;
}
.spatial-ar-overlay.is--session-running .spatial-ar-exit-button {
  display: block;
}
.spatial-ar-overlay.is--session-running:not(.is--tracking):not(.is--placement-hint):not(.is--loading) .spatial-ar-movement-hint {
  display: block;
}
.spatial-ar-overlay.is--placement-hint .spatial-ar-placement-hint, .spatial-ar-overlay.is--loading .spatial-ar-placement-hint {
  display: block;
}
.ar-qr-modal-open-session .ar-splash-screen {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.ar-qr-modal-open-session .ar-splash-screen .cube-splash-icon {
  max-width: 200px;
  left: 0px;
  right: 0px;
}
.ar-qr-modal-open-session .ar-splash-screen .floor-splash-icon {
  max-width: 400px;
  left: 0px;
  right: 0px;
  margin-top: 33%;
}
.ar-qr-modal-open-session .ar-splash-screen .ar-btn-open-session {
  max-width: 170px;
  left: 0px;
  right: 0px;
  margin-top: 75%;
}
.ar-qr-modal-open-session .icon-cube-3d-shade {
  color: transparent;
}
.ar-qr-modal-open-session .ar-btn-icon-with-label {
  vertical-align: middle;
}
.ar-qr-modal-open-session .ar-btn-icon-with-label span {
  vertical-align: middle;
}
.ar-qr-modal-open-session .ar-btn-icon-with-label svg {
  vertical-align: middle;
  top: 0px;
}
.ar-qr-modal .ar-qr-modal-content {
  width: 30.25rem;
}
.ar-qr-modal .ar-qr-modal-content .ar-qr-modal-header {
  height: 5rem;
  padding: 0 2rem 0 4rem;
}
.ar-qr-modal .ar-qr-modal-content .ar-qr-modal-body {
  padding: 1.5rem 2rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  font-weight: 600;
  font-size: 0.875rem;
}
.ar-qr-modal .ar-qr-modal-content .ar-qr-modal-body .ar-qr-modal-body-qr-code {
  max-width: 300px;
  max-height: 300px;
}
.ar-qr-modal .ar-qr-modal-content .ar-qr-modal-footer {
  padding: 0 2rem 2rem 2rem;
  justify-content: center;
  font-weight: 400;
  font-size: 0.75rem;
}
.ar-qr-modal .ar-qr-modal-content .ar-qr-modal-footer .ar-qr-modal-footer-headline {
  font-weight: 600;
}
/*
 * Layout-related sections
 * ----------------------- */
/*
Container
==============================================
Additional styling for bootstrap container layout.

https://getbootstrap.com/docs/5.2/layout/containers
*/
.container-main {
  padding: 20px 0;
  min-height: 200px;
}
@media (min-width: 1200px) {
  .container-main {
    min-height: 700px;
  }
}
/*
Header
==================================================
Contains custom styles for the header at the top of the page.
The header contains the shop logo, the search form and various actions like the offcanvas cart button.
*/
.header-row {
  padding: 0.5rem 0;
}
.header-logo-picture {
  max-width: 300px;
  min-width: 200px;
}
.header-logo-main-link {
  display: inline-block;
}
.header-search-form {
  position: relative;
}
.header-search-form .header-close-btn {
  display: none;
}
.header-search-form:has(.search-suggest) .header-search-btn {
  display: none;
}
.header-search-form:has(.search-suggest) .header-close-btn {
  display: block;
}
.header-search-btn.is-loading-indicator-before .loader {
  margin: 0;
}
.header-search-btn .loader ~ .header-search-icon, .header-search-btn .loader ~ .header-close-btn {
  display: none;
}
.header-cart .header-cart-badge, .header-wishlist .header-wishlist-badge {
  position: absolute;
  right: -0.25rem;
  top: 0;
}
.header-actions-btn {
  position: relative;
}
@media (min-width: 576px) {
  .header-row {
    padding-bottom: 1rem;
  }
  .header-search-col .collapse:not(.show) {
    display: block;
  }
  .header-search {
    max-width: 400px;
  }
}
.storefront-staging-info .icon {
  color: #fff;
}
.storefront-staging-info .icon svg {
  top: 0;
}
/*
Header minimal
==================================================
Contains custom styles for the minimal header which is used on checkout pages.
*/
.header-minimal {
  background: #fff;
}
.header-minimal.fixed-top {
  position: static;
}
.header-minimal-row {
  justify-content: space-between;
  align-items: center;
}
.header-minimal-contact {
  display: none;
}
.header-minimal-back-to-shop {
  display: flex;
  justify-content: flex-end;
}
.header-minimal-logo {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}
.header-minimal-logo .header-logo-picture {
  min-width: unset;
}
.header-minimal-home {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header-minimal-home-btn {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .header-minimal-contact {
    display: block;
  }
  .header-minimal-logo, .header-minimal-switch {
    margin-bottom: 0;
  }
}
/*
Footer
==================================================
Contains custom styles for the footer located at the bottom of the page.
*/
.footer-column-content-inner {
  padding-bottom: 1rem;
}
.footer-column-headline {
  padding: 0.5rem 0;
  display: flex;
  justify-content: space-between;
}
.footer-column-headline .icon-footer-minus {
  display: none;
}
.footer-column-headline .icon-footer-plus > svg, .footer-column-headline .icon-footer-minus > svg {
  top: 0.25em;
}
.footer-column-headline .footer-column-toggle[aria-expanded="true"] .icon-footer-plus {
  display: none;
}
.footer-column-headline .footer-column-toggle[aria-expanded="true"] .icon-footer-minus {
  display: inline-flex;
}
.footer-column-toggle {
  padding: 0;
  --bs-btn-line-height: 1.375;
}
.footer-link-item {
  padding: 0.5rem 0;
}
.footer-bottom {
  padding: 1rem;
}
.footer-bottom > .container, .cms-section .footer-bottom > .boxed {
  padding: 0;
}
.footer-vat, .footer-copyright, .footer-service-menu-list {
  text-align: center;
}
.footer-copyright .icon {
  vertical-align: middle;
}
.footer-copyright .icon > svg {
  top: -2px;
}
.footer-service-menu-list {
  padding: 1rem 0;
}
.footer-service-menu-list:empty {
  padding: 0;
  margin: 0;
}
.footer-service-menu-item {
  display: inline-block;
}
.footer-service-menu-link {
  padding: 5px 0;
  display: inline-block;
}
.footer-logos {
  padding: 1rem;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}
.footer-logo {
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}
.footer-logo:last-child {
  margin-right: 0;
}
.footer-logo-image {
  max-height: 35px;
  max-width: 100px;
}
@media (min-width: 768px) {
  .footer-columns {
    padding-bottom: 20px;
  }
  .footer-column-headline {
    padding: 3rem 0 0.5rem 0;
  }
  .footer-column-toggle {
    display: none;
  }
  .footer-column-content.collapse {
    display: block;
  }
}
/*
Navigation offcanvas
==============================================
Custom styling for navigation offcanvas which replaces main navigation on smaller screens.
Based on custom offcanvas component.
*/
.navigation-offcanvas {
  --bs-offcanvas-padding-x: 0;
  --bs-offcanvas-padding-y: 0;
  overflow-x: hidden;
}
.navigation-offcanvas-container {
  position: relative;
}
.navigation-offcanvas-overlay.has-transition {
  transition: left 0.5s ease-in;
}
.navigation-offcanvas-placeholder, .navigation-offcanvas-overlay {
  width: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.navigation-offcanvas-actions {
  padding-top: 1rem;
  margin-bottom: 0.5rem;
}
.navigation-offcanvas-actions .top-bar-nav-item {
  padding: 0 1rem;
}
.navigation-offcanvas-actions .top-bar-nav-name {
  display: inline;
}
.navigation-offcanvas-headline {
  padding: 20px 1rem 1rem;
}
.navigation-offcanvas-link-icon {
  display: inline-flex;
}
.navigation-offcanvas-link-icon .loader {
  width: 1.203125rem;
  height: 1.203125rem;
}
.navigation-offcanvas-link {
  transition: color 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 12px 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .navigation-offcanvas-link {
    transition: none;
  }
}
.navigation-offcanvas-link.is-home-link, .navigation-offcanvas-link.is-back-link {
  justify-content: flex-start;
}
.navigation-offcanvas-link.is-home-link .navigation-offcanvas-link-icon, .navigation-offcanvas-link.is-back-link .navigation-offcanvas-link-icon {
  margin-right: 0.5rem;
}
/*
Offcanvas cart
==============================================
Extends the basic offcanvas component with additional cart styles.
*/
.offcanvas-cart .alert {
  margin-top: 1rem;
}
.offcanvas-cart-items, .offcanvas-summary {
  margin: 1rem 0;
}
.offcanvas-cart-items {
  border-bottom: 1px solid #e3ddd3;
}
.offcanvas-summary-list {
  margin-bottom: 0;
  justify-content: space-between;
}
.offcanvas-summary-list > * {
  width: initial;
}
.offcanvas-shipping-info {
  justify-content: space-between;
}
.offcanvas-shipping-info > * {
  width: initial;
}
.offcanvas-cart-promotion-form {
  margin-bottom: 1rem;
}
.offcanvas-cart-promotion-form .offcanvas-cart-promotion-button .icon-checkmark {
  color: inherit;
}
.offcanvas-summary .js-toggle-shipping-selection {
  --bs-btn-font-weight: var(--bs-body-font-weight);
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 0;
  --bs-btn-font-size: 90%;
  --bs-btn-color: var($primary);
  --bs-btn-line-height: inherit;
}
.offcanvas-summary .offcanvas-shipping-preference {
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
  max-height: 100px;
  height: auto;
  visibility: visible;
  opacity: 1;
}
.offcanvas-summary .offcanvas-shipping-preference--hidden {
  max-height: 0;
  visibility: hidden;
  opacity: 0;
  margin: 0 !important;
}
.offcanvas-summary .summary-value, .offcanvas-summary .shipping-value {
  text-align: right;
}
/*
Account menu
==================================================
Contains custom styles for the account menu which opens via click/touch on the avatar icon in the header section.
The menu opens on smaller viewports inside an offcanvas and on larger viewports inside a bootstrap dropdown.
*/
.account-menu-header {
  border-bottom: 1px solid #e3ddd3;
  font-size: 1.1875rem;
  font-weight: 700;
  padding: 0.5rem 0;
  color: #2b3136;
}
.account-menu-register {
  text-align: center;
}
.account-menu-login {
  padding: 1rem 0;
  border-bottom: 1px solid #e3ddd3;
  margin-bottom: 0.25rem;
}
.account-menu-login-button {
  width: 100%;
  margin-bottom: 0.5rem;
}
.account-menu-dropdown {
  padding: 0.5rem 1rem;
  min-width: 200px;
}
.account-menu-dropdown .offcanvas-body {
  overflow: visible;
}
.account-menu-offcanvas .account-menu-inner, .account-menu-dropdown .account-menu-inner {
  border: 0;
}
.account-menu-offcanvas .account-aside-item, .account-menu-dropdown .account-aside-item {
  padding: 0.5rem 0;
}
.account-menu-offcanvas .account-aside-footer, .account-menu-dropdown .account-aside-footer {
  background: none;
  padding: 0.25rem 0;
}
@media (min-width: 576px) {
  .account-menu .offcanvas-close {
    display: none;
  }
  .account-menu .offcanvas-body {
    padding: 0;
  }
}
/*
Search suggest
==================================================
Contains styles for the search suggest popover in the shop header.
*/
.search-suggest-container {
  position: absolute;
  top: 55px;
  left: 0;
  list-style: none;
  touch-action: manipulation;
  background: #fff;
  padding: 1rem;
  border: 1px solid #e3ddd3;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 10px 25px -15px #000;
}
.search-suggest-container::after {
  transform: rotate(135deg);
  width: 12px;
  height: 12px;
  top: -7px;
  content: "";
  display: block;
  position: absolute;
  background: #fff;
  left: 48%;
  border: 1px solid #e3ddd3;
  border-top: 0 none;
  border-right: 0 none;
}
.search-suggest-product {
  border-bottom: 1px solid #e3ddd3;
}
.search-suggest-product:last-child {
  border-bottom: 0;
}
.search-suggest-product-link:hover, .search-suggest-total-link:hover {
  text-decoration: none;
}
.search-suggest-product-link:focus, .search-suggest-product-link:focus-visible, .search-suggest-total-link:focus, .search-suggest-total-link:focus-visible {
  color: #2F5D50;
  box-shadow: inset 0 0 0 0.125rem #2f5d50, inset 0 0 0 0.25rem #fbf9f6;
  outline: none;
}
.search-suggest-product-link {
  display: block;
  padding: 0.5rem 0;
  color: #23201c;
  text-decoration: none;
}
.search-suggest-product-link:hover {
  color: #2F5D50;
}
.search-suggest-product-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest-product-variation {
  font-size: 1.0625rem;
  color: #798490;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest-product-price {
  text-align: right;
  padding-right: 0.25rem;
}
.search-suggest-product-list-price, .search-suggest-product-reference-price {
  color: #798490;
  text-align: right;
  display: block;
}
.search-suggest-product-image-container {
  width: 35px;
  height: 35px;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-suggest-product-image {
  max-width: 35px;
  max-height: 35px;
  display: block;
}
.search-suggest-total {
  padding: 0.5rem;
}
.search-suggest-no-result {
  text-align: center;
}
@media (min-width: 768px) {
  .search-suggest-container {
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
  }
}
/*
Cookie permission
==============================================
Shows a cookie permission alert at the bottom of the page.

@sw-package framework
*/
.cookie-permission-container {
  display: none;
  border-top: 1px solid #e3ddd3;
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  padding: 0.5rem;
  font-size: 1.0625rem;
  z-index: 1100;
}
.cookie-permission-content {
  margin-bottom: 0.5rem;
}
.cookie-permission-content a {
  display: inline-block;
}
.cookie-permission-actions {
  gap: 0.5rem;
}
@media (max-width: 575.98px) {
  .cookie-permission-actions .btn {
    white-space: normal;
    line-height: normal;
    padding: var(--bs-btn-padding-x) calc(var(--bs-btn-padding-y) * 5);
  }
}
@media (min-width: 768px) {
  .cookie-permission-content {
    text-align: left;
    margin-bottom: 0;
  }
}
/*
Cookie configuration
==============================================
Offcanvas containing a list of cookies which need to be manually selected by the user.

@sw-package framework
*/
.offcanvas-cookie-description, .offcanvas-cookie-list {
  margin-bottom: 32px;
  border-bottom: 1px solid #e3ddd3;
}
.offcanvas-cookie-list {
  padding-bottom: 32px;
}
.offcanvas-cookie-group {
  position: relative;
  margin: 12px 0;
}
.offcanvas-cookie-group input ~ label {
  user-select: none;
}
.offcanvas-cookie-group input:not([disabled]) ~ label {
  cursor: pointer;
}
@supports (-webkit-hyphens: none) {
  .offcanvas-cookie-group .form-check .form-check-input {
    float: none;
    display: inline-block;
  }
}
@media (max-width: 575.98px) {
  .offcanvas-cookie-group .form-check {
    padding-right: 2rem;
  }
  .offcanvas-cookie-group input ~ label {
    display: block;
    overflow-wrap: anywhere;
  }
}
.offcanvas-cookie-entries-toggle {
  position: absolute;
  top: -4px;
  right: 0;
}
.offcanvas-cookie-entries-toggle svg {
  transform-origin: center center;
  transition: transform 0.3s ease;
}
.offcanvas-cookie-entries-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}
.offcanvas-cookie-entries > p {
  padding: 8px 8px 0;
  margin: 0;
}
.offcanvas-cookie-entries .offcanvas-cookie-entry {
  padding: 8px 8px 0 24px;
  margin: 0 0 0 24px;
  overflow: visible;
}
.offcanvas-cookie-entries .offcanvas-cookie-entry > p {
  margin: 8px 0;
}
.offcanvas-cookie-entries .offcanvas-cookie-entry.custom-control, .offcanvas-cookie-entries .offcanvas-cookie-entry.form-check {
  min-height: unset;
}
/*
Scroll up
==============================================
Shows a scroll up button at the bottom right of the page.
*/
.scroll-up-button {
  bottom: 1.5rem;
  cursor: pointer;
  opacity: 0.1;
  position: fixed;
  right: 1.5rem;
  transform: scale(0);
  transition: 0.3s cubic-bezier(0.3, 0, 0.15, 1);
  z-index: 700;
  pointer-events: none;
}
.scroll-up-button.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.grecaptcha-badge {
  visibility: hidden;
  opacity: 0;
}
.grecaptcha-v2-container iframe.has-error {
  border: 1px solid #dc3545;
  border-radius: 3px;
}
/*
 * Page-specific styles
 * -------------------- */
.product-detail-headline {
  margin-bottom: 3rem;
}
.product-detail-content {
  margin-bottom: 1.5rem;
}
.product-detail-content .product-breadcrumb {
  padding: 0;
  margin: 1rem 0;
}
.product-detail-name-container {
  display: flex;
  align-items: center;
}
.product-detail-name-container .product-detail-variant-characteristics {
  padding-left: 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: #adb5bd;
}
.product-detail-buy {
  margin-bottom: 1rem;
}
.product-detail-price {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .product-detail-price {
    font-size: 1.75rem;
  }
}
.product-detail-price-unit {
  font-size: 1.0625rem;
}
.product-detail-tax {
  font-size: 1.1875rem;
}
.product-detail-delivery-information {
  margin-bottom: 1.5rem;
}
.product-detail-form-container {
  margin-bottom: 1rem;
}
.product-detail-ordernumber-container {
  margin-bottom: 1rem;
}
.product-block-prices-grid thead {
  background-color: #f9f9f9;
}
.product-block-prices-grid th {
  font-weight: 400;
}
.product-block-prices-grid td {
  font-weight: 700;
}
.product-block-prices-grid .product-block-prices-cell {
  border: 0 none;
  padding: 10px 0 10px 16px;
  line-height: 20px;
}
.product-block-prices-grid .product-block-prices-cell.product-block-prices-cell-thin {
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 22px;
}
.product-block-prices-grid .product-block-prices-body .product-block-prices-row {
  border-top: 1px solid #eee;
}
.product-block-prices-grid .product-block-prices-body .product-block-prices-row:first-of-type {
  border-top: 0 none;
}
.product-detail-configurator-option-label {
  --bs-btn-font-weight: 400;
  --bs-btn-border-color: #e3ddd3;
  --bs-btn-color: #23201c;
  --bs-btn-padding-y: 0.125rem;
  --bs-btn-line-height: 1.625rem;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: #23201c;
  --bs-btn-active-border-color: #2F5D50;
  --bs-btn-disabled-border-color: #798490;
  --bs-btn-disabled-color: #23201c;
  --bs-btn-disabled-opacity: 0.65;
}
.product-detail-configurator-option-label.disabled {
  pointer-events: auto;
  text-decoration: line-through;
}
.product-detail-configurator-option-label.is-display-color, .product-detail-configurator-option-label.is-display-media {
  --bs-btn-padding-x: 0.125rem;
  background-clip: content-box;
  min-width: 3.75rem;
  height: 3.75rem;
}
.btn-check:checked + .product-detail-configurator-option-label {
  --bs-btn-border-width: 2px;
}
.product-detail-tabs-content {
  display: none;
}
.product-detail-tabs-content .offcanvas-body {
  overflow: initial;
  padding: 0;
}
.product-detail-description-text {
  margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
  .product-detail-tabs-content {
    display: block;
  }
  .product-detail-tabs .offcanvas-close, .product-detail-tab-navigation-icon, .product-detail-tab-preview {
    display: none;
  }
}
@media screen and (max-width: 575px) {
  .product-detail-tab-preview {
    flex-basis: 100%;
  }
}
.product-detail-review-widget {
  margin-bottom: 1rem;
  z-index: 1;
}
.product-detail-reviews {
  margin-bottom: 1rem;
}
.product-detail-reviews .icon svg {
  top: 2px;
}
.product-detail-review-teaser-btn .product-detail-review-teaser-hide {
  display: none;
}
.product-detail-review-teaser-btn.collapsed .product-detail-review-teaser-show {
  display: none;
}
.product-detail-review-teaser-btn.collapsed .product-detail-review-teaser-hide {
  display: block;
}
.product-review-rating {
  margin-right: 1rem;
}
.product-detail-review-item-points {
  margin-bottom: 0.5rem;
}
.product-detail-review-item-content {
  word-break: break-word;
}
.product-detail-review-form-radio {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.product-detail-review-form-radio:not(caption) {
  position: absolute !important;
}
.product-detail-review-form-radio * {
  overflow: hidden !important;
}
.product-detail-review-form-rating-input {
  display: flex;
}
.product-detail-review-form-rating-input .product-detail-review-form-rating-text {
  margin-left: 0.5rem;
  margin-bottom: 0;
}
.product-review-point svg {
  top: 0;
}
.product-review-point, .point-container {
  display: inline-block;
  position: relative;
}
.point-rating {
  display: block;
}
.point-rating.point-blank .icon {
  color: #eee;
}
.point-partial {
  position: absolute;
  top: 0;
  left: 0;
}
.product-detail-review-form-star {
  margin-right: 10px;
}
.product-detail-review-form-star:has(.product-detail-review-form-radio:focus-visible) {
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.product-detail-review-login .login-card .card-body {
  padding-top: 0;
}
.product-detail-review-language {
  margin-bottom: 1rem;
}
.product-detail-review-sortby-label {
  margin-right: 0.25rem;
}
.product-detail-review-cancel {
  margin-right: 5px;
}
.offcanvas .product-detail-review-widget {
  position: static;
}
.offcanvas .product-detail-review-form-rating-input .product-review-point {
  margin-right: 0.5rem;
}
@media (min-width: 768px) {
  .product-detail-review-widget {
    margin-bottom: 0;
  }
  .product-detail-review-sortby-form {
    justify-content: flex-end;
  }
  .product-detail-review-language {
    margin-bottom: 0;
  }
  .product-detail-review-item-points {
    padding-right: 0;
    margin-bottom: 0;
  }
  .product-detail-review-item-title {
    padding-left: 0;
  }
  .product-detail-review-form-star {
    margin-right: 5px;
  }
}
.account-welcome {
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}
.account-address .address-action-create .icon {
  margin-top: 2px;
  margin-right: 0.5rem;
}
.account-address .btn > .icon {
  vertical-align: top;
}
.account-address .account-address-back:hover span.icon, .account-address .account-address-back:focus span.icon {
  color: #fff;
}
.address-manager-select-address {
  min-height: 200px;
}
.address-manager-modal-address-form .icon {
  color: currentColor;
}
.address-manager-modal-address-form .icon svg {
  top: 0.25em;
}
.account-overview-card {
  margin-bottom: 3rem;
}
.register-form .privacy-notice {
  margin-bottom: 1rem;
}
.register-different-shipping {
  margin-top: 1rem;
}
.register-shipping {
  margin-top: 3rem;
}
.order-table {
  margin-bottom: 1.5rem;
  border: 1px solid #e3ddd3;
  position: relative;
}
.order-table .order-item-detail {
  border-top: 0 none;
}
.order-table .order-detail-content {
  border-top: 1px solid #e3ddd3;
  padding: 0;
  box-shadow: none;
}
.order-table-header {
  display: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 20px;
  padding-right: 20px;
}
.order-table-header :first-child {
  position: relative;
}
.order-table-header:last-of-type {
  border-bottom: 0;
}
.order-hide-btn .order-hide-btn-text {
  display: block;
}
.order-hide-btn .order-view-btn-text {
  display: none;
}
.order-hide-btn.collapsed .order-hide-btn-text {
  display: none;
}
.order-hide-btn.collapsed .order-view-btn-text {
  display: block;
}
.order-wrapper:last-of-type {
  border-bottom: 0;
}
.order-item-header {
  padding: 0.5rem 20px;
}
.order-table-header-heading, .order-table-header-order-status, .order-table-header-context-menu {
  display: inline-block;
}
.order-table-header-order-status {
  font-weight: 700;
}
.order-table-header-context-menu-wrapper {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.order-table-header-context-menu-wrapper, .order-table-header-heading {
  margin-top: 0.5rem;
}
.order-table-header-order-number {
  display: block;
  font-weight: 400;
  margin-bottom: 1.5rem;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.order-table-header-order-number .order-table-header-label {
  display: inline;
}
.order-table-header-order-table-body, .order-table-header-order-table-header {
  padding-left: 0;
  padding-right: 0;
}
.order-table-header-order-table-body {
  border-top: 1px solid #798490;
  font-weight: 400;
}
.order-table-header-order-table-body .order-table-header-order-table-body-cell[class*="col-"] {
  margin-top: 10px;
}
.order-table-header-order-table-body .order-table-header-order-table-body-cell[class*="col-"]:first-of-type {
  padding-left: 0;
}
.order-table-header-order-table-body .order-table-header-order-table-body-cell[class*="col-"]:last-of-type {
  padding-right: 0;
}
.order-table-header-order-table-header {
  font-weight: 700;
}
.order-table-header-order-table-header .order-table-header-order-table-header-cell[class*="col-"] {
  margin-bottom: 10px;
}
.order-table-header-order-table-header .order-table-header-order-table-header-cell[class*="col-"]:first-of-type {
  padding-left: 0;
}
.order-table-header-order-table-header .order-table-header-order-table-header-cell[class*="col-"]:last-of-type {
  padding-right: 0;
}
.order-table-header-order-table {
  width: 100%;
}
.payment-control input, .payment-control label {
  cursor: pointer;
}
.order-item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.order-item-actions {
  text-align: center;
}
.order-item-label {
  float: left;
  width: 50%;
}
.order-item-value {
  width: 50%;
}
.order-table-header-context-menu-indicator {
  position: absolute;
  top: -3px;
  right: 7px;
}
.order-item-status-badge {
  /*
     * Set colors of the order status badge according to the order state.
     * The stylelint rule `selector-class-pattern` is disabled.
     * The technicalName of the order state includes underscores.
     */
  /* stylelint-disable selector-class-pattern */
  /* stylelint-enable selector-class-pattern */
}
.order-item-status-badge.order-item-status-badge-open, .order-item-status-badge.order-item-status-badge-in_progress {
  background-color: #55B4E6;
  color: #fff;
}
.order-item-status-badge.order-item-status-badge-completed {
  background-color: #2F7D5B;
  color: #fff;
}
.order-item-status-badge.order-item-status-badge-failed, .order-item-status-badge.order-item-status-badge-cancelled {
  background-color: #B8402F;
  color: #fff;
}
.order-item-status-badge .icon {
  color: currentColor;
}
.order-item-status-badge .icon svg {
  top: 5px;
}
@media (min-width: 768px) {
  .order-table-header {
    display: block;
  }
  .order-table-header, .order-item-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .order-item {
    padding-top: 0;
    padding-bottom: 0;
  }
  .order-item-actions {
    text-align: right;
  }
}
@media (min-width: 576px) {
  .order-table-header-order-table-body .order-table-header-label {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .order-table-header-order-table-body .order-table-header-label:not(caption) {
    position: absolute !important;
  }
  .order-table-header-order-table-body .order-table-header-label * {
    overflow: hidden !important;
  }
}
@media (max-width: 575.98px) {
  .order-table-header-order-table-header {
    display: none;
  }
  .order-table-header-order-table-body {
    border-top: 0;
  }
  .order-table-header-label {
    display: block;
    float: left;
    width: 50%;
  }
  .order-table-header-order-number {
    margin-bottom: 0;
  }
  .order-table-body-value {
    width: 50%;
  }
  .order-table-header-order-status {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .order-table-header-context-menu-wrapper {
    top: 0.5rem;
    right: 1rem;
  }
  .order-table-header-context-menu-indicator {
    top: -3px;
    right: -3px;
  }
}
.edit-order {
  padding-top: 70px;
  display: flex;
  justify-content: center;
}
.edit-order-container {
  max-width: 895px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.edit-order-tos-checkbox, .edit-order-tos-label {
  cursor: pointer;
}
.edit-order-checkout-aside {
  width: 50%;
  margin-left: 50%;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 991.98px) {
  .edit-order {
    padding-top: 0;
  }
  .edit-order-checkout-aside {
    width: 100%;
    margin-left: 0;
  }
}
.order-detail-content {
  border-top: 1px solid #e3ddd3;
}
.order-detail-content-header {
  display: none;
  padding-left: 0;
  padding-right: 0;
  margin-right: 20px;
  margin-left: 20px;
}
.document-detail-content-header {
  display: block;
  border-bottom: 1px solid #e3ddd3;
  padding-bottom: 0.5rem;
}
.download-detail-content-header {
  display: block;
  border-bottom: 1px solid #e3ddd3;
  padding-bottom: 0.5rem;
}
.order-detail-content-body.has-element-loader {
  min-height: 70px;
  display: flex;
}
.order-detail-content-body .element-loader-backdrop {
  box-shadow: none;
}
.order-detail-content-row {
  font-weight: 400;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-right: 20px;
  margin-left: 20px;
}
.order-detail-content-row .document-item {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.order-detail-content-row .order-item:last-of-type, .order-detail-content-row .document-item:last-of-type {
  padding-right: 0;
}
.order-detail-content-row .order-item:first-of-type, .order-detail-content-row .document-item:first-of-type {
  padding-left: 0;
}
.order-detail-content-row .download-item {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.order-detail-content-row .download-item:last-of-type {
  padding-right: 0;
}
.order-detail-content-row .download-item:first-of-type {
  padding-left: 0;
}
.order-detail-content-row .card-title, .order-detail-content-row .card-content {
  padding-left: 0;
}
@media (max-width: 991.98px) {
  .order-item, .document-item {
    padding-left: 0;
    padding-right: 0;
  }
}
.order-item-detail-list-item {
  margin-bottom: 1rem;
}
.order-item-detail-list-item-divider {
  border-top: 1px solid #e3ddd3;
  margin: 1rem 20px;
}
.order-item-detail-list-item:last-of-type .order-detail-content-row {
  border-bottom: 0 none;
}
.order-item-detail-list-item.is-discount .cart-item-total-price {
  color: #2F7D5B;
}
.order-item-discount-icon {
  text-align: center;
}
.order-item-total {
  font-weight: 700;
}
.order-item-nested-icon {
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  display: flex;
  margin: 0 auto;
  width: 50px;
  height: 50px;
}
.order-item-nested-icon .icon > svg {
  top: 0;
}
.order-item-reorder {
  display: flex;
  justify-content: center;
}
.order-item-detail-footer {
  padding: 1rem;
  padding-left: 20px;
  padding-right: 20px;
}
.order-item-detail-footer dl dt.col, .order-item-detail-footer dl dt[class*="col-"] {
  margin-bottom: 0.5rem;
  padding-right: 0.5rem;
}
.order-item-detail-labels {
  margin-bottom: 0;
}
.order-item-detail-labels-value {
  font-weight: 400;
}
.order-item-detail-summary, .order-item-detail-summary dd:last-child {
  margin-bottom: 0;
}
.order-detail-comment {
  border-top: 0;
  display: block;
  padding-top: 0;
  padding-bottom: 1rem;
}
.card-title.order-detail-comment-title {
  margin-bottom: 0;
  padding: 1rem;
}
.order-detail-comment-body {
  padding: 1rem;
}
.order-detail-comment-value {
  margin-bottom: 0;
}
.order-item-variants-properties {
  display: flex;
}
.order-item-variants-properties-name {
  margin-right: 0.5rem;
}
.order-detail-form {
  float: right;
}
.document-item-view-file {
  text-align: right;
}
.download-item-download-file {
  text-align: right;
}
.order-download-row {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.order-item-detail-footnote {
  background-color: #f9f9f9;
  padding: 0 1rem 1rem;
}
@media (min-width: 768px) {
  .order-detail-content-header {
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e3ddd3;
  }
  .order-item-label {
    display: none;
  }
  .order-detail-content {
    border-top: 0;
  }
  .order-header-tax-price, .order-header-price, .order-item-price, .order-header-total, .order-item-total, .order-header-actions {
    text-align: right;
  }
  .order-header-quantity, .order-item-quantity {
    text-align: center;
  }
  .order-item-reorder {
    justify-content: flex-end;
  }
  .order-item-detail-summary dt, .order-item-detail-summary dd {
    text-align: right;
  }
  .document-item-view-file-icon-btn {
    display: none;
  }
  .download-item-view-file-icon-btn {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .document-header-date {
    display: none;
  }
  .document-item-view-file-text-btn {
    display: none;
  }
  .download-header-date {
    display: none;
  }
  .download-item-view-file-text-btn {
    display: none;
  }
}
.checkout-container {
  margin-bottom: 1.5rem;
}
.checkout-product-table {
  margin-bottom: 1.5rem;
}
.checkout-confirm-tos-checkbox, .checkout-confirm-tos-label {
  cursor: pointer;
}
.is-ctl-checkout .footer-minimal .footer-service-menu-list, .is-act-checkoutregisterpage .footer-minimal .footer-service-menu-list, .is-active-route-frontend-checkout-cart-page .footer-minimal .footer-service-menu-list, .is-active-route-frontend-checkout-confirm-page .footer-minimal .footer-service-menu-list, .is-active-route-frontend-checkout-finish-page .footer-minimal .footer-service-menu-list, .is-active-route-frontend-checkout-info .footer-minimal .footer-service-menu-list, .is-active-route-frontend-cart-offcanvas .footer-minimal .footer-service-menu-list {
  display: block;
}
.checkout-aside-summary-label {
  font-weight: 400;
}
.checkout-aside-summary-list.display-rounded .checkout-aside-summary-total {
  font-weight: 400;
  font-size: 1.1875rem;
}
.checkout-aside-summary-total {
  font-size: 1.375rem;
  font-weight: 700;
  padding-top: 13px;
  border-top: 1px solid #e3ddd3;
  margin-top: 5px;
}
.checkout-aside-summary-total-rounded {
  font-size: 1.375rem;
  font-weight: 700;
}
.checkout-aside-summary-label.summary-net, .checkout-aside-summary-value.summary-net {
  margin-top: 10px;
}
.checkout-aside-summary-header {
  margin-bottom: 20px;
}
.checkout-aside-summary-value {
  text-align: right;
}
.checkout-aside-action {
  margin-top: 1rem;
}
.checkout-aside-add-promotion-button .icon-checkmark {
  color: inherit;
}
.is-act-cartpage .checkout .checkout-container, .is-active-route-frontend-checkout-cart-page .checkout .checkout-container {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.is-act-cartpage .checkout .checkout-main, .is-active-route-frontend-checkout-cart-page .checkout .checkout-main {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .is-act-cartpage .checkout .checkout-main, .is-active-route-frontend-checkout-cart-page .checkout .checkout-main {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}
.is-act-cartpage .checkout .checkout-aside, .is-active-route-frontend-checkout-cart-page .checkout .checkout-aside {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
@media (min-width: 768px) {
  .is-act-cartpage .checkout .checkout-aside, .is-active-route-frontend-checkout-cart-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 41.66666667%;
    margin-left: 58.33333333%;
  }
}
@media (min-width: 992px) {
  .is-act-cartpage .checkout .checkout-aside, .is-active-route-frontend-checkout-cart-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 33.33333333%;
    margin-left: 0;
  }
}
.is-act-cartpage .checkout .checkout-aside-container, .is-active-route-frontend-checkout-cart-page .checkout .checkout-aside-container {
  position: sticky;
  top: 0;
  z-index: 1;
}
.cart-main-header {
  margin-bottom: 1.5rem;
}
.cart-table-header {
  display: none;
}
.cart-header-unit-price, .cart-header-total-price, .cart-header-tax-price {
  text-align: right;
}
.cart-header-quantity {
  text-align: center;
}
.cart-header-row, .line-item-row {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}
.cart-header-row > .col, .cart-header-row > [class*="col-"], .line-item-row > .col, .line-item-row > [class*="col-"] {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
.cart-add-product-container {
  margin-bottom: 1rem;
}
.cart-add-product-container .add-product-button .icon-checkmark {
  color: inherit;
}
.cart-shipping-costs-container {
  align-self: center;
}
.cart-shipping-costs-btn {
  padding-left: 0;
  margin: 1px 0;
}
@media (min-width: 768px) {
  .cart-table-header {
    display: block;
  }
  .cart-add-product-container {
    margin-bottom: 0;
  }
}
@media (min-width: 992px) {
  .cart-table-header {
    display: block;
  }
}
.is-act-checkoutregisterpage .checkout, .is-active-route-frontend-checkout-register-page .checkout {
  padding-top: 70px;
}
.is-act-checkoutregisterpage .checkout .checkout-container, .is-active-route-frontend-checkout-register-page .checkout .checkout-container {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.is-act-checkoutregisterpage .checkout .checkout-main, .is-active-route-frontend-checkout-register-page .checkout .checkout-main {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .is-act-checkoutregisterpage .checkout .checkout-main, .is-active-route-frontend-checkout-register-page .checkout .checkout-main {
    flex: 0 0 auto;
    width: 66.66666667%;
    margin-bottom: 0;
  }
}
.is-act-checkoutregisterpage .checkout .checkout-aside, .is-active-route-frontend-checkout-register-page .checkout .checkout-aside {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
@media (min-width: 992px) {
  .is-act-checkoutregisterpage .checkout .checkout-aside, .is-active-route-frontend-checkout-register-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 33.33333333%;
    display: block;
  }
}
.is-act-confirmpage .checkout, .is-ctl-accountorder .checkout, .is-active-route-frontend-checkout-confirm-page .checkout, .is-active-route-frontend-account-order-page .checkout, .is-active-route-frontend-account-order-cancel .checkout, .is-active-route-frontend-account-order-single-page .checkout, .is-active-route-widgets-account-order-detail .checkout, .is-active-route-frontend-account-edit-order-page .checkout {
  padding-top: 70px;
}
.is-act-confirmpage .checkout .checkout-container, .is-ctl-accountorder .checkout .checkout-container, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-container, .is-active-route-frontend-account-order-page .checkout .checkout-container, .is-active-route-frontend-account-order-cancel .checkout .checkout-container, .is-active-route-frontend-account-order-single-page .checkout .checkout-container, .is-active-route-widgets-account-order-detail .checkout .checkout-container, .is-active-route-frontend-account-edit-order-page .checkout .checkout-container {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.is-act-confirmpage .checkout .checkout-main, .is-ctl-accountorder .checkout .checkout-main, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-main, .is-active-route-frontend-account-order-page .checkout .checkout-main, .is-active-route-frontend-account-order-cancel .checkout .checkout-main, .is-active-route-frontend-account-order-single-page .checkout .checkout-main, .is-active-route-widgets-account-order-detail .checkout .checkout-main, .is-active-route-frontend-account-edit-order-page .checkout .checkout-main {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
@media (min-width: 992px) {
  .is-act-confirmpage .checkout .checkout-main, .is-ctl-accountorder .checkout .checkout-main, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-main, .is-active-route-frontend-account-order-page .checkout .checkout-main, .is-active-route-frontend-account-order-cancel .checkout .checkout-main, .is-active-route-frontend-account-order-single-page .checkout .checkout-main, .is-active-route-widgets-account-order-detail .checkout .checkout-main, .is-active-route-frontend-account-edit-order-page .checkout .checkout-main {
    flex: 0 0 auto;
    width: 66.66666667%;
    margin-left: 16.66666667%;
  }
}
.is-act-confirmpage .checkout .checkout-additional, .is-ctl-accountorder .checkout .checkout-additional, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-additional, .is-active-route-frontend-account-order-page .checkout .checkout-additional, .is-active-route-frontend-account-order-cancel .checkout .checkout-additional, .is-active-route-frontend-account-order-single-page .checkout .checkout-additional, .is-active-route-widgets-account-order-detail .checkout .checkout-additional, .is-active-route-frontend-account-edit-order-page .checkout .checkout-additional {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 576px) {
  .is-act-confirmpage .checkout .checkout-additional, .is-ctl-accountorder .checkout .checkout-additional, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-additional, .is-active-route-frontend-account-order-page .checkout .checkout-additional, .is-active-route-frontend-account-order-cancel .checkout .checkout-additional, .is-active-route-frontend-account-order-single-page .checkout .checkout-additional, .is-active-route-widgets-account-order-detail .checkout .checkout-additional, .is-active-route-frontend-account-edit-order-page .checkout .checkout-additional {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .is-act-confirmpage .checkout .checkout-additional, .is-ctl-accountorder .checkout .checkout-additional, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-additional, .is-active-route-frontend-account-order-page .checkout .checkout-additional, .is-active-route-frontend-account-order-cancel .checkout .checkout-additional, .is-active-route-frontend-account-order-single-page .checkout .checkout-additional, .is-active-route-widgets-account-order-detail .checkout .checkout-additional, .is-active-route-frontend-account-edit-order-page .checkout .checkout-additional {
    flex: 0 0 auto;
    width: 33.33333333%;
    margin-left: 16.66666667%;
  }
}
.is-act-confirmpage .checkout .checkout-aside, .is-ctl-accountorder .checkout .checkout-aside, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-aside, .is-active-route-frontend-account-order-page .checkout .checkout-aside, .is-active-route-frontend-account-order-cancel .checkout .checkout-aside, .is-active-route-frontend-account-order-single-page .checkout .checkout-aside, .is-active-route-widgets-account-order-detail .checkout .checkout-aside, .is-active-route-frontend-account-edit-order-page .checkout .checkout-aside {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 1 1 0;
  max-width: 100%;
}
@media (min-width: 768px) {
  .is-act-confirmpage .checkout .checkout-aside, .is-ctl-accountorder .checkout .checkout-aside, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-aside, .is-active-route-frontend-account-order-page .checkout .checkout-aside, .is-active-route-frontend-account-order-cancel .checkout .checkout-aside, .is-active-route-frontend-account-order-single-page .checkout .checkout-aside, .is-active-route-widgets-account-order-detail .checkout .checkout-aside, .is-active-route-frontend-account-edit-order-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 50%;
    margin-left: 50%;
  }
}
@media (min-width: 992px) {
  .is-act-confirmpage .checkout .checkout-aside, .is-ctl-accountorder .checkout .checkout-aside, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-aside, .is-active-route-frontend-account-order-page .checkout .checkout-aside, .is-active-route-frontend-account-order-cancel .checkout .checkout-aside, .is-active-route-frontend-account-order-single-page .checkout .checkout-aside, .is-active-route-widgets-account-order-detail .checkout .checkout-aside, .is-active-route-frontend-account-edit-order-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
.is-act-confirmpage .checkout .checkout-aside-no-offset, .is-ctl-accountorder .checkout .checkout-aside-no-offset, .is-active-route-frontend-checkout-confirm-page .checkout .checkout-aside-no-offset, .is-active-route-frontend-account-order-page .checkout .checkout-aside-no-offset, .is-active-route-frontend-account-order-cancel .checkout .checkout-aside-no-offset, .is-active-route-frontend-account-order-single-page .checkout .checkout-aside-no-offset, .is-active-route-widgets-account-order-detail .checkout .checkout-aside-no-offset, .is-active-route-frontend-account-edit-order-page .checkout .checkout-aside-no-offset {
  margin-left: 0;
}
.confirm-main-header, .confirm-tos, .confirm-address, .confirm-payment-shipping, .confirm-payment, .confirm-product {
  margin-bottom: 1.5rem;
}
.confirm-tos-bottom {
  margin-bottom: 3rem;
}
.confirm-payment-current, .confirm-shipping-current {
  margin-bottom: 3rem;
}
.confirm-payment-current.is-invalid, .confirm-shipping-current.is-invalid {
  color: #B8402F;
}
.confirm-method-tooltip {
  margin-left: 0.25rem;
}
.payment-method-label, .shipping-method-label {
  width: 100%;
}
.payment-method-label .payment-method-description, .payment-method-label .shipping-method-description, .shipping-method-label .payment-method-description, .shipping-method-label .shipping-method-description {
  width: 66%;
}
.is-act-finishpage .checkout, .is-active-route-frontend-checkout-finish-page .checkout {
  padding-top: 70px;
}
.is-act-finishpage .checkout .checkout-container, .is-active-route-frontend-checkout-finish-page .checkout .checkout-container {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.is-act-finishpage .checkout .checkout-main, .is-active-route-frontend-checkout-finish-page .checkout .checkout-main {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
@media (min-width: 992px) {
  .is-act-finishpage .checkout .checkout-main, .is-active-route-frontend-checkout-finish-page .checkout .checkout-main {
    flex: 0 0 auto;
    width: 66.66666667%;
    margin-left: 16.66666667%;
  }
}
.is-act-finishpage .checkout .checkout-additional, .is-active-route-frontend-checkout-finish-page .checkout .checkout-additional {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 576px) {
  .is-act-finishpage .checkout .checkout-additional, .is-active-route-frontend-checkout-finish-page .checkout .checkout-additional {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
}
@media (min-width: 768px) {
  .is-act-finishpage .checkout .checkout-additional, .is-active-route-frontend-checkout-finish-page .checkout .checkout-additional {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .is-act-finishpage .checkout .checkout-additional, .is-active-route-frontend-checkout-finish-page .checkout .checkout-additional {
    flex: 0 0 auto;
    width: 33.33333333%;
    margin-left: 16.66666667%;
  }
}
.is-act-finishpage .checkout .checkout-aside, .is-active-route-frontend-checkout-finish-page .checkout .checkout-aside {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  flex: 1 1 0;
  max-width: 100%;
}
@media (min-width: 576px) {
  .is-act-finishpage .checkout .checkout-aside, .is-active-route-frontend-checkout-finish-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 58.33333333%;
    margin-left: 41.66666667%;
  }
}
@media (min-width: 768px) {
  .is-act-finishpage .checkout .checkout-aside, .is-active-route-frontend-checkout-finish-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 50%;
    margin-left: 50%;
  }
}
@media (min-width: 992px) {
  .is-act-finishpage .checkout .checkout-aside, .is-active-route-frontend-checkout-finish-page .checkout .checkout-aside {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
.is-act-finishpage .checkout .checkout-aside-no-offset, .is-active-route-frontend-checkout-finish-page .checkout .checkout-aside-no-offset {
  margin-left: 0;
}
.finish-content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6rem;
}
.finish-ordernumber {
  font-size: 1.375rem;
  font-weight: 600;
  text-align: center;
}
.finish-teaser {
  text-align: center;
}
.finish-create-account-container {
  text-align: center;
}
.finish-header {
  margin-bottom: 1.5rem;
  text-align: center;
}
.finish-order-subtitle {
  text-align: center;
}
.finish-change-payment-wrapper {
  text-align: center;
}
.finish-action {
  text-align: center;
  margin-bottom: 3rem;
}
.finish-info {
  margin-bottom: 3rem;
}
.account-guest-conversion__title {
  margin-bottom: 1rem;
}
.account-guest-conversion__subtitle {
  color: #2F5D50;
}
.account-guest-conversion__form-container {
  border-top: 1px solid #e3ddd3;
}
.account-guest-conversion__form {
  margin-top: 1rem;
}
.account-guest-conversion__required-info {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.search-page .filter-panel-wrapper-toggle {
  margin-bottom: 1rem;
}
.wishlist-headline {
  margin: 0;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wishlist-listing-col {
  margin-top: 86px;
}
.wishlist-listing-col .wishlist-listing-empty {
  height: 250px;
  width: 100%;
}
.wishlist-listing-col .wishlist-listing-header {
  font-weight: bold;
  color: #2b3136;
}
.wishlist-listing-col .wishlist-listing-description {
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .wishlist-listing-header {
    margin-top: 53px;
    font-size: 36px;
    line-height: 40px;
  }
  .wishlist-listing-empty {
    max-height: 200px;
  }
}
@media (max-width: 767.98px) {
  .wishlist-listing-empty {
    max-height: 120px;
  }
  .wishlist-listing-header {
    margin-top: 48px;
    font-size: 23px;
    line-height: 34px;
  }
}
/*
Shopware skin
==================================================
Contains the imports to all Shopware skin styles.

The file organization follows the 7-1 pattern architecture
https://sass-guidelin.es/#the-7-1-pattern

@sw-package framework
*/
/*
 * Vendors
 * ------- */
/*
Inter typeface family
==================================================
Import of Inter font vendor.

https://rsms.me/inter/

@sw-package framework
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-CyrillicExt.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-CyrillicExt.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Cyrillic.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Cyrillic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-GreekExt.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-GreekExt.woff2") format("woff2-variations");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Greek.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Greek.woff2") format("woff2-variations");
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Vietnamese.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Vietnamese.woff2") format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-LatinExt.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-LatinExt.woff2") format("woff2-variations");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Latin.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Roman-Latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-CyrillicExt.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-CyrillicExt.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Cyrillic.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Cyrillic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-GreekExt.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-GreekExt.woff2") format("woff2-variations");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Greek.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Greek.woff2") format("woff2-variations");
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Vietnamese.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Vietnamese.woff2") format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-LatinExt.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-LatinExt.woff2") format("woff2-variations");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: fallback;
  src: url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Latin.woff2") format("woff2 supports variations"), url("../../01a01e50c418717daebfa7edfcf3bc6b/assets/font/Inter-Variable-Italic-Latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1;
}
/*
 * Variables, Mixins, Functions
 * ---------------------------- */
/*
 * Base stuff
 * ---------- */
/*
Base
==================================================
Contains global base styles for all pages

@sw-package framework
*/
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex-grow: 1;
}
/*
Typography
==============================================
Custom styling for bootstrap typography.

https://getbootstrap.com/docs/5.2/content/typography

@sw-package framework
*/
h1, .h1 {
  line-height: 2.5rem;
}
h2, .h2 {
  line-height: 2.125rem;
}
h3, .h3 {
  line-height: 2.063rem;
}
h4, .h4 {
  line-height: 1.5rem;
}
h5, .h5 {
  line-height: 1.313rem;
}
h6, .h6 {
  line-height: 1.25rem;
}
ol, ul, dl {
  margin-bottom: 2rem;
}
blockquote {
  font-size: 1.375rem;
  font-style: italic;
  line-height: 24px;
  margin-top: 16px;
  margin-left: 20px;
  position: relative;
}
blockquote::before {
  content: '"';
  font-size: 40px;
  line-height: 16px;
  color: #9aa7be;
  position: absolute;
  top: 10px;
  left: -24px;
}
/*
 * Components
 * ---------- */
/*
Alert
==============================================
Custom skin styling for bootstrap alert component.

https://getbootstrap.com/docs/5.2/components/alerts
*/
.alert .icon {
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.alert .icon svg {
  top: 0;
}
.alert-primary {
  --bs-alert-border-color: #2F5D50;
  --bs-alert-bg: #e3f6f2;
  --bs-alert-color: #23201c;
}
.alert-secondary {
  --bs-alert-border-color: #B4573A;
  --bs-alert-bg: #fdebe6;
  --bs-alert-color: #23201c;
}
.alert-success {
  --bs-alert-border-color: #2F7D5B;
  --bs-alert-bg: #e3f9f1;
  --bs-alert-color: #23201c;
}
.alert-info {
  --bs-alert-border-color: #55B4E6;
  --bs-alert-bg: #ecf9ff;
  --bs-alert-color: #23201c;
}
.alert-warning {
  --bs-alert-border-color: #974200;
  --bs-alert-bg: #fcebdf;
  --bs-alert-color: #23201c;
}
.alert-danger {
  --bs-alert-border-color: #B8402F;
  --bs-alert-bg: #fee8e4;
  --bs-alert-color: #23201c;
}
.alert-light {
  --bs-alert-border-color: #f9f9f9;
  --bs-alert-bg: #fefefe;
  --bs-alert-color: #23201c;
}
.alert-dark {
  --bs-alert-border-color: #4a545b;
  --bs-alert-bg: #e6eef6;
  --bs-alert-color: #23201c;
}
/*
Badge
==============================================
Custom skin styling for bootstrap badge component.

https://getbootstrap.com/docs/5.2/components/badge/
*/
.badge {
  border: 0;
  box-sizing: content-box;
  height: 20px;
  line-height: 20px;
  margin: 0 5px;
  min-width: 10px;
}
.badge-lg {
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
}
/*
Breadcrumb
==============================================
Custom skin styling for bootstrap breadcrumb component.

https://getbootstrap.com/docs/5.2/components/breadcrumb
*/
.breadcrumb .breadcrumb-placeholder {
  margin: 0 0.5rem;
}
.breadcrumb svg {
  height: 1.1875rem;
  width: auto;
  top: 3px;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item:before {
  line-height: 24px;
  padding-top: 3px;
}
.breadcrumb a {
  color: #23201c;
  font-size: 1.1875rem;
}
.breadcrumb a:hover {
  color: #2F5D50;
  text-decoration: none;
}
.breadcrumb a.is-active {
  color: #2F5D50;
  font-weight: bolder;
}
/*
Button
==============================================
Custom skin styling for bootstrap button component.

https://getbootstrap.com/docs/5.2/components/buttons
*/
.btn {
  --bs-btn-disabled-color: #bcc1c7;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-buy {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0042a0;
  --bs-btn-border-color: #0042a0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #003888;
  --bs-btn-hover-border-color: #003580;
  --bs-btn-focus-shadow-rgb: 38, 94, 174;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #003580;
  --bs-btn-active-border-color: #003278;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0042a0;
  --bs-btn-disabled-border-color: #0042a0;
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-buy.disabled, .btn-buy:disabled {
  opacity: 1;
  background: #eee;
  border-color: #eee;
  color: #bcc1c7;
}
.btn-link {
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-link-inline {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-font-weight: 400;
  --bs-btn-font-size: inherit;
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-btn-line-height: 1.7;
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 0;
  --bs-btn-border-width: 0;
  text-decoration: underline;
  vertical-align: baseline;
  text-align: left;
  white-space: normal;
}
.btn-link-inline:hover {
  text-decoration: underline;
}
.btn-primary, .btn-outline-primary {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-success, .btn-outline-success {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-info, .btn-outline-info {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-warning, .btn-outline-warning {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-danger, .btn-outline-danger {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-light, .btn-outline-light {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.btn-dark, .btn-outline-dark {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
/*
Card
==============================================
Custom skin styling for bootstrap card component.

https://getbootstrap.com/docs/5.2/components/card
*/
.card-title {
  border-bottom: 1px solid #e3ddd3;
  padding-bottom: 10px;
}
/*
Custom Select
==============================================
Custom skin styling for bootstrap custom select menu.

https://getbootstrap.com/docs/5.2/forms/select
*/
.custom-select {
  cursor: pointer;
}
.custom-select:invalid {
  color: #666977;
}
.custom-select:hover {
  border-color: #2F5D50;
  color: #2F5D50;
}
/*
Form
==============================================
Custom skin styling for bootstrap forms.

https://getbootstrap.com/docs/5.2/forms/overview
*/
.form-group {
  margin-bottom: 20px;
}
.was-validated .form-control:invalid:focus, .was-validated .form-control.is-invalid:focus, .was-validated .form-control:valid:focus, .was-validated .form-control.is-valid:focus, .was-validated .form-select:invalid:focus, .was-validated .form-select.is-invalid:focus, .was-validated .form-select:valid:focus, .was-validated .form-select.is-valid:focus, .form-control:invalid:focus, .form-control.is-invalid:focus, .form-control:valid:focus, .form-control.is-valid:focus, .form-select:invalid:focus, .form-select.is-invalid:focus, .form-select:valid:focus, .form-select.is-valid:focus {
  box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
}
.form-required-label {
  color: #B8402F;
}
.form-field-feedback .invalid-feedback {
  display: block;
}
/*
Modal
==============================================
Custom skin styling for bootstrap modal component.

https://getbootstrap.com/docs/5.2/components/modal
*/
.modal-content {
  box-shadow: var(--bs-modal-box-shadow);
}
.modal-content .modal-title {
  margin: 0;
  line-height: 1.7;
}
.js-pseudo-modal-back-btn .icon {
  color: currentColor;
  margin-right: 0.5rem;
}
/*
Product box
==============================================
Styling for productbox component.
*/
.product-box {
  --bs-card-bg: var(--bs-body-bg);
  border-color: #e3ddd3;
}
.product-box .card-body {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
}
.product-name {
  font-weight: 600;
}
.product-price {
  color: #2b3136;
}
/*
Tab Menu
==============================================
Custom skin styling for bootstrap card with included tab navigation.

https://getbootstrap.com/docs/5.2/components/card/#navigation
*/
.card-tabs {
  --bs-card-border-width: 0;
}
.card-tabs .card-header {
  --bs-card-cap-bg: none;
  --bs-card-cap-padding-x: 10px;
}
.card-tabs .nav-item {
  margin-right: 10px;
}
.card-tabs .nav-link {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 5px;
  --bs-nav-link-color: #23201c;
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-link-hover-border-color: #2F5D50;
  --bs-nav-link-hover-color: #2F5D50;
  --bs-nav-tabs-link-active-color: #2F5D50;
  --bs-nav-tabs-link-active-border-color: #2F5D50;
  border-bottom: 2px solid #e3ddd3;
}
.card-tabs .nav-link.active, .card-tabs .nav-link:hover {
  background-image: none;
}
.card-tabs .nav-link .product-cross-selling-tab-navigation {
  padding: 0;
}
.card-tabs .card-body {
  padding-top: 30px;
}
/*
CMS blocks
==============================================
Skin styling for cms blocks and
specific skin styling for elements dependent on their parent block
*/
.cms-block-text-hero .cms-element-text hr {
  max-width: 160px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #e9edf0;
}
/*
CMS elements
==============================================
Skin styling for cms elements
*/
.cms-element-product-listing .cms-listing-row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
  margin-bottom: 1.5rem;
}
.quickview-minimal-product-name {
  color: #2b3136;
}
.quickview-minimal-product-name:hover {
  text-decoration: none;
}
.quickview-minimal-product-number {
  font-size: 1.0625rem;
}
.quickview-minimal-footer-heading {
  border-bottom: 1px solid #e3ddd3;
}
.pagination {
  --bs-pagination-padding-y: calc(0 + 1px);
  gap: 0.125rem;
}
.pagination .page-link {
  line-height: 2.125rem;
  text-align: center;
}
@media (min-width: 576px) {
  .pagination .page-link {
    min-width: 40px;
  }
}
.pagination .page-link .icon {
  color: inherit;
}
.pagination .page-link:focus {
  box-shadow: inset 0 0 0 0.125rem #2f5d50, inset 0 0 0 0.25rem #fbf9f6;
}
.skip-target {
  background-color: var(--bs-body-bg);
  z-index: 1;
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
}
/*
 * Layout-related sections
 * ----------------------- */
/*
Top bar
==================================================
Contains skin styles for the top bar located at the top of the page.
The top bar contains e.g. the language switcher, the currency switcher and the service menu.
*/
.top-bar {
  padding-top: 0.25rem;
}
.top-bar-nav-btn.btn {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-btn-color: #23201c;
  --bs-btn-font-weight: 400;
  --bs-btn-border-width: 0;
  --bs-btn-border-color: transparent;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-hover-color: #2F5D50;
  --bs-btn-line-height: 2rem;
}
.top-bar-list {
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-hover-color: #2F5D50;
  --bs-dropdown-link-active-color: #2F5D50;
  --bs-dropdown-link-active-bg: transparent;
}
.top-bar-list-item-currency-symbol {
  min-width: 1.7rem;
}
.top-bar-nav-text, .top-bar-list-icon {
  pointer-events: none;
}
/*
Header
==================================================
Contains custom skin styles for the header at the top of the page.
The header contains the shop logo, the search form and various actions like the offcanvas cart button.
*/
.header-search-btn, .header-close-btn {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-btn-border-color: #798490;
  --bs-btn-hover-color: #2F5D50;
  --bs-btn-hover-border-color: #798490;
  --bs-btn-active-border-color: #798490;
  --bs-btn-disabled-bg: var(--bs-body-bg);
  --bs-btn-disabled-border-color: #e3ddd3;
  border-left: 0 none;
}
.header-search-btn:hover .icon, .header-close-btn:hover .icon {
  color: #2F5D50;
}
.header-search-btn.btn:disabled, .header-close-btn.btn:disabled {
  display: flex;
  align-items: center;
}
.header-search-input {
  border-right: 0;
}
.header-search-input:focus, .header-search-input:focus ~ .header-search-btn, .header-search-input:focus ~ .header-close-btn {
  border-color: #2F5D50;
}
.header-actions-btn {
  --bs-btn-focus-box-shadow: 0 0 0 0.125rem #fbf9f6, 0 0 0 0.25rem #2f5d50;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-hover-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-bg: transparent;
}
.header-actions-btn:hover, .header-actions-btn:hover .icon {
  color: #2F5D50;
}
.header-cart-total {
  color: #2F5D50;
  font-size: 1.375rem;
}
@media (min-width: 576px) {
  .header-cart-badge {
    display: none;
  }
}
/*
Footer
==================================================
Contains custom skin styles for the footer located at the bottom of the page.
*/
.footer-main {
  border-top: 1px solid #e3ddd3;
}
.footer-column {
  border-bottom: 1px solid #e3ddd3;
}
.footer-column-headline {
  color: #2F5D50;
  font-size: 1.375rem;
  font-weight: 700;
}
.footer-link {
  color: #23201c;
}
.footer-link:hover {
  color: #2F5D50;
}
.footer-contact-hotline a {
  display: block;
  margin: 1rem 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: #2F5D50;
}
.footer-bottom {
  background: #f9f9f9;
}
.footer-service-menu-item {
  padding-right: 1rem;
  font-weight: 700;
}
.footer-service-menu-item:last-child {
  padding-right: 0;
}
.footer-service-menu-link {
  color: inherit;
}
@media (min-width: 768px) {
  .footer-column {
    border: 0;
  }
  .footer-link-item {
    padding: 2px 0;
  }
}
/*
Main navigation
==============================================
Custom styling for main navigation on larger screens.

Based on bootstrap nav:
https://getbootstrap.com/docs/5.2/components/navs-tabs
*/
@media (min-width: 768px) {
  .main-navigation-menu {
    --bs-navbar-color: #23201c;
    --bs-navbar-nav-link-padding-x: 0;
  }
  .main-navigation-menu .nav-item:not(:last-child) {
    padding-right: 1rem;
  }
  .main-navigation-link.root.active .main-navigation-link-text {
    border-color: #2F5D50;
  }
  .main-navigation-link-text {
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
  }
}
.main-navigation-menu .dropdown-menu::after {
  content: "";
  position: absolute;
  height: calc(1 * var(--bs-dropdown-spacer) + 1px);
  left: 0;
  right: 0;
}
.main-navigation-menu .dropdown:not(.dropup) .dropdown-menu::after {
  top: calc(-1 * var(--bs-dropdown-spacer) - 1px);
}
.main-navigation-menu .dropup .dropdown-menu::after {
  bottom: calc(-1 * var(--bs-dropdown-spacer) - 1px);
}
/*
Navigation flyout
==============================================
Custom skin styling for navigation flyout which opens on hover over the main navigation.
*/
.navigation-flyout-categories:not(.is-level-0) {
  margin-left: 20px;
}
.navigation-flyout-categories.is-level-0 > .navigation-flyout-col {
  margin-bottom: 30px;
  position: relative;
}
.navigation-flyout-categories.is-level-0 > .navigation-flyout-col::before {
  border-left: 1px solid #e3ddd3;
  content: "";
  height: 100%;
  left: 15px;
  position: absolute;
  top: 0;
}
.navigation-flyout-link {
  transition: padding 0.25s cubic-bezier(0, 0.77, 0.33, 1);
  color: #23201c;
  font-size: 1.1875rem;
  margin: 0 1rem;
  padding: 0.25rem 0;
}
@media (prefers-reduced-motion: reduce) {
  .navigation-flyout-link {
    transition: none;
  }
}
.navigation-flyout-link.is-level-0 {
  font-weight: 700;
}
.navigation-flyout-link.is-level-2 {
  font-size: 1.1875rem;
  padding: 0.125rem 0;
}
.navigation-flyout-link.nav-link:hover {
  color: #2F5D50;
  padding-left: 5px;
}
.navigation-flyout-link.active {
  color: #2F5D50;
  font-weight: 700;
}
.navigation-flyout-category-link {
  font-weight: 700;
  font-size: 1.1875rem;
}
/*
Navigation offcanvas
==============================================
Custom skin styling for navigation offcanvas which replaces main navigation on smaller screens.
Based on custom offcanvas component.
*/
.navigation-offcanvas-headline {
  font-weight: 700;
  color: #B4573A;
}
.navigation-offcanvas-headline:focus-visible {
  box-shadow: inset 0 0 0 0.125rem #2f5d50, inset 0 0 0 0.25rem #fbf9f6;
}
.navigation-offcanvas-list-item {
  background-color: #fff;
  border-top: 1px solid #bcc1c7;
}
.navigation-offcanvas-list-item:last-child {
  border-bottom: 1px solid #bcc1c7;
}
.navigation-offcanvas-link {
  color: #23201c;
}
.navigation-offcanvas-link:focus-visible {
  box-shadow: inset 0 0 0 0.125rem #2f5d50, inset 0 0 0 0.25rem #fbf9f6;
}
.navigation-offcanvas-link.is-home-link, .navigation-offcanvas-link.is-home-link .icon {
  color: #2F5D50;
}
.navigation-offcanvas-link.is-back-link {
  border-top: 1px solid #bcc1c7;
  font-weight: 700;
  color: #B4573A;
}
.navigation-offcanvas-link.is-current-category {
  color: #2F5D50;
  font-weight: 700;
}
/*
Offcanvas cart
==============================================
Custom skin styling for the cart offcanvas.
*/
.offcanvas-cart-header-count {
  color: var(--bs-secondary-color);
  font-weight: 700;
}
.offcanvas-cart-tax {
  color: var(--bs-secondary-color);
}
/*
 * Page-specific styles
 * -------------------- */
.product-detail-name {
  color: #2b3136;
}
.product-detail-price {
  color: #2b3136;
  margin-bottom: 0;
  font-weight: 700;
  vertical-align: middle;
}
.product-detail-price.with-list-price {
  color: #B8402F;
  display: inline-block;
}
.product-detail-price.with-regulation-price {
  display: inline-block;
}
.product-detail-price.with-advanced-list-price {
  color: #B8402F;
  font-size: 1.1875rem;
  display: inline-block;
}
.list-price-badge {
  display: inline-block;
  background: #B8402F;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  line-height: 32px;
  height: 32px;
  width: 32px;
  font-size: 18px;
  font-weight: 600;
  vertical-align: middle;
  margin-bottom: 8px;
  margin-left: 5px;
  margin-right: 6px;
}
.product-detail-regulation-price-wrapper, .product-detail-list-price-wrapper {
  color: #2b3136;
  font-weight: 400;
  font-size: 0.75rem;
  display: inline-block;
  height: 1.625rem;
  vertical-align: bottom;
}
@media (max-width: 991.98px) {
  .product-detail-regulation-price-wrapper, .product-detail-list-price-wrapper {
    height: 1.375rem;
  }
}
.product-detail-regulation-price-wrapper .list-price-price, .product-detail-list-price-wrapper .list-price-price {
  text-decoration: line-through;
}
.product-detail-advanced-regulation-price-wrapper, .product-detail-advanced-list-price-wrapper {
  color: #2b3136;
  font-weight: 400;
  font-size: 12px;
  vertical-align: bottom;
  display: block;
  padding-left: 0;
}
.product-detail-advanced-regulation-price-wrapper .list-price-price, .product-detail-advanced-list-price-wrapper .list-price-price {
  text-decoration: line-through;
}
.product-detail-advanced-regulation-price-wrapper.with-list-price, .product-detail-advanced-list-price-wrapper.with-list-price {
  padding-left: 0;
}
.product-detail-advanced-regulation-price-wrapper-no-line-through .list-price-price, .product-detail-advanced-list-price-wrapper-no-line-through .list-price-price {
  text-decoration: none;
}
@media (min-width: 576px) {
  .product-detail-advanced-list-price-wrapper {
    display: inline-block;
    padding-left: 8px;
  }
}
@media (min-width: 992px) {
  .product-detail-advanced-list-price-wrapper {
    display: block;
    padding-left: 0;
  }
}
@media (min-width: 1200px) {
  .product-detail-advanced-list-price-wrapper {
    display: inline-block;
    padding-left: 8px;
  }
}
.product-detail-ordernumber-label {
  font-weight: 700;
}
.product-detail-quantity-select {
  height: 100%;
}
.product-detail-tabs {
  margin-bottom: 1.5rem;
}
.product-detail-tabs .product-detail-tab-navigation {
  padding: 0;
}
.product-detail-tab-navigation-list {
  flex-direction: column;
  padding-bottom: 5px;
}
.product-detail-properties-table th, .product-detail-properties-table td {
  border: 0;
}
.product-detail-tab-preview {
  font-weight: 400;
  margin-top: 0.5rem;
}
.product-detail-tab-preview-more {
  color: #2F5D50;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .product-detail-tabs .product-detail-tab-navigation-link {
    background: none;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-weight: 700;
    word-wrap: normal;
  }
}
@media (min-width: 576px) {
  .product-detail-tabs {
    margin-bottom: 0;
  }
  .product-detail-tab-navigation-list {
    border: 0;
    flex-direction: row;
    padding-bottom: 0;
  }
}
.product-detail-review-widget {
  top: 20px;
}
.product-detail-review-progressbar-container {
  height: 14px;
  margin-top: 4px;
}
.product-detail-review-progressbar-bar {
  background-color: #fedc70;
}
.product-detail-review-item {
  border-bottom: 1px solid #e3ddd3;
  margin-bottom: 2rem;
}
.product-detail-review-item-date p {
  margin-bottom: 1rem;
}
.product-detail-review-item-verify {
  text-align: right;
}
.product-detail-review-item-likebox {
  text-align: right;
}
.product-detail-review-form-star.is-active .icon {
  color: #fedc70;
}
.product-detail-review-form-star .icon:hover {
  cursor: pointer;
}
@media (min-width: 768px) {
  .product-detail-review-rating {
    display: flex;
  }
  .product-detail-review-form-footer {
    display: flex;
  }
  .product-detail-review-form-footer .product-detail-review-form-actions {
    margin-left: auto;
  }
}
@media (max-width: 575.98px) {
  .product-detail-cross-selling .product-detail-tabs-content {
    display: block;
  }
  .product-detail-cross-selling .product-cross-selling-tab-navigation {
    display: none;
  }
  .product-detail-cross-selling .tab-pane {
    margin-top: 1.5rem;
    display: block;
    opacity: 1;
  }
  .product-detail-cross-selling .tab-pane .cms-element-title {
    display: block;
  }
  .product-detail-cross-selling .tab-pane .cms-element-title-paragraph {
    margin: 0;
  }
}
.product-detail-cross-selling .card {
  margin-top: 1.5rem;
}
.product-detail-cross-selling .cms-element-title {
  display: none;
}
.account-aside-header {
  background: none;
  color: #2b3136;
  font-weight: 700;
  margin-bottom: 1rem;
}
.account-aside-item {
  --bs-list-group-item-padding-x: 0;
  --bs-list-group-action-active-color: #2F5D50;
  --bs-list-group-action-active-bg: var(--bs-body-bg);
  --bs-list-group-action-hover-color: #2F5D50;
  --bs-list-group-action-hover-bg: var(--bs-body-bg);
  --bs-list-group-border-width: 0;
}
.account-aside-item.is-active {
  color: #2F5D50;
  font-weight: 700;
}
.account-aside-footer {
  background: none;
  margin-top: 1px;
  border-top: 1px solid #e3ddd3;
}
.account-aside-btn {
  line-height: normal;
  width: 100%;
  text-align: left;
  padding: 3px 0;
}
.account-aside-btn .icon {
  vertical-align: middle;
  margin-right: 0.25rem;
}
.account-aside-btn .icon svg {
  top: 0;
}
.account-guest-abort {
  border-top: 0;
}
@media (min-width: 768px) {
  .register-submit {
    text-align: right;
  }
}
.account-address .address-action-create {
  font-size: 1.1em;
  text-align: left;
}
.account-address .address-action-create:hover {
  border: 1px solid #e3ddd3;
}
.account-address .address-card .card-body .address:first-line {
  font-weight: 700;
}
.account-profile-mail-label {
  font-weight: 700;
}
.account-profile-change {
  font-weight: 700;
  font-size: 1.1875rem;
}
.order-item-status-badge {
  margin: 10px 0;
}
@media (max-width: 575.98px) {
  .order-item-status-badge {
    margin-top: 0;
  }
}
.order-table-header .row, .order-item-header .row, .order-detail-content-header .row {
  margin-right: 0;
  margin-left: 0;
}
.order-table-header .row > .col, .order-table-header .row > [class*="col-"], .order-item-header .row > .col, .order-item-header .row > [class*="col-"], .order-detail-content-header .row > .col, .order-detail-content-header .row > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
}
@media (max-width: 575.98px) {
  .order-table-header .row > .col, .order-table-header .row > [class*="col-"], .order-item-header .row > .col, .order-item-header .row > [class*="col-"], .order-detail-content-header .row > .col, .order-detail-content-header .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
.order-table-header {
  font-weight: 700;
}
.order-item-header .row > .order-table-header-heading, .order-item-header .row > .order-table-header-order-number {
  padding-right: 0;
  padding-left: 0;
}
.order-item-name {
  color: #4a545b;
}
.order-detail-content-header {
  margin-top: 1rem;
  font-weight: 700;
}
.order-detail-content-header .order-detail-content-header-cell[class*="col-"]:first-of-type {
  padding-left: 0;
}
.order-detail-content-header .order-detail-content-header-cell[class*="col-"]:last-of-type {
  padding-right: 0;
}
.order-item-product-name {
  color: #2b3136;
}
.order-item-product-name:hover {
  color: #2F5D50;
  text-decoration: none;
}
.order-item-product-name strong {
  font-weight: 700;
}
@media (min-width: 768px) {
  .order-item-product-image .product-image-link {
    justify-content: normal;
  }
  .order-item-product-image img {
    max-width: 100px;
  }
}
.order-item-number-value {
  font-weight: 700;
}
.order-pseudo-price-value {
  text-decoration: line-through;
}
.order-item-detail-list-item {
  margin: 0;
}
.order-item-detail-list-item.is-child {
  background-color: #f9f9f9;
}
.order-item-nested-icon {
  background-color: #798490;
}
.order-item-detail-footer {
  background-color: #f9f9f9;
}
.order-detail-table-footer {
  background-color: #f9f9f9;
}
.order-price-unit {
  font-size: 1.0625rem;
}
.order-item-variants {
  font-size: 1.0625rem;
}
.order-item-variants-properties-name {
  font-weight: 700;
}
.checkout-aside-summary {
  background-color: #f9f9f9;
}
.checkout-aside-summary, .checkout-aside-products {
  padding: 1rem;
}
@media (max-width: 767.98px) {
  .cart-table {
    border: 0;
  }
  .cart-table-body {
    padding: 0;
  }
}
.contact-action {
  display: flex;
  justify-content: flex-end;
}
.newsletter-action {
  display: flex;
  justify-content: flex-end;
}
/*
 * RehaComfort CMS-Blöcke.
 *
 * Nach dem Refactor gelten drei Regeln:
 *  1. Alle Maße kommen aus den Tokens des Themes (--rc-*).
 *  2. Nicht jede Information wird in eine weiße Karte gepackt – Flächen,
 *     Trennlinien und Weißraum sind gleichwertige Gestaltungsmittel.
 *  3. Hover ändert Farbe oder Rahmen, niemals die Geometrie.
 */
.rc-hero {
  position: relative;
  border-radius: var(--rc-radius-visual);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .rc-hero {
    min-height: 440px;
  }
}
@media (max-width: 575px) {
  .rc-hero {
    min-height: 500px;
  }
}
.rc-hero__media {
  position: absolute;
  inset: 0;
}
.rc-hero__media .cms-image-container, .rc-hero__media .cms-element-image {
  width: 100%;
  height: 100%;
}
.rc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(var(--rc-scrim-rgb), 0.92) 0%, rgba(var(--rc-scrim-rgb), 0.7) 42%, rgba(var(--rc-scrim-rgb), 0.1) 76%);
}
@media (max-width: 767px) {
  .rc-hero__media::after {
    background: linear-gradient(180deg, rgba(var(--rc-scrim-rgb), 0.25) 0%, rgba(var(--rc-scrim-rgb), 0.6) 45%, rgba(var(--rc-scrim-rgb), 0.93) 100%);
  }
}
.rc-hero__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: var(--rc-space-9) var(--rc-space-8);
  color: #fff;
}
@media (max-width: 991px) {
  .rc-hero__content {
    padding: var(--rc-space-7) var(--rc-space-6);
  }
}
@media (max-width: 767px) {
  .rc-hero__content {
    align-self: flex-end;
    padding: var(--rc-space-6) var(--rc-space-5);
  }
}
.rc-hero__content .rc-hero__kicker {
  margin-bottom: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-secondary);
  max-width: none;
}
.rc-hero__content h1, .rc-hero__content .h1 {
  color: #fff;
  font-size: var(--rc-fs-4xl);
  margin-bottom: var(--rc-space-4);
  /*
         * Die Hauptzusage wird nicht mitten im Wort getrennt.
         *
         * Gemessen am 30.08.2026, Zeilenumbrüche Zeichen für Zeichen über
         * Range.getBoundingClientRect ausgelesen (H1 30 px, Textkasten 285 px
         * bei 360, 302 px bei 390):
         *
         *   vorher  „Mehr Selbstständig-" / „keit im Alltag"
         *   nachher „Mehr" / „Selbstständigkeit im" / „Alltag"
         *
         * DER PREIS IST EINE DRITTE ZEILE, UND ER IST ES WERT. Die
         * automatische Trennung spart hier tatsächlich eine Zeile – sie tut
         * es aber, indem sie das Wort zerschneidet, um das es geht. Wer mit
         * 65 bis 80 Jahren auf ein Telefon schaut, liest „Selbstständig-" als
         * Wortende und muss den Satz noch einmal anfangen. Die Projektvorgabe
         * für diese Zielgruppe nennt „keine Trennung mitten im Wort"
         * ausdrücklich; drei ruhige Zeilen sind billiger als ein zerlegtes
         * Nutzenversprechen. Die Bühne wächst mit (`min-height`, keine feste
         * Höhe), es entsteht kein Überlauf – nachgemessen: scrollWidth =
         * innerWidth auf allen sieben Breiten.
         *
         * Die Trennung kommt aus den Theme-Grundstilen
         * (base/_typography.scss: `@media (max-width: 400px) { h1, h2, h3 {
         * hyphens: auto; overflow-wrap: break-word } }`). Als allgemeine Regel
         * ist sie richtig – sie verhindert, dass lange deutsche Komposita die
         * Seite waagerecht schiebbar machen. Deshalb wird sie hier nicht
         * abgeschafft, sondern nur für die eine Zeile zurückgenommen, für die
         * sie zu teuer ist. Im Fließtext der Seite bleibt sie unangetastet.
         *
         * Nur `hyphens` wird zurückgenommen. `overflow-wrap: break-word` aus
         * derselben Themeregel bleibt bestehen und fängt den Fall ab, dass ein
         * Wort doch einmal breiter ist als die Spalte.
         *
         * Die Regel steht hier und nicht im Theme, weil sie nur die Bühne des
         * CMS betrifft. Sie sticht die Themeregel über die Spezifität
         * (`.rc-hero__content h1` = 0,1,1 gegen `h1` = 0,0,1), nicht über die
         * Reihenfolge – die CMS-Stile werden VOR dem Theme übersetzt, auf
         * Reihenfolge wäre kein Verlass.
         */
  hyphens: manual;
  -webkit-hyphens: manual;
}
@media (max-width: 991px) {
  .rc-hero__content h1, .rc-hero__content .h1 {
    font-size: var(--rc-fs-3xl);
  }
}
@media (max-width: 575px) {
  .rc-hero__content h1, .rc-hero__content .h1 {
    font-size: 1.875rem;
  }
}
.rc-hero__content p {
  color: var(--rc-on-dark);
  font-size: var(--rc-fs-lg);
  line-height: 1.55;
  margin-bottom: var(--rc-space-6);
  max-width: 34ch;
}
.rc-hero__content p.rc-hero__actions {
  max-width: none;
}
@media (min-width: 1200px) {
  .rc-hero__content {
    max-width: 760px;
  }
}
.rc-hero__content .btn-primary {
  background-color: #fff;
  border-color: #fff;
  color: var(--rc-primary);
}
.rc-hero__content .btn-primary:hover, .rc-hero__content .btn-primary:focus-visible {
  background-color: var(--rc-secondary-soft);
  border-color: var(--rc-secondary-soft);
  color: var(--rc-primary-dark);
}
.rc-hero__content .btn-secondary {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.rc-hero__content .btn-secondary:hover, .rc-hero__content .btn-secondary:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}
.rc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
  margin-bottom: var(--rc-space-6);
}
@media (max-width: 575px) {
  .rc-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .rc-hero__actions .btn {
    width: 100%;
  }
}
.rc-need-selector[id] {
  scroll-margin-top: 120px;
  outline: none;
}
.rc-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-2) var(--rc-space-5);
  margin-top: var(--rc-space-5);
  padding-top: var(--rc-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  list-style: none;
  padding-left: 0;
}
.rc-hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  color: var(--rc-on-dark);
  font-size: var(--rc-fs-xs);
}
.rc-trust-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-4);
  padding: var(--rc-space-5) 0;
  border-top: 1px solid var(--rc-border);
  border-bottom: 1px solid var(--rc-border);
}
@media (min-width: 576px) {
  .rc-trust-bar {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--rc-space-6);
  }
}
@media (min-width: 992px) {
  .rc-trust-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}
.rc-trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
}
.rc-trust-bar__item > .icon {
  color: var(--rc-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}
.rc-trust-bar__item > .icon svg {
  width: 22px;
  height: 22px;
}
.rc-trust-bar__item p {
  margin: 0;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  line-height: 1.5;
}
.rc-trust-bar__item strong {
  display: block;
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
}
.rc-need-selector__grid, .rc-guide-grid, .rc-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-4);
}
@media (min-width: 576px) {
  .rc-need-selector__grid, .rc-guide-grid, .rc-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .rc-grid--cols-1 {
    grid-template-columns: 1fr;
  }
  .rc-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .rc-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .rc-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/*
 * Bedarfskacheln.
 *
 * Vorher: dünn umrandete Kästen mit kleiner Überschrift, kleinerer Unterzeile
 * und einem 9 Pixel großen Winkel am rechten Rand. Auf einer 1280 Pixel
 * breiten Seite waren das sechs graue Rechtecke ohne Blickpunkt.
 *
 * Jetzt: durchnummeriert, mit deutlich größerer Überschrift und einem
 * Terrakotta-Strich als Anker. Die Nummer ist kein Schmuck – sie macht aus
 * sechs gleichrangigen Kästen eine Reihe, die man abarbeiten kann.
 *
 * Bewegung findet nicht statt: Der Benchmark verlangt Übergänge in Farbe und
 * Deckkraft, nicht in Position (Seite 36). Ein wanderndes Ziel ist bei
 * Zielgruppen mit Tremor ein echtes Problem.
 */
.rc-need-selector__grid {
  counter-reset: rc-bedarf;
}
.rc-need-selector__tile {
  position: relative;
  counter-increment: rc-bedarf;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-6);
  transition: border-color var(--rc-dur-card) var(--rc-ease), background-color var(--rc-dur-card) var(--rc-ease), box-shadow var(--rc-dur-card) var(--rc-ease);
}
.rc-need-selector__tile::before {
  content: counter(rc-bedarf,decimal-leading-zero);
  display: block;
  margin-bottom: var(--rc-space-4);
  padding-bottom: var(--rc-space-3);
  border-bottom: 2px solid var(--rc-accent);
  width: 2.5em;
  color: var(--rc-accent);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-bold);
  letter-spacing: 0.12em;
}
.rc-need-selector__tile h3, .rc-need-selector__tile .h3 {
  font-size: var(--rc-fs-xl);
  margin: 0 0 var(--rc-space-2);
  line-height: var(--rc-lh-heading);
}
.rc-need-selector__tile h3 a, .rc-need-selector__tile .h3 a {
  color: var(--rc-text);
  text-decoration: none;
}
.rc-need-selector__tile h3 a::after, .rc-need-selector__tile .h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.rc-need-selector__tile p {
  margin: 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-base);
}
.rc-need-selector__tile:hover, .rc-need-selector__tile:focus-within {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-softer);
  box-shadow: var(--rc-shadow);
}
.rc-need-selector__tile:hover h3 a, .rc-need-selector__tile:hover .h3 a, .rc-need-selector__tile:focus-within h3 a, .rc-need-selector__tile:focus-within .h3 a {
  color: var(--rc-primary);
}
.rc-need-selector__tile:hover .rc-need-selector__arrow, .rc-need-selector__tile:focus-within .rc-need-selector__arrow {
  border-color: var(--rc-primary);
}
.rc-need-selector__arrow {
  position: absolute;
  right: var(--rc-space-6);
  bottom: var(--rc-space-6);
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--rc-border-strong);
  border-right: 2px solid var(--rc-border-strong);
  transform: rotate(45deg);
  transition: border-color var(--rc-dur-card) var(--rc-ease);
}
/*
 * ── Kategorie-Mosaik ─────────────────────────────────────────
 *
 * Vier gleich große Kacheln nebeneinander gaben der Startseite vier
 * gleichrangige Angebote, zwischen denen man sich erst entscheiden muss.
 * Jetzt eine herausgestellte Kachel links über zwei Reihen, zwei gestapelte
 * rechts, darunter eine Reihe aus drei – sechs Kacheln für alle
 * Hauptkategorien.
 *
 * Die Kacheln setzen ihre Rasterfelder selbst; die Höhe kommt aus den
 * Reihenhöhen, nicht aus einem Seitenverhältnis. Ein Seitenverhältnis auf der
 * großen Kachel und eines auf den kleinen ergäben zwei Spalten, die unten
 * nicht auf derselben Linie enden.
 */
.rc-category-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rc-space-4);
}
@media (min-width: 992px) {
  .rc-category-tiles {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, clamp(170px, 16vw, 225px)) clamp(240px, 22vw, 300px);
  }
}
.rc-category-tiles__tile {
  position: relative;
  border-radius: var(--rc-radius-card);
  overflow: hidden;
  aspect-ratio: 0.75;
  background-color: var(--rc-primary-soft);
}
@media (min-width: 992px) {
  .rc-category-tiles__tile {
    aspect-ratio: auto;
  }
}
.rc-category-tiles__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 992px) {
  .rc-category-tiles__tile--1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .rc-category-tiles__tile--2 {
    grid-column: 3;
    grid-row: 1;
  }
  .rc-category-tiles__tile--3 {
    grid-column: 3;
    grid-row: 2;
  }
  .rc-category-tiles__tile--4 {
    grid-column: 1;
    grid-row: 3;
  }
  .rc-category-tiles__tile--5 {
    grid-column: 2;
    grid-row: 3;
  }
  .rc-category-tiles__tile--6 {
    grid-column: 3;
    grid-row: 3;
  }
  .rc-category-tiles__tile--1 .rc-category-tiles__text {
    padding: var(--rc-space-6);
  }
  .rc-category-tiles__tile--1 .rc-category-tiles__text h3, .rc-category-tiles__tile--1 .rc-category-tiles__text .h3 {
    font-size: var(--rc-fs-2xl);
  }
  .rc-category-tiles__tile--1 .rc-category-tiles__text p {
    font-size: var(--rc-fs-base);
  }
}
/*
 * Zwischen 576 und 991 Pixel läuft die große Kachel über beide Spalten – sonst
 * stünde sie neben einer kleinen und beide wären gleich hoch, womit die
 * Heraushebung verloren geht.
 */
@media (min-width: 576px) and (max-width: 991px) {
  .rc-category-tiles__tile--1 {
    grid-column: 1 / 3;
    aspect-ratio: 2.3333333333;
  }
}
.rc-category-tiles__image, .rc-category-tiles__image .cms-element-image, .rc-category-tiles__image .cms-image-container {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}
.rc-category-tiles__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--rc-scrim-rgb), 0) 42%, rgba(var(--rc-scrim-rgb), 0.85) 100%);
  transition: background var(--rc-dur-card) var(--rc-ease);
}
.rc-category-tiles__tile:hover .rc-category-tiles__overlay {
  background: linear-gradient(180deg, rgba(var(--rc-scrim-rgb), 0.1) 30%, rgba(var(--rc-scrim-rgb), 0.92) 100%);
}
.rc-category-tiles__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--rc-space-8) var(--rc-space-4) var(--rc-space-5);
  /*
     * Eigener Verlauf hinter dem Text, zusätzlich zum Verlauf über der ganzen
     * Kachel.
     *
     * Der Kachelverlauf ist auf die Kachelhöhe bezogen und beginnt bei 42 %.
     * Auf den flachen Kacheln des Mosaiks (225 Pixel) fängt der Text weiter
     * oben an als der Verlauf – „Elektromobile" stand dort in Weiß auf einem
     * hellen Himmel. Dieser Verlauf hängt am Textblock und greift deshalb bei
     * jeder Kachelhöhe.
     */
  background: linear-gradient(180deg, rgba(var(--rc-scrim-rgb), 0) 0%, rgba(var(--rc-scrim-rgb), 0.86) 45%);
}
.rc-category-tiles__text h3, .rc-category-tiles__text .h3 {
  margin: 0;
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
  color: #fff;
  /*
         * Auf dem Telefon die H3-Stufe, nicht die Label-Stufe.
         *
         * Hier stand `var(--rc-fs-sm)`. Gemessen am 30.08.2026 bei 360 und
         * 390 px für alle sechs Kacheln: h3 = 17 px, Beschreibung = 17 px.
         * 17 px ist laut docs/14-designsystem-2026.md:41-44 die Stufe
         * „Label, Meta" – die sechs Kacheltitel waren damit genauso groß wie
         * das Preis-Kleingedruckte „Niedrigster Gesamtpreis der letzten
         * 30 Tage", obwohl sie der Haupteinstieg ins Sortiment sind. Ab
         * 768 px trägt dieselbe Überschrift 22 px.
         *
         * `--rc-fs-xl` liefert auf der Telefonstufe 23 px – genau der Wert,
         * den die Tabelle für H3 mobil vorgibt. Der Platz dafür ist da: Die
         * Kacheln stehen unter 576 px einspaltig über die volle Breite.
         */
}
@media (max-width: 575px) {
  .rc-category-tiles__text h3, .rc-category-tiles__text .h3 {
    font-size: var(--rc-fs-xl);
  }
}
.rc-category-tiles__text h3 a, .rc-category-tiles__text .h3 a {
  color: #fff;
}
/*
 * Die ganze Kachel ist klickbar, nicht nur der Knopf.
 *
 * Der Betreiber: „mache auf der startseiten bei den kategorien die kompletten
 * boxen anklickbar." Bei einer 400 × 300 Pixel großen Kachel war bisher ein
 * Knopf von 140 × 36 Pixeln das Ziel – 4 % der Fläche.
 *
 * Der Bezugsrahmen eines absolut positionierten Pseudoelements ist der nächste
 * positionierte Vorfahr. Das ist hier NICHT die Kachel, sondern
 * .rc-category-tiles__text (position: absolute, am unteren Rand verankert).
 * `inset: 0` deckte deshalb nur den Textblock ab – genau der Fehler, den die
 * alte Regel an `h3 a::after` hatte.
 *
 * Der Textblock reicht bis zur Unterkante; nach oben fehlt die Bildhöhe. 200vh
 * überschreitet jede vorkommende Kachelhöhe (größte gemessene: 300 px am
 * Schreibtisch, rund 500 px am Telefon mit 3 : 4). Über die Kachel hinaus
 * wächst die Fläche dabei nicht: .rc-category-tiles__tile hat `overflow:
 * hidden`, und geklippte Fläche ist auch für die Trefferprüfung weg.
 * Nachgemessen mit elementFromPoint über und neben der Kachel.
 */
.rc-category-tiles__text a[href]::after {
  content: "";
  position: absolute;
  top: -200vh;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.rc-category-tiles__tile:hover .btn, .rc-category-tiles__tile:focus-within .btn {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}
/*
 * Servicebereich als Datenblatt statt als Kachelreihe.
 *
 * Vorher vier schmale Spalten mit 17-Pixel-Text – auf 1280 Pixel Breite blieben
 * je Leistung rund 280 Pixel, in denen „Auf Wunsch bis zur Verwendungsstelle –
 * inklusive Aufbau, Einweisung und Mitnahme der Verpackung" über vier Zeilen
 * umbrach. Vier solcher Textblöcke nebeneinander liest niemand.
 *
 * Jetzt eine Tafel mit Zeilen: links die Leistung, rechts was sie umfasst.
 * Das ist die Darstellung, die Hersteller für ihre Serviceübersichten nutzen –
 * ruhig, dicht und ohne dass irgendetwas nach Kachel aussieht.
 */
.rc-service-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  overflow: hidden;
  /*
     * Die Tafel ist eine Karte – ihre Fläche muss dort enden, wo die Flächen
     * der Nachbarn enden.
     *
     * Gemessen am 30.08.2026 (gemalte Fläche je Baustein):
     *   1280 px  Tafel 0..1280 – genau auf der Fensterkante, während die
     *            Kategoriekacheln bei 20 beginnen und der Blockcontainer bei
     *            20..1260 liegt
     *    768 px  Tafel 0..768 gegen 20..748 der Nachbarn
     *   1440 px  Tafel 20..1420 gegen 40..1400 des Blockinhalts
     * Die obere linke Rundung (border-radius) traf damit auf 1280 px genau die
     * Fensterecke – eine Karte ohne Rand ringsum sieht nicht abgesetzt aus,
     * sondern angeschnitten.
     *
     * Ursache ist dieselbe wie beim Kampagnenband ein paar hundert Zeilen
     * weiter unten: `.cms-block-container-row.row` trägt `margin-inline: -20px`
     * und erwartet, dass ihre direkten Kinder die Rinne selbst tragen.
     * Bootstrap gibt sie ihnen als INNENabstand (`.row > *`) – für ein Element
     * ohne eigene Fläche genau richtig, für eine Karte falsch: Die Fläche wird
     * mitgemalt, sie beginnt also 20 px weiter außen als der Inhalt.
     *
     * Deshalb hier derselbe Weg wie beim Kampagnenband: Rinne als
     * Außenabstand, und die Breite zieht sie ab. Nachgemessen: 1280 px →
     * 20..1260, auf einer Linie mit Kacheln, Markenband und FAQ.
     */
  padding-inline: 0;
  margin-inline: calc(var(--bs-gutter-x, 40px) * 0.5);
  width: calc(100% - var(--bs-gutter-x, 40px));
}
/*
 * Ein Sektionskopf bringt seinen Abstand nach unten schon mit.
 *
 * GEMESSEN am 30.08.2026, Abstand von der letzten Kopfzeile bis zum ersten
 * Inhaltselement, über alle vergleichbaren Abschnitte der Startseite:
 *
 *   Markenband        24 px
 *   Bedarfsfinder     32 px
 *   Produktreihe 1–3  je 48 px
 *   Servicebereich    96 px bis 1024 px, 112 px ab 1280 px   ← Ausreißer
 *
 * Das 2,3-fache des nächstgrößeren Werts. Zusammen mit den 96 px
 * Sektionsinnenabstand stand zwischen der Unterzeile „Wir begleiten Sie von
 * der Beratung bis nach der Lieferung." und der Tafel ein leeres Sandband von
 * rund 200 px – auf einem 900 px hohen Fenster ein halber Bildschirm Nichts.
 *
 * Die Ursache ist ein Aufbauunterschied, kein Gestaltungswunsch: Alle übrigen
 * Abschnitte führen Kopf und Inhalt in EINEM CMS-Block, der Servicebereich in
 * zwei (`cms-block-text` für den Kopf, `cms-block-rc-service-cards` für die
 * Tafel – siehe 03-homepage.mjs, Abschnitt 'services'). Damit greift zusätzlich
 * der Blockrhythmus des Themes (`.cms-section .cms-block + .cms-block`,
 * layout/_cms-layout.scss: --rc-space-7 mobil, --rc-space-8 ab 992 px) und
 * addiert sich auf den Abstand, den `.rc-section-head` ohnehin trägt
 * (utilities/_sections.scss: `margin: 0 auto var(--rc-space-7)` = 48 px).
 * 48 + 64 = 112, gemessen exakt.
 *
 * Zweimal derselbe Abstand für dieselbe Beziehung ist einmal zu viel. Trägt
 * der vorangehende Block einen Sektionskopf, entfällt der Blockrhythmus; übrig
 * bleiben die 48 px des Kopfes – der Wert, den die drei Produktreihen zeigen.
 *
 * Warum die Regel hier steht und nicht im Theme: Der Blockrhythmus gehört dem
 * Theme, der Sonderfall gehört zum CMS-Baustein. Sie sticht die Themeregel
 * über die Spezifität (0,4,0 gegen 0,3,0), nicht über die Reihenfolge – die
 * CMS-Stile werden VOR dem Theme übersetzt, auf Reihenfolge wäre kein Verlass.
 */
.cms-section .cms-block:has(.rc-section-head) + .cms-block {
  margin-top: 0;
}
.rc-service-cards .rc-service-cards__card, .rc-service-cards .rc-service-cards__card.rc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-2);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rc-border);
  border-radius: 0;
  padding: var(--rc-space-6);
  box-shadow: none;
}
.rc-service-cards .rc-service-cards__card:first-child, .rc-service-cards .rc-service-cards__card.rc-card:first-child {
  border-top: 0;
}
.rc-service-cards .rc-service-cards__card > .cms-element-text, .rc-service-cards .rc-service-cards__card.rc-card > .cms-element-text {
  display: contents;
}
@media (min-width: 768px) {
  .rc-service-cards .rc-service-cards__card, .rc-service-cards .rc-service-cards__card.rc-card {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--rc-space-6);
    align-items: baseline;
  }
}
.rc-service-cards .rc-service-cards__card h3, .rc-service-cards .rc-service-cards__card .h3, .rc-service-cards .rc-service-cards__card.rc-card h3, .rc-service-cards .rc-service-cards__card.rc-card .h3 {
  font-size: var(--rc-fs-lg);
  color: var(--rc-text);
  margin: 0;
  line-height: var(--rc-lh-heading);
}
.rc-service-cards .rc-service-cards__card p, .rc-service-cards .rc-service-cards__card.rc-card p {
  margin: 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
  max-width: var(--rc-measure);
}
.rc-consultation-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-6);
  background-color: var(--rc-primary);
  color: #fff;
  border-radius: var(--rc-radius-visual);
  padding: var(--rc-space-8);
  align-items: center;
  overflow: hidden;
}
.rc-consultation-cta > * {
  min-width: 0;
}
@media (min-width: 992px) {
  .rc-consultation-cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
    padding: var(--rc-space-8) var(--rc-space-9);
  }
}
@media (max-width: 767px) {
  .rc-consultation-cta {
    padding: var(--rc-space-6) var(--rc-space-5);
  }
}
.rc-consultation-cta h2, .rc-consultation-cta .h2 {
  color: #fff;
  margin-bottom: var(--rc-space-3);
}
.rc-consultation-cta p {
  color: var(--rc-on-dark);
  margin-bottom: var(--rc-space-5);
  max-width: 48ch;
}
.rc-consultation-cta .rc-consultation-cta__phone {
  background-color: #fff;
  border-color: #fff;
  color: var(--rc-primary);
}
.rc-consultation-cta .rc-consultation-cta__phone .icon {
  color: var(--rc-primary);
}
.rc-consultation-cta .rc-consultation-cta__phone:hover, .rc-consultation-cta .rc-consultation-cta__phone:focus-visible {
  background-color: var(--rc-secondary-soft);
  border-color: var(--rc-secondary-soft);
  color: var(--rc-primary-dark);
}
@media (max-width: 575px) {
  .rc-consultation-cta .rc-consultation-cta__phone {
    width: 100%;
  }
}
.rc-consultation-cta__hours {
  margin: var(--rc-space-3) 0 0 !important;
  color: var(--rc-on-dark-muted) !important;
  font-size: var(--rc-fs-xs);
}
/*
 * Bildhälfte des Beratungsblocks.
 *
 * Das Seitenverhältnis muss am BEHÄLTER hängen, nicht am Bild.
 *
 * Gemessen am 25.08.2026 auf /Angebote/ bei 1440 px: Die Spalte war 518 px
 * breit und 0 px hoch, das Bild dadurch unsichtbar – im Screenshot des
 * Betreibers eine leere grüne Fläche. Ursache ist der Kern: Er gibt
 * `.cms-image-container.is-cover` die Höhe 100 % und dem Bild darin ebenfalls.
 * Prozentangaben brauchen eine Bezugshöhe; die gab es in dieser Kette nicht,
 * also kam 0 heraus. Ein `aspect-ratio` am Bild half nicht, weil das Bild in
 * einem 0 Pixel hohen Behälter mit `overflow: hidden` steckt.
 *
 * Mit `height: auto` an Element und Behälter und dem Seitenverhältnis am
 * Behälter ergeben sich aus 518 px Breite 388 px Höhe.
 */
.rc-consultation-cta__media .cms-element-image, .rc-consultation-cta__media .cms-image-container {
  height: auto;
  min-height: 0;
}
.rc-consultation-cta__media .cms-image-container {
  aspect-ratio: 1.3333333333;
  border-radius: var(--rc-radius-card);
  overflow: hidden;
}
.rc-consultation-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-faq {
  /*
     * Aufklappen ohne gemessene Pixelhöhe.
     *
     * `height: auto` lässt sich nicht animieren, ein per JavaScript gemessener
     * Pixelwert wird falsch, sobald der Text bei anderer Fensterbreite anders
     * umbricht – und bei einer Zielgruppe, die die Schrift vergrößert, ist das
     * der Normalfall.
     *
     * Ein Raster mit einer Zeile von 0fr auf 1fr kann der Browser dagegen
     * selbst interpolieren. Die innere Hülle kappt den Überlauf; `visibility`
     * schaltet erst am Ende der Bewegung um, damit der zugeklappte Text nicht
     * per Tabulator erreichbar bleibt.
     */
}
.rc-faq .rc-faq__item {
  border-bottom: 1px solid var(--rc-border);
}
.rc-faq .rc-faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rc-space-4);
  background: none;
  border: 0;
  padding: var(--rc-space-4) 0;
  min-height: var(--rc-control-lg);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--rc-dur-btn) var(--rc-ease);
}
.rc-faq .rc-faq__question:hover {
  color: var(--rc-primary);
}
.rc-faq .rc-faq__question::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--rc-primary);
  border-bottom: 2px solid var(--rc-primary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--rc-dur-dropdown) var(--rc-ease);
  flex-shrink: 0;
}
.rc-faq .rc-faq__question[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-2px);
}
.rc-faq .rc-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  color: var(--rc-text-soft);
  max-width: var(--rc-measure);
  transition: grid-template-rows var(--rc-dur-drawer) var(--rc-ease);
}
.rc-faq .rc-faq__answer-inner {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--rc-dur-dropdown) var(--rc-ease), visibility 0s linear var(--rc-dur-drawer);
}
.rc-faq .rc-faq__answer-inner p {
  margin: 0 0 var(--rc-space-3);
  line-height: var(--rc-lh-body);
}
.rc-faq .rc-faq__answer-inner > *:last-child {
  margin-bottom: var(--rc-space-5);
}
.rc-faq .rc-faq__item.is-open .rc-faq__answer {
  grid-template-rows: 1fr;
}
.rc-faq .rc-faq__item.is-open .rc-faq__answer-inner {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s, 0s;
}
@media (prefers-reduced-motion: reduce) {
  .rc-faq .rc-faq__answer, .rc-faq .rc-faq__answer-inner, .rc-faq .rc-faq__question::after {
    transition: none;
  }
}
.rc-guide-grid {
  gap: var(--rc-space-5);
}
.rc-guide-grid__card {
  position: relative;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--rc-dur-card) var(--rc-ease);
}
.rc-guide-grid__card:hover {
  border-color: var(--rc-primary);
}
.rc-guide-grid__image {
  aspect-ratio: 1.3333333333;
  overflow: hidden;
  background-color: var(--rc-primary-soft);
}
.rc-guide-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-guide-grid__text {
  padding: var(--rc-space-4) var(--rc-space-5) var(--rc-space-5);
}
.rc-guide-grid__text h3, .rc-guide-grid__text .h3 {
  font-size: var(--rc-fs-lg);
  margin: 0 0 var(--rc-space-2);
  line-height: var(--rc-lh-heading);
}
.rc-guide-grid__text h3 a, .rc-guide-grid__text .h3 a {
  color: var(--rc-text);
}
.rc-guide-grid__text h3 a::after, .rc-guide-grid__text .h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.rc-guide-grid__text p {
  margin: 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1.6;
}
/*
 * ── Artikel ──────────────────────────────────────────────────
 *
 * Typografie, Listen und Tabellen der Ratgeberartikel stehen NICHT mehr hier,
 * sondern gemeinsam mit den Service- und Rechtsseiten in
 * `RehaComfortTheme/…/scss/pages/_service.scss` unter `.rc-longform`.
 *
 * Grund: Beide Regelwerke beschrieben dieselbe Sache und liefen auseinander.
 * Gemessen am 24.08.2026 bei 1440 px: Absatzbreite 791,1 px hier gegen
 * 707,8 px dort, H2 34 px gegen 27 px, H3 27 px gegen 22 px, Listeneinzug
 * 32 px gegen 24 px, Tabellenzelle 12/12 px gegen 12/16 px, Zebra nur dort.
 *
 * Hier bleibt nur, was wirklich artikelspezifisch ist: das Aufmacherbild.
 */
.rc-article__media {
  aspect-ratio: 1.7777777778;
  /*
     * Bild und Text bekommen dieselbe linke Kante.
     *
     * Gemessen am 24.08.2026 bei 1440 px: Das Aufmacherbild lag bei x=346,7
     * und war 746,7 px breit, die Textsäule begann bei x=290 und war 860 px
     * breit – 56,7 px Versatz zwischen Bildkante und Überschrift, auf jeder
     * der zehn Ratgeberseiten.
     *
     * Ursache: `max-width: 900px` konnte nie greifen, weil `max-height: 420px`
     * vorher zuschlug – bei 16/9 gehören zu 420 px Höhe genau 746,7 px
     * Breite. Der Deckel war totes Recht, und die Zentrierung schob das
     * schmalere Bild in die Mitte der Säule.
     *
     * Jetzt bestimmt die Säulenbreite die Bildbreite: 820 px, bei 16/9 also
     * 461,3 px hoch (41 px mehr als bisher). Bild und Text stehen bündig.
     */
  max-width: 820px;
  margin: 0 auto var(--rc-space-7);
  overflow: hidden;
  border-radius: var(--rc-radius-visual);
  background-color: var(--rc-primary-soft);
}
.rc-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-image-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-6);
  align-items: center;
}
@media (min-width: 768px) {
  .rc-image-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--rc-space-8);
  }
}
.rc-image-text p {
  color: var(--rc-text-soft);
}
/*
 * Bild im Text-Bild-Block: Höhe erzwingen.
 *
 * Der Slot ist als `cover` konfiguriert. Shopware setzt dann
 * `.cms-image-container.is-cover { height: 100% }` – und die Elternkette hat
 * keine eigene Höhe. Das Ergebnis war ein Bild mit 648 Pixel Breite und
 * 0 Pixel Höhe: geladen, im Markup vorhanden, unsichtbar. Auf der Startseite
 * fehlte damit das Foto im Abschnitt „Fachhandel für Reha- und
 * Pflegehilfsmittel", ohne dass irgendetwas einen Fehler gemeldet hätte.
 *
 * Die Höhe kommt jetzt aus dem Seitenverhältnis des Bildes selbst; die
 * Zwischencontainer werden ausdrücklich auf `auto` zurückgesetzt, sonst
 * gewinnt die Kernregel.
 */
.rc-image-text__media {
  /*
     * Die Kernregel lautet `.cms-image-container.is-cover .cms-image` und wiegt
     * drei Klassen. Eine Regel aus Elternklasse plus Elementname wiegt zwei und
     * verlor – das Bild behielt `height: 100%` und blieb bei null. Deshalb hier
     * dieselbe Kette plus die eigene Klasse.
     */
}
.rc-image-text__media .cms-element-image, .rc-image-text__media .cms-image-container, .rc-image-text__media .cms-image-container.is-cover {
  height: auto;
  min-height: 0;
}
.rc-image-text__media .cms-image-container.is-cover .cms-image, .rc-image-text__media .cms-image-container .cms-image, .rc-image-text__media img {
  /*
         * position: static ist der entscheidende Teil.
         *
         * Die Kernregel für den Anzeigemodus „cover" nimmt das Bild mit
         * position: absolute aus dem Fluss. Die frühere Reparatur gab ihm zwar wieder eine Höhe,
         * ließ es aber außerhalb des Flusses – der Container blieb 0 Pixel
         * hoch (gemessen 335×0, 332×0, 648×0), und das Foto legte sich über
         * die Überschrift „Fachhandel für Reha- und Pflegehilfsmittel“ und
         * die ersten beiden Absätze. Bei 375 Pixel war der Text vollständig
         * unlesbar.
         */
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  border-radius: var(--rc-radius-visual);
  object-fit: cover;
  aspect-ratio: 1.3333333333;
}
.rc-feature-grid {
  gap: var(--rc-space-5) var(--rc-space-6);
}
.rc-feature-grid__item {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  background: transparent;
  border: 0;
  padding: 0;
}
.rc-feature-grid__item > .icon {
  color: var(--rc-secondary);
  flex-shrink: 0;
  margin-top: 3px;
}
.rc-feature-grid__item h3, .rc-feature-grid__item .h3 {
  font-size: var(--rc-fs-lg);
  margin: 0 0 var(--rc-space-1);
}
.rc-feature-grid__item p {
  margin: 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1.6;
}
.rc-related-cats h2, .rc-related-cats .h2 {
  font-size: var(--rc-fs-xl);
  margin-bottom: var(--rc-space-4);
}
.rc-related-cats p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  margin: 0;
}
.rc-related-cats a {
  display: inline-flex;
  align-items: center;
  min-height: var(--rc-control-sm);
  padding: 0 var(--rc-space-4);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  transition: background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-related-cats a:hover {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
}
.rc-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  background-color: var(--rc-primary-soft);
  border-left: 3px solid var(--rc-secondary);
  border-radius: 0 var(--rc-radius-card) var(--rc-radius-card) 0;
  padding: var(--rc-space-4) var(--rc-space-5);
}
.rc-highlight > .icon {
  color: var(--rc-primary);
  flex-shrink: 0;
  margin-top: 3px;
}
.rc-highlight p {
  margin: 0;
  font-size: var(--rc-fs-sm);
  line-height: 1.6;
}
.rc-video {
  display: grid;
  gap: var(--rc-space-5);
}
@media (min-width: 992px) {
  .rc-video {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--rc-space-8);
  }
}
.rc-video__media img {
  width: 100%;
  border-radius: var(--rc-radius-visual);
  aspect-ratio: 1.7777777778;
  object-fit: cover;
}
.cms-element-product-slider {
  /*
     * `.cms-element-title-paragraph` steht seit dem 30.08.2026 mit in der
     * Auswahl.
     *
     * Die Reihenüberschrift ist jetzt ein echtes h2 statt eines Absatzes
     * (element/cms-element-product-slider.html.twig – der Grund steht dort).
     * Damit bringt sie die Größe der Theme-Grundtypografie mit, und die sticht
     * die geerbte Größe des umschließenden `.cms-element-title`. Ohne diese
     * Zeile hätte die Auszeichnungsänderung die Größe still an eine andere
     * Datei abgegeben.
     *
     * Und die Telefonstufe kommt aus dem Token statt aus einer Zahl.
     * Hier stand `1.5rem` = 24 px – abgeschrieben von der pauschalen
     * Mobilregel des Themes (base/_typography.scss:70), nicht aus der
     * Schriftskala. docs/14-designsystem-2026.md:40 nennt für H2 mobil 27 px,
     * und genau die liefert `--rc-fs-2xl` auf der Telefonstufe. Gemessen am
     * 30.08.2026 bei 360 px: acht echte H2 der Startseite mit 27, 27, 23, 27,
     * 24, 24, 24, 24 px – fünf Werte für eine Ebene. Die drei Reihen lagen mit
     * 24 px in der unteren Gruppe. Der äußere `font-size`-Wert deckt beide
     * Stufen ab, die Sonderregel entfällt ersatzlos.
     */
  /*
     * ── Blätterpfeile: links und rechts neben der Reihe ──────────────────
     *
     * Betreibervorgabe: seitlich, nicht unter der Reihe. Die drei Gründe,
     * die sie früher nach unten gedrängt haben, gelten weiter – sie sind
     * hier einzeln gelöst statt umgangen.
     *
     * ZUR VORGESCHICHTE (gemessen, gilt unverändert):
     * Der Kern gibt den Knöpfen 30 × 65 px bei left/right: -10px, und
     * .base-slider hat overflow: hidden. Ein Drittel jedes Knopfes lag
     * außerhalb des beschneidenden Kastens: An allen vier Ecken lieferte
     * elementsFromPoint außen den Blockrahmen und innen eine Produktkachel,
     * 0 von 24 Knöpfen bestanden die Probe. Und product-slider.plugin.js
     * rechnet items = floor(clientWidth − padding-links − padding-rechts,
     * geteilt durch 300 + 30). Alles, was diese Innenbreite verkleinert,
     * kostet Karten: bei 768 px sind 678 px innen genau 2 Karten, 608 px
     * nur noch 1.
     *
     * (a) NICHT ABGESCHNITTEN – der beschneidende Kasten wandert nach
     *     außen, statt aufgegeben zu werden.
     *     Gemessen: .base-slider trägt overflow: hidden, und overflow:
     *     visible ist dort KEIN gangbarer Weg. Der Kern setzt in
     *     _base-slider.scss ausdrücklich `.tns-ovh { overflow: visible }`
     *     und überlässt das Beschneiden allein dem .base-slider. Nimmt man
     *     ihm das weg, klippt niemand mehr die Spur. Im Versuch gemessen
     *     (Startseite, erste Reihe): die Spur wuchs bei 1440 px von 1310
     *     auf 3573 px, die letzte Kachel endete bei x = 3638, und die
     *     scrollWidth der Sektion stieg von 1440 auf 5425 px – bei 390 px
     *     von 390 auf 4005 px. Die Dokumentbreite blieb nur deshalb bei
     *     1440 px, weil .cms-section selbst overflow: hidden trägt; sichtbar
     *     wären trotzdem alle acht Kacheln quer über die Sektion gewesen
     *     statt drei.
     *
     *     Stattdessen behält .base-slider sein overflow: hidden und wächst
     *     nur nach außen, ohne die Reihe zu bewegen: negativer Außenabstand
     *     und exakt derselbe Betrag zusätzlich als Innenabstand. Die
     *     Inhaltsfläche bleibt auf den Millimeter, wo sie war, nur der
     *     Rahmen des Kastens reicht weiter, und der Knopf liegt darin.
     *     Nachgerechnet bei 1440 px: früher clientWidth 1360 − 2 × 25 =
     *     1310 innen, jetzt 1432 − 2 × 61 = 1310 innen. Gleiche Zahl,
     *     gleiche Kartenbreite (447 px), gleiche Kartenzahl.
     *
     *     Weil dieser Kasten die Spur nicht mehr an der alten Stelle
     *     beschneidet, bekommt die Spur ihre eigene Kante zurück – siehe die
     *     Regel für .tns-ovh weiter unten. Nach demselben Prinzip: Kante
     *     versetzt, Inhalt unverändert.
     *
     * (b) NICHT AUF DEN KACHELN, wo Platz ist.
     *     Gemessen wurde das freie Band zwischen Fensterkante und erster
     *     Kachel: 45 px bis 1400 px Fensterbreite (20 px Containerrand +
     *     25 px .has-nav-outside), 65 px bei 1440 px, 145 px bei 1600 px.
     *     Ab 1440 px passt der 48-px-Knopf vollständig hinein – er steht
     *     dann 12 px von der Fensterkante und 5 px vor der Kachel.
     *     Darunter reicht das Band nicht; dort überlappt der Knopf die
     *     Kachel um 15 px (von 330 px Kachelbreite bei 390 px), sitzt aber
     *     weiter 12 px von der Fensterkante entfernt – am Daumen, nicht an
     *     der Displaykante, wo die Wischgeste des Systems liegt. Damit er
     *     sich dort absetzt, trägt er eigene Fläche, Rahmen und Schatten.
     *
     * (c) 48 × 48 px, über der Vorgabe von 44.
     *     Weil die Innenbreite unverändert bleibt, kostet die Größe hier
     *     keine einzige Karte mehr – nachgemessen bei 390, 768, 1024 und
     *     1440 px identisch zu vorher. 56 px (--rc-control-lg) wären
     *     rechnerisch ebenfalls möglich, scheitern aber am Band: sie ließen
     *     bei 1440 px nur 4 px bis zur Fensterkante und deckten bei 390 px
     *     23 statt 15 px der Kachel zu. 48 px ist die größte Stufe, die
     *     beides erträgt.
     *
     * SENKRECHT: auf der Bildmitte, nicht auf der Kartenmitte.
     *     Die Bildhöhe hängt an der Kachelbreite (gemessen 171 px bei
     *     320 px Fenster bis 338 px bei 1024 px), der Abstand von der
     *     UNTERKANTE der Spur zur Bildmitte dagegen kaum: über 30
     *     Messungen auf vier Seiten und fünf Breiten lag er zwischen 525
     *     und 577 px, weil unter dem Bild immer derselbe Kartenfuß steht
     *     (Name, Preis, Knopf). Deshalb hängen die Pfeile an der Spur-
     *     unterkante: .product-slider-controls-container steht direkt
     *     hinter der Spur, wird auf Höhe 0 gesetzt und dient als Bezug.
     *     551 px ist die Mitte des gemessenen Bandes; nachgemessen weicht
     *     die Knopfmitte damit an keiner Stelle mehr als 27 px von der
     *     Bildmitte ab, das kleinste halbe Bild misst 85 px. In allen 52
     *     gezeichneten Knöpfen liegt die Fläche vollständig auf dem Foto und
     *     nie auf der Preiszeile.
     */
  /*
     * Der Kasten wächst nach außen, die Reihe bleibt stehen.
     * Drei Klassen Gewicht, weil der Kern .base-slider.has-nav-outside mit
     * zwei Klassen auf 25 px setzt.
     */
  /*
     * Die Spur beschneidet sich ab hier selbst.
     *
     * Der weiter außen liegende Kasten von oben nimmt sonst die Nachbar-
     * kachel mit: Gemessen bei 1440 px beginnt die vierte Kachel bei
     * x = 1405, der Kasten reichte vorher bis 1400 und jetzt bis 1436 – ein
     * 31 px breiter Streifen der vierten Kachel stand plötzlich neben der
     * Reihe, bei 390 px waren es 15 px der zweiten. Auf dem Bildschirmfoto
     * war das sofort zu sehen.
     *
     * Der Kern stellt .tns-ovh in _base-slider.scss ausdrücklich auf
     * visible, weil er das Beschneiden dem .base-slider überlässt. Hier
     * bekommt die Spur ihre eigene Kante zurück – dieselbe Technik, die das
     * Theme in layout/_pdp.scss schon für die Galerie verwendet.
     *
     * Die 12 px sind Luft für den Fokusring (4 px) an der ersten und
     * letzten Kachel; ohne sie läge die Kante genau auf dem Kachelrand.
     * Negativer Außenabstand und gleich großer Innenabstand heben sich auf,
     * die Spur selbst bleibt millimetergenau stehen. Bis zur Nachbarkachel
     * sind es 30 px Rinne – 12 px davon zu nutzen ist gefahrlos.
     */
  /*
     * Bezugspunkt der Pfeile: die Unterkante der Spur.
     * Höhe 0, damit unter der Reihe kein Platz mehr verbraucht wird – die
     * beiden Knöpfe darin sind absolut positioniert.
     */
  /*
     * Der Versatz ist von der Fensterkante her gerechnet, nicht vom Kachel-
     * rand: 33 px = 45 px Innenabstand des Kastens − 12 px Wunschabstand.
     * Der Knopf steht damit bei 320 bis 1400 px Fensterbreite immer auf
     * x = 12 (gemessen) und ragt 15 px über den Kachelrand. Zum
     * beschneidenden Kasten bleiben ebenfalls 12 px – genug für Schatten
     * und den 4 px breiten Fokusring.
     */
  /*
     * Ab 1440 px ist der Containerrand 40 statt 20 px, das Band also 65 px.
     * 53 px Versatz teilen es auf: 12 px zur Fensterkante, 48 px Knopf,
     * 5 px Luft zur ersten Kachel – keine Überlappung mehr. Zum Kastenrand
     * bleiben hier 8 px, weiterhin mehr als der Fokusring braucht.
     */
  /*
     * ── Riesenrad: mittlere Kachel oben, Wechsel auf dem Bogen ────────────
     *
     * Der Betreiber: „kannst du hier das mittlere etwas nach oben versetzen
     * und wenn man dann die pfeile drueckt soll sich das maessig wie ein
     * riessenrad animiert wechseln im drehen mit einer cleanen animation aber
     * immer nur 3 anzeigen".
     *
     * Das Bild ist genau genommen präzise: Die Gondel eines Riesenrads bleibt
     * beim Drehen WAAGERECHT, sie kippt nicht. Was sich dreht, ist ihr Weg.
     * Deshalb wird hier nichts gedreht und nichts skaliert – die mittlere
     * Kachel steht schlicht höher, und beim Blättern wandern die Kacheln auf
     * diesem Bogen weiter: Die mittlere sinkt zur Seite ab, die nächste steigt
     * in die Mitte auf.
     *
     * Kippen und Skalieren wären hier auch technisch falsch: rc-umfeld.js
     * misst die Kartenhöhe über getBoundingClientRect und hinterlegt sie als
     * --rc-slider-kartenhoehe; daran hängen die Blätterpfeile. rotate und
     * scale ändern dieses Rechteck, translateY nicht. Nachgemessen blieb
     * --rc-slider-kartenhoehe an allen vier Reihen und vier Breiten exakt
     * gleich (759/739/739 px Startseite, 762 px Produktseite bei 1440 px).
     *
     * WELCHE KACHEL DIE MITTLERE IST, entscheidet rc-slider-rad.js: Es zählt
     * die von tiny-slider mit .tns-slide-active markierten Folien und setzt
     * data-rc-rad="mitte" nur, wenn es eine echte Mitte gibt. Gemessen sind
     * das 3 Folien bei 1440 px, 2 bei 1024 und 768 px und 1 bei 390 px – auf
     * schmalen Geräten gibt es also keine Mitte und folgerichtig keinen
     * Bogen. Das Attribut steht deshalb hier ohne jede Breitenabfrage.
     */
  --rc-rad-hub: 16px;
  /*
     * 450 ms. Nicht schneller und nicht langsamer, und zwar aus einer
     * gemessenen Strecke:
     *
     * Ein Schritt der Reihe misst 447 px bei 1440 px Fensterbreite (Spur von
     * x = 0 auf −447, sechs Schritte nachgezählt) und 330 px bei 390 px.
     * 447 px in 450 ms sind 993 px/s – eine Kachelbreite in einer knappen
     * halben Sekunde. Die Kacheln sind einzeln zu verfolgen, das ist das,
     * was „im drehen" verlangt.
     *
     * Schneller: Bei 300 ms wären es 1490 px/s. Die Kachel überquert ihre
     * eigene Breite in weniger als einer Drittelsekunde – das liest sich als
     * Schnitt, nicht als Drehung, und für diese Zielgruppe als Flackern.
     * Langsamer: Bei 700 ms sind es 639 px/s, und die Reihe blockiert das
     * Blättern. Acht Kacheln brauchen bis zu fünf Klicks, das wären 3,5
     * Sekunden Wartezeit – gemessen sind es acht Folien je Reihe.
     */
  --rc-rad-dauer: 450ms;
  /*
     * Eigene Beschleunigungskurve statt --rc-ease.
     *
     * --rc-ease ist cubic-bezier(0.2, 0.6, 0.2, 1) und für Wege von 2 bis
     * 4 px gebaut: Sie schießt vorn los und läuft hinten aus. Auf 447 px
     * gemessen legte die Spur damit in der ersten Hälfte der Zeit bereits
     * 95 Prozent des Weges zurück (bei 230 ms stand sie auf −425 von −447) –
     * ein Ruck mit Nachlauf, kein Rad.
     *
     * Ein Rad läuft an, dreht gleichmäßig und läuft aus. Diese Kurve steht bei
     * halber Zeit auf gemessen 65 bis 71 Prozent des Weges (acht Messreihen
     * auf beiden Seiten und vier Breiten, rechnerisch 68 – die Streuung ist
     * das Raster der Einzelbilder). Das ist der ruhige Teil zwischen
     * mechanisch starr (ease-in-out stünde auf exakt 50 Prozent und wirkt
     * zäh) und dem Ruck von --rc-ease.
     */
  --rc-rad-kurve: cubic-bezier(0.4, 0, 0.35, 1);
  /*
     * Der Bogen selbst. 16 px.
     *
     * Untergrenze: Die Kachel hebt sich beim Überfahren bereits um 3 px
     * (components/_product-card.scss). Der Bogen muss davon klar zu
     * unterscheiden sein, sonst liest man ihn als Mauszeiger-Zustand.
     * Obergrenze: Er muss über der Spur Platz finden, ohne die Reihe höher
     * zu machen – siehe .tns-ovh oben, 32 px Luft für 16 + 3 + 4 px – und er
     * darf nicht an die Überschrift stoßen. Gemessen stehen zwischen
     * Überschrift und Kachel 48 px; die mittlere rückt damit auf 32 px heran,
     * die äußeren bleiben bei 48. 16 px sind 2,1 Prozent der gemessenen
     * Kartenhöhe von 759 px.
     *
     * transform statt margin oder top: Nur so ändert sich der Platzbedarf
     * nicht. Nachgemessen blieb die Reihenhöhe vor, während und nach dem
     * Blättern bei 878 px (Startseite) und 775 px (Produktseite) stehen.
     *
     * Anhebung und Überfahren addieren sich sauber, weil sie an
     * verschiedenen Elementen hängen: der Bogen an der Folie, das Überfahren
     * an der Kachel darin. Gemessen: mittlere Kachel 16 px über den äußeren,
     * beim Überfahren 3 px weiter, bis zur Schnittkante blieben 13 px.
     */
  /*
     * Die Bewegung – nur während eines Klicks auf die Blätterpfeile.
     *
     * WARUM ÜBERHAUPT EINE ÜBERGANGSZEIT AUF DER SPUR: Die Vorlage übergibt
     * `speed: null` an tiny-slider (gemessen im Attribut
     * data-product-slider-options aller vier Reihen). tiny-slider schreibt
     * daraufhin dauerhaft `transition-duration: 0s` in das style-Attribut der
     * Spur – die Reihe SPRANG bisher. Über 40 Einzelbilder nach dem Klick
     * gemessen stand die Spur ab dem ersten Bild auf dem Endwert −446,666 px.
     * Ohne eine Übergangszeit hier gäbe es nichts, wozu der Bogen passen
     * könnte; die Kacheln würden seitlich springen, während sich die mittlere
     * hebt – genau das Ruckeln, das der Betreiber nicht will.
     *
     * Die Vorlage liegt unter views/ und wird hier nicht angefasst. Das
     * inline geschriebene `0s` lässt sich nur mit !important überstimmen –
     * das ist der einzige Grund für das Schlüsselwort, und es gilt nur,
     * solange die Klasse steht.
     *
     * NUR WÄHREND DES KLICKS, aus drei gemessenen Gründen:
     *   – mouseDrag ist an. Beim Ziehen setzt tiny-slider die Übergangszeit
     *     selbst auf 0, damit die Reihe am Finger klebt. Eine dauerhafte
     *     Übergangszeit würde das Ziehen zäh machen.
     *   – rewind ist an. Am Ende der Reihe springt die Spur um 2233 px
     *     zurück, nachgezählt bei Klick 6 von 0 auf −2233 und zurück auf 0.
     *     Über 450 ms wären das 4962 px/s. rc-slider-rad.js nimmt die Klasse
     *     dafür wieder weg, bevor das Bild gezeichnet ist.
     *   – Beim Seitenaufbau und beim Umbau nach einem Breitenwechsel setzt
     *     tiny-slider die Spur neu. Ohne Klasse geschieht das ohne Bewegung.
     *
     * Die Folien tragen ihre Übergangszeit aus demselben Grund hier: So
     * bewegen sich Bogen und Spur zusammen oder gar nicht – nie das eine
     * ohne das andere.
     */
  /*
     * Wer Bewegung abbestellt hat, behält den Bogen und verliert den Weg
     * dorthin. Die Anhebung ist eine Anordnung, keine Animation – sie darf
     * bleiben. Diese Zielgruppe stellt die Einstellung oft wegen Schwindel,
     * und Schwindel macht die Bewegung, nicht die Stellung.
     *
     * rc-slider-rad.js prüft dasselbe und vergibt die Klasse dann gar nicht
     * erst; diese Regel ist der zweite Riegel für den Fall, dass die Klasse
     * doch einmal steht.
     */
}
.cms-element-product-slider .cms-element-title, .cms-element-product-slider h3.cms-element-title, .cms-element-product-slider .cms-element-title.h3 {
  font-size: var(--rc-fs-2xl);
  font-weight: var(--rc-fw-semibold);
  text-align: center;
  margin-bottom: var(--rc-space-7);
  color: var(--rc-text);
  letter-spacing: -0.01em;
}
.cms-element-product-slider .cms-element-title-paragraph {
  font-size: var(--rc-fs-2xl);
  font-weight: var(--rc-fw-semibold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--rc-space-4);
}
.cms-element-product-slider .base-slider.has-nav-outside {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 45px;
  padding-right: 45px;
  /*
         * Nach unten dieselbe Rechnung, aus einem anderen Grund: Weil die
         * Knöpfe keinen Platz mehr im Fluss belegen, endet der beschneidende
         * Kasten jetzt exakt an der Unterkante der Spur. Der Fokusring des
         * Themes steht 4 px außerhalb seines Elements (2 px Stärke, 2 px
         * outline-offset, base/_focus.scss) und wäre an der untersten
         * Kachelkante abgeschnitten worden.
         */
  padding-bottom: 12px;
  margin-bottom: -12px;
}
@media (min-width: 1440px) {
  .cms-element-product-slider .base-slider.has-nav-outside {
    margin-left: -36px;
    margin-right: -36px;
    padding-left: 61px;
    padding-right: 61px;
  }
}
.cms-element-product-slider .tns-ovh {
  overflow: hidden;
  margin: -12px;
  padding: 12px;
  /*
         * Nach OBEN mehr Luft als die 12 px des Fokusrings, weil die mittlere
         * Kachel dort hineinragt – siehe „Riesenrad" weiter unten.
         *
         * Gerechnet: 16 px Anhebung + 3 px Anhebung beim Überfahren
         * (components/_product-card.scss) + 4 px Fokusring (2 px Stärke,
         * 2 px Abstand, base/_focus.scss) = 23 px. 32 px lassen 9 px Reserve.
         *
         * Waagerecht bleibt es bei 12 px: Bis zur Nachbarkachel sind es nur
         * 30 px Rinne, 32 px würden sie sichtbar machen. Senkrecht gibt es
         * diese Grenze nicht – über der Spur steht die Überschrift mit ihrem
         * eigenen Abstand.
         *
         * Wie oben hebt der negative Außenabstand den Innenabstand wieder auf.
         * Nachgemessen an allen vier Reihen (Startseite drei, Produktseite
         * eine) bei 390, 768, 1024 und 1440 px: Die Reihenhöhe blieb auf den
         * Pixel gleich (878/858/858 und 775 px bei 1440 px), und die
         * Blätterpfeile behielten ihren Versatz zur Kartenmitte (1 px auf der
         * Startseite, 23 px auf der Produktseite – beide unverändert).
         */
  margin-top: -32px;
  padding-top: 32px;
}
.cms-element-product-slider .product-slider-controls-container {
  position: relative;
  height: 0;
  z-index: 3;
}
.cms-element-product-slider .base-slider-controls {
  display: block;
  height: 0;
  margin: 0;
}
.cms-element-product-slider .product-slider-controls-prev, .cms-element-product-slider .product-slider-controls-next {
  position: absolute;
  top: auto;
  transform: none;
  /*
         * SENKRECHT: auf der Kartenmitte.
         *
         * Der Betreiber: „die pfeile mittig". Vorher hingen sie auf der
         * BILDmitte, über einen festen Abstand von 527 px zur Spurunterkante.
         * Fest ging nur deshalb, weil der Kartenfuß über alle Breiten etwa
         * gleich hoch ist – für die Kartenmitte gilt das nicht: gemessen
         * 525 px Kartenhöhe auf einem schmalen und 706 px auf einem breiten
         * Fenster. Ein fester Wert läge um bis zu 90 px daneben.
         *
         * Deshalb misst rc-umfeld.js die Karte je Reihe und hinterlegt sie
         * als --rc-slider-kartenhoehe. Die Unterkante der Spur fällt mit der
         * Kartenunterkante zusammen (gemessen 3463 zu 3464 px), also ist die
         * halbe Kartenhöhe genau der Weg zur Mitte; minus 24 px für die halbe
         * Knopfhöhe.
         *
         * Der Rückfallwert 706px ist die gemessene Kartenhöhe der Startseite
         * bei 1440 px. Er greift nur, solange das Skript nicht gelaufen ist.
         */
  bottom: calc(var(--rc-slider-kartenhoehe, 706px) / 2 - 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-control-md);
  height: var(--rc-control-md);
  line-height: 1;
  padding: 0;
  /*
         * Rahmen in der Markenfarbe, nicht im hellen Kachelrandton.
         *
         * Der Knopf liegt unter 1440 px zu 15 px auf dem Produktfoto, und
         * Produktfotos sind hier fast durchweg freigestellt auf Weiß. Der
         * bisherige Ton --rc-border-strong (#cfc6b9) erreicht gegen Weiß
         * nachgerechnet 1,69:1 – WCAG 2.2 verlangt für die Umrandung eines
         * Bedienelements 3:1 (1.4.11). Sichtbar war davon auf dem
         * Bildschirmfoto praktisch nichts, der Knopf verschwamm mit der
         * Kachel. --rc-primary (#2f5d50) liegt bei 7,5:1.
         */
  border: 1px solid var(--rc-primary);
  /*
         * Abgerundetes Quadrat statt Kreis, derselbe Radius wie die
         * Produktkacheln daneben.
         */
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface);
  color: var(--rc-primary);
  box-shadow: var(--rc-shadow-raised);
  /*
         * Der Betreiber wünscht mehr Bewegung. Der Knopf hebt sich beim
         * Überfahren um 2 px an, wächst um 4 % und bekommt einen tieferen
         * Schatten; beim Drücken federt er auf 96 % zurück. Das ist eine
         * Rückmeldung auf eine Handlung, keine Zierde: Man sieht, dass der
         * Knopf gedrückt wurde, auch wenn die Reihe erst danach weiterläuft.
         *
         * `transform` und `box-shadow` sind die beiden Eigenschaften, die der
         * Browser ohne neues Layout zeichnet – eine Bewegung darauf kostet
         * keine Bildrate, auch nicht auf einem älteren Tablet.
         */
  transition: background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease), box-shadow var(--rc-dur-btn) var(--rc-ease), transform var(--rc-dur-btn) var(--rc-ease);
  /*
         * Die Rundung kostet Klickfläche, und zwar messbar.
         *
         * Der Browser prüft den Treffer entlang der Rundung. Ein Raster über
         * die Knopffläche (elementsFromPoint alle 2 px) zeigte bei 12 px
         * Radius an jeder Ecke eine tote Zone: Das größte vollständig
         * treffbare Quadrat maß 41 px – 3 px unter der Vorgabe 44 × 44.
         *
         * Ein Kind-Element wird von der Rundung des Elternteils NICHT
         * beschnitten, solange dort kein overflow gesetzt ist. Diese
         * unsichtbare Auflage stellt deshalb die vollen 48 × 48 px als
         * Trefferfläche her, ohne die weiche Kontur zu opfern.
         */
  /*
         * Vorsorge, kein gemessener Fall: Die Vorlage läuft mit rewind: true,
         * am Anfang der Reihe war der Zurück-Knopf deshalb bei keiner der 30
         * Messungen abgeschaltet. Fällt rewind einmal weg, setzt tiny-slider
         * das Attribut – und der Kern blendet den Knopf dann auf opacity 0.5,
         * was auf hellem Grund für diese Zielgruppe kaum noch zu sehen ist.
         * Hier bleibt er voll deckend und wird über die Farbe gelesen.
         */
}
.cms-element-product-slider .product-slider-controls-prev .icon > svg, .cms-element-product-slider .product-slider-controls-next .icon > svg {
  width: 24px;
  height: 24px;
  transition: transform var(--rc-dur-btn) var(--rc-ease);
}
.cms-element-product-slider .product-slider-controls-prev::before, .cms-element-product-slider .product-slider-controls-next::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.cms-element-product-slider .product-slider-controls-prev:hover, .cms-element-product-slider .product-slider-controls-next:hover {
  background-color: var(--rc-primary-soft);
  border-color: var(--rc-primary);
  color: var(--rc-primary);
  transform: scale(1.04) translateY(-2px);
  box-shadow: var(--rc-shadow-raised);
}
.cms-element-product-slider .product-slider-controls-prev:active, .cms-element-product-slider .product-slider-controls-next:active {
  transform: scale(0.96);
  box-shadow: var(--rc-shadow-raised);
}
.cms-element-product-slider .product-slider-controls-prev[disabled], .cms-element-product-slider .product-slider-controls-next[disabled] {
  opacity: 1;
  color: var(--rc-disabled);
  border-color: var(--rc-border);
  background-color: var(--rc-bg);
  transform: none;
}
.cms-element-product-slider .product-slider-controls-prev:hover:not([disabled]) .icon > svg {
  transform: translateX(-2px);
}
.cms-element-product-slider .product-slider-controls-next:hover:not([disabled]) .icon > svg {
  transform: translateX(2px);
}
.cms-element-product-slider .product-slider-controls-prev {
  left: -33px;
  right: auto;
}
.cms-element-product-slider .product-slider-controls-next {
  right: -33px;
  left: auto;
}
@media (min-width: 1440px) {
  .cms-element-product-slider .product-slider-controls-prev {
    left: -53px;
  }
  .cms-element-product-slider .product-slider-controls-next {
    right: -53px;
  }
}
.cms-element-product-slider .tns-item[data-rc-rad="mitte"] {
  transform: translate3d(0, calc(-1 * var(--rc-rad-hub)), 0);
}
.cms-element-product-slider .base-slider.rc-rad-dreht .tns-slider {
  transition-property: transform;
  transition-timing-function: var(--rc-rad-kurve);
  transition-duration: var(--rc-rad-dauer) !important;
}
.cms-element-product-slider .base-slider.rc-rad-dreht .tns-item {
  transition: transform var(--rc-rad-dauer) var(--rc-rad-kurve);
}
@media (prefers-reduced-motion: reduce) {
  .cms-element-product-slider .base-slider.rc-rad-dreht .tns-slider {
    transition-duration: 0s !important;
  }
  .cms-element-product-slider .base-slider.rc-rad-dreht .tns-item {
    transition: none;
  }
}
/*
 * Auftritt des Bühnenbilds beim Seitenaufruf.
 *
 * Kein Effekt um des Effekts willen: Das Bild zieht in anderthalb Sekunden
 * kaum merklich zu, während Zeile für Zeile von unten einblendet. Das lenkt
 * den Blick genau in der Reihenfolge, in der der Inhalt gelesen werden soll –
 * Kicker, Überschrift, Erklärung, Handlung.
 *
 * Bewusst zurückhaltend: Diese Zielgruppe erwartet keine Show, und starke
 * Bewegung erschwert das Lesen. Die Dauer liegt deshalb im Bereich einer
 * ruhigen Kamerafahrt, nicht eines Übergangs.
 *
 * Die Animation läuft ohne JavaScript. Wer sie nicht bekommt – ältere Browser,
 * abgeschaltete Animationen – sieht denselben Inhalt sofort und vollständig.
 */
@keyframes rc-hero-bild {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}
@keyframes rc-hero-zeile {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.rc-hero__media img {
  animation: rc-hero-bild 1600ms var(--rc-ease) both;
}
.rc-hero__content > * {
  animation: rc-hero-zeile 620ms var(--rc-ease) both;
}
.rc-hero__content > :nth-child(1) {
  animation-delay: 120ms;
}
.rc-hero__content > :nth-child(2) {
  animation-delay: 220ms;
}
.rc-hero__content > :nth-child(3) {
  animation-delay: 320ms;
}
.rc-hero__content > :nth-child(n + 4) {
  animation-delay: 420ms;
}
@media (prefers-reduced-motion: reduce) {
  .rc-hero__media img, .rc-hero__content > * {
    animation: none;
  }
}
/*
 * ── Aktionsband ──────────────────────────────────────────────────────────
 *
 * Text links, Bild rechts, über die volle Breite des Containers. Steht
 * zwischen zwei Produktreihen und trägt genau ein Angebot: Nutzenversprechen,
 * belegbare Punkte, eine Handlung.
 *
 * Der Text liegt auf dunklem Blau, nicht auf dem Bild – so bleibt er ohne
 * Verlauf lesbar, und das Foto wird nicht halb verdeckt.
 */
.rc-campaign {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--rc-radius-visual);
  overflow: hidden;
  background-color: var(--rc-primary);
  color: var(--rc-on-dark);
  /*
     * Der Rinnenabstand gehört NACH AUSSEN, nicht nach innen.
     *
     * Bootstrap gibt jedem direkten Kind einer `.row` links und rechts
     * `calc(var(--bs-gutter-x) * .5)` Innenabstand – hier gemessen 20 px. Das
     * grüne Band ist selbst so ein Kind, und seine Fläche reicht bis zur
     * Außenkante dieses Abstands. Gemessen am 1440-px-Fenster: Kasten
     * 20 .. 1420, Inhalt 40 .. 1400. Rechts blieben damit 20 px Grün neben
     * dem Foto stehen – genau der Streifen, den der Betreiber gemeldet hat.
     * Links fiel es nicht auf, weil dort ohnehin die grüne Textspalte steht.
     *
     * Aus dem Abstand einen Außenabstand zu machen, löst beides auf einmal:
     * Das Foto reicht bis an die Kante, und der Kasten steht auf derselben
     * Linie wie die Nachbarn – Servicekarten 41 .. 1399, Kategoriekacheln ab
     * 40. Vorher stand er 20 px weiter außen als alles andere auf der Seite.
     *
     * ── NACHTRAG 30.08.2026: DER AUSSENABSTAND BRAUCHT EINE BREITE ────────
     *
     * Der Umbau oben war nur halb fertig. Bootstrap gibt jedem direkten Kind
     * einer `.row` nicht nur den Innenabstand, sondern auch `width: 100%`
     * (`.row > *`). 100 % sind die Breite der Zeile – und die Zeile trägt
     * `margin-inline: -20px`, ist also 40 px BREITER als der Blockcontainer.
     * Der Innenabstand hätte diese 40 px wieder hereingeholt; ohne ihn bleibt
     * der Kasten übergroß, und der Außenabstand wird oben drauf gerechnet
     * statt abgezogen.
     *
     * Gemessene rechte Kanten der gemalten Fläche, vorher:
     *   1280 px  Kacheln/Markenband/FAQ enden bei 1260, Kampagnenband bei
     *            1300 – 20 px AUSSERHALB des Fensters, der 20-px-Eckradius
     *            wird mit abgeschnitten
     *    360 px  340 gegen 380      768 px  748 gegen 788
     *    390 px  370 gegen 410     1024 px 1004 gegen 1044
     *   1440 px  Nachbarn 20..1420, Band 40..1440 – bündig an der Fensterkante
     *   1920 px  Nachbarn 260..1660, Band 280..1680 – 20 px neben der Achse
     * Beide Bänder (Sektion 4 und 8), alle sieben Breiten, reproduzierbar.
     * Kein Querlauf, weil der Überstand weggeschnitten wird – man sieht nicht
     * den Fehler, sondern nur sein Ergebnis: eine angeschnittene Ecke.
     *
     * `width` muss den Außenabstand also selbst abziehen. `box-sizing:
     * border-box` gilt global, deshalb ist das eine Rechnung und keine zweite
     * Quelle der Wahrheit: dieselbe Rinnenbreite, einmal als Abstand, einmal
     * als Abzug. Nachgemessen: 1280 px → 20..1260, wie Kacheln, Markenband
     * und FAQ.
     */
  padding-inline: 0;
  margin-inline: calc(var(--bs-gutter-x, 40px) * 0.5);
  width: calc(100% - var(--bs-gutter-x, 40px));
}
@media (min-width: 768px) {
  .rc-campaign {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
  }
}
.rc-campaign__content {
  padding: var(--rc-space-7) var(--rc-space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 992px) {
  .rc-campaign__content {
    padding: var(--rc-space-8) var(--rc-space-8);
  }
}
.rc-campaign__content h2, .rc-campaign__content .h2 {
  margin: 0 0 var(--rc-space-3);
  color: #fff;
  font-size: var(--rc-fs-2xl);
  line-height: 1.15;
}
.rc-campaign__content > *:last-child {
  margin-bottom: 0;
}
.rc-campaign__content p {
  margin: 0 0 var(--rc-space-5);
  color: var(--rc-on-dark);
  font-size: var(--rc-fs-base);
  line-height: 1.55;
}
.rc-campaign__content ul {
  list-style: none;
  margin: 0 0 var(--rc-space-6);
  padding: 0;
  display: grid;
  gap: var(--rc-space-2);
}
.rc-campaign__content ul li {
  position: relative;
  padding-left: var(--rc-space-6);
  color: var(--rc-on-dark);
  font-size: var(--rc-fs-sm);
  line-height: 1.5;
  /*
             * Häkchen aus zwei Strichen statt als Grafik: eine Datei weniger.
             *
             * Weiß, nicht Terrakotta. Der Kommentar hier behauptete früher,
             * die Farbe folge dem Text – tat sie aber nicht, sie stand fest
             * auf --rc-secondary. Gemessen auf der dunkelgrünen Fläche
             * (#2F5D50) kommt #B4573A auf 2,1:1; die Grenze für
             * Bedienelemente und Grafik liegt bei 3:1 (WCAG 1.4.11). Auf dem
             * Screenshot des Betreibers waren die Häkchen praktisch nicht zu
             * sehen.
             *
             * Weiß erreicht dort 8,9:1 und ist zugleich die Farbe des
             * danebenstehenden Textes – das Häkchen wirkt damit als Teil der
             * Zeile statt als Farbfleck.
             */
}
.rc-campaign__content ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.rc-campaign__content .btn, .rc-campaign__content a.btn {
  align-self: flex-start;
}
.rc-campaign__media {
  position: relative;
  min-height: 220px;
}
.rc-campaign__media .cms-element-image, .rc-campaign__media .cms-image-container {
  width: 100%;
  height: 100%;
}
.rc-campaign__media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}
@media (min-width: 768px) {
  .rc-campaign__media {
    min-height: 320px;
  }
}
/*
 * ── Markenslider ─────────────────────────────────────────────────────────
 *
 * Laufender Streifen der geführten Hersteller. Die Marken kommen live aus der
 * Herstellertabelle (`rc_manufacturers()`), nicht aus einer gepflegten Liste.
 *
 * Zur Bewegung: Dauerhafte Bewegung ist bei dieser Zielgruppe ein Risiko – ein
 * wanderndes Ziel lässt sich schlecht anklicken. Deshalb hält der Streifen bei
 * Zeigerkontakt und bei Tastaturfokus an, und wer im Betriebssystem reduzierte
 * Bewegung eingestellt hat, bekommt gar keine: dann wird aus dem Streifen eine
 * Reihe, die sich normal seitwärts schieben lässt.
 */
.rc-brands {
  text-align: center;
}
.rc-brands h2, .rc-brands .h2 {
  margin: 0 0 var(--rc-space-2);
  /*
         * Hier stand `--rc-fs-xl` – die H3-Stufe.
         *
         * Gemessen am 30.08.2026 über alle acht echten H2 der Startseite:
         * „Diese Hersteller führen wir" war bei 1280 px mit 27 px die einzige
         * Abweichung nach unten (alle übrigen 34 px), und bei 360 px mit 23 px
         * die kleinste der ganzen Seite – kleiner als die H3-Stufe für Telefone
         * (ebenfalls 23 px). Eine Abschnittsüberschrift, die kleiner ist als
         * die Überschriften unter ihr, ordnet die Seite falsch.
         *
         * `--rc-fs-2xl` ist laut docs/14-designsystem-2026.md:40 die H2-Stufe:
         * 34 px am Schreibtisch, 27 px am Telefon.
         */
  font-size: var(--rc-fs-2xl);
}
.rc-brands > p:first-of-type, .rc-brands .cms-element-text > p:first-of-type {
  margin: 0 auto var(--rc-space-5);
  max-width: 640px;
  color: var(--rc-muted);
}
.rc-brand-slider {
  --rc-marken-breite: 190px;
  --rc-marken-hoehe: 104px;
  --rc-marken-dauer: 55s;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rc-border);
  border-bottom: 1px solid var(--rc-border);
  background-color: var(--rc-surface);
  mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.rc-brand-slider:hover .rc-brand-slider__track, .rc-brand-slider:focus-within .rc-brand-slider__track {
  animation-play-state: paused;
}
.rc-brand-slider__track {
  display: flex;
  width: max-content;
  animation: rc-marken-lauf var(--rc-marken-dauer) linear infinite;
}
.rc-brand-slider__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-brand-slider__item {
  flex: 0 0 var(--rc-marken-breite);
  width: var(--rc-marken-breite);
  border-right: 1px solid var(--rc-border);
}
.rc-brand-slider__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--rc-marken-hoehe);
  padding: var(--rc-space-4);
  color: var(--rc-primary);
  text-decoration: none;
  transition: background-color var(--rc-dur-card) var(--rc-ease), color var(--rc-dur-card) var(--rc-ease);
}
.rc-brand-slider__link:hover, .rc-brand-slider__link:focus-visible {
  background-color: var(--rc-surface-warm);
  color: var(--rc-accent);
  text-decoration: none;
}
.rc-brand-slider__logo {
  max-width: 100%;
  max-height: calc(var(--rc-marken-hoehe) - var(--rc-space-6));
  width: auto;
  object-fit: contain;
}
/*
 * Schriftzug, solange kein Logo hinterlegt ist.
 *
 * Fremde Markenlogos werden hier nicht aus dem Netz gezogen: Woher eine
 * gefundene Datei stammt und in welcher Fassung, lässt sich nicht prüfen –
 * ein veraltetes oder verwaschenes Herstellerlogo schadet mehr als keines.
 * Sobald jemand im Admin unter Hersteller ein Logo hinterlegt, erscheint es
 * hier automatisch und dieser Schriftzug entfällt.
 *
 * Bis dahin kein nackter Fließtext, sondern eine Wortmarke: versalgesetzt,
 * gesperrt, in der Markenfarbe. Das liest sich als bewusste Setzung und nicht
 * als fehlendes Bild.
 */
.rc-brand-slider__wordmark {
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: none;
}
@keyframes rc-marken-lauf {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rc-brand-slider {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
    scrollbar-width: thin;
  }
  .rc-brand-slider__track {
    animation: none;
  }
  .rc-brand-slider__list[aria-hidden="true"] {
    display: none;
  }
}
/*
 * ── Kategoriekacheln mit Beschreibung und Schaltfläche ───────────────────
 *
 * Die Kachel trug bisher nur einen Titel auf dem Bild. Große Shops setzen an
 * dieser Stelle Karten mit Titel, einem Satz zur Einordnung und einer eigenen
 * Schaltfläche – wer die Kategorie nicht am Namen erkennt, weiß dann trotzdem,
 * was ihn dort erwartet.
 */
.rc-category-tiles__text p {
  margin: var(--rc-space-1) 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--rc-fs-sm);
  line-height: 1.4;
  /*
         * Auf dem Telefon Fließtext, nicht Kleingedrucktes.
         *
         * Gemessen am 30.08.2026 bei 360 und 390 px: 17 px in allen sechs
         * Kacheln. Am Schreibtisch liegt der Satz als kurze Einordnung auf
         * dem Foto, dort ist 17 px (--rc-fs-sm) die richtige Stufe. Unter
         * 576 px steht er nicht mehr auf dem Bild, sondern in einem eigenen
         * Textblock unter der Kachel und über die volle Fensterbreite – dort
         * ist er gewöhnlicher Fließtext, und dessen Untergrenze ist laut
         * docs/14-designsystem-2026.md:41-44 18 px. `--rc-fs-base` liefert
         * auf der Telefonstufe genau diese 18 px.
         */
}
@media (max-width: 575px) {
  .rc-category-tiles__text p {
    font-size: var(--rc-fs-base);
  }
}
.rc-category-tiles__text .btn {
  margin-top: var(--rc-space-3);
  /*
         * Mindestens 44 px hoch – das ist eine Zielgröße, keine Zierleiste.
         *
         * Gemessen am 30.08.2026 auf allen sieben Breiten: 40 px. Die
         * Projektvorgabe für diese Zielgruppe (und tools/qa/responsive-audit.mjs
         * als Prüfer) setzt 44 px als Untergrenze an; `.btn-sm` bringt aus dem
         * Kern 40 px mit. Die vier fehlenden Pixel kommen über eine
         * Mindesthöhe statt über zusätzlichen Innenabstand – so bleibt die
         * Beschriftung mittig, auch wenn sie einmal zweizeilig umbricht.
         *
         * Die ganze Kachel ist zwar ohnehin klickbar (siehe
         * `.rc-category-tiles__text a[href]::after` weiter oben); wer aber den
         * Knopf ansteuert, weil er wie ein Knopf aussieht, muss ihn auch
         * treffen.
         */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
/*
 * ── Kontaktabschnitt: drei gleichrangige Wege ────────────────────────────
 *
 * Telefon, E-Mail und Formular nebeneinander statt untereinander versteckt.
 * Das Telefon ist hervorgehoben, weil es bei dieser Zielgruppe der Weg ist,
 * den die meisten tatsächlich nehmen – die beiden anderen bleiben trotzdem
 * gleich groß und gleich erreichbar.
 */
.rc-contact {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.rc-contact h2, .rc-contact .h2 {
  margin: 0 0 var(--rc-space-2);
}
.rc-contact__lead {
  margin: 0 auto;
  max-width: 620px;
  color: var(--rc-muted);
}
.rc-contact-ways {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-4);
  list-style: none;
  margin: var(--rc-space-5) 0 var(--rc-space-5);
  padding: 0;
}
@media (min-width: 768px) {
  .rc-contact-ways {
    grid-template-columns: repeat(3, 1fr);
  }
}
.rc-contact-ways li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rc-space-2);
}
.rc-contact-ways .btn {
  width: 100%;
}
.rc-contact-ways small, .rc-contact-ways .small {
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
  line-height: 1.4;
}
.rc-contact-address {
  margin: 0;
  text-align: center;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
}
/*
 * ── Zuschuss-Modul „Was zahlt die Kasse?" ────────────────────
 *
 * Drei Wege nebeneinander, darunter Warnhinweis, Rechner und Ablauf. Der
 * Rechner steht bewusst hinter dem Warnhinweis: Wer zuerst kauft und dann
 * beantragt, verliert den Anspruch – diese Reihenfolge muss die Seite abbilden.
 */
.rc-subsidy {
  display: grid;
  /*
     * minmax(0, 1fr) statt der Vorgabe: Rasterkinder haben von Haus aus
     * min-width: auto und schrumpfen deshalb nicht unter ihre
     * Mindestinhaltsbreite. Gemessen bei 320 Pixel Fensterbreite waren die
     * Kinder 538 Pixel breit – die Hälfte des Moduls lag außerhalb des
     * Bildschirms, ohne dass die Seite seitwärts scrollbar gewesen wäre.
     */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-7);
  /*
     * Dieselbe Lesespalte wie auf allen anderen Textseiten.
     *
     * Herleitung steht in `RehaComfortTheme/…/scss/pages/_service.scss`:
     * `--rc-measure` liefert mit 66ch bei 19 px gemessene 791,1 px = 83
     * Zeichen je Zeile, 54ch ergeben 647,2 px = 68 Zeichen.
     * Hier lokal gesetzt, weil das Zuschuss-Modul außerhalb von
     * `.rc-longform` steht und sonst weiter mit 66ch rechnen würde.
     */
  --rc-measure: 54ch;
}
.rc-subsidy > * {
  min-width: 0;
}
.rc-subsidy__ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rc-weg;
}
@media (min-width: 768px) {
  .rc-subsidy__ways {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.rc-subsidy__way {
  counter-increment: rc-weg;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-6);
  display: grid;
  align-content: start;
  gap: var(--rc-space-2);
}
.rc-subsidy__way-kicker {
  margin: 0;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-bold);
  letter-spacing: 0.06em;
  color: var(--rc-accent);
}
/*
 * Beide H3 dieser Seite tragen dieselbe Größe.
 *
 * Gemessen am 24.08.2026 bei 1440 px liefen auf der Kostenübernahme-Seite
 * zwei H3-Größen nebeneinander: `.rc-subsidy__way-title` 22 px und
 * `.rc-subsidy__calc-title` 27 px. Für den Leser sind das zwei
 * Gliederungsebenen, im Dokument ist es eine – die einzige Seite im Shop,
 * auf der derselbe Überschriftenrang zweimal verschieden aussieht.
 *
 * Gewählt ist 27 px (`--rc-fs-xl`, mobil 23 px), weil das die H3-Größe des
 * gemeinsamen Textseiten-Musters `.rc-longform` ist. Die Alternative
 * (beide auf 22 px) hätte die Seite gegen die übrigen elf Textseiten
 * verstellt.
 */
.rc-subsidy__way-title {
  margin: 0;
  font-size: var(--rc-fs-xl);
  line-height: var(--rc-lh-heading);
}
.rc-subsidy__way-text {
  margin: 0;
  color: var(--rc-muted);
  line-height: var(--rc-lh-body);
}
.rc-subsidy__way-figure {
  margin: var(--rc-space-2) 0 0;
  padding-top: var(--rc-space-3);
  border-top: 1px solid var(--rc-border);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-body);
}
.rc-subsidy__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  margin: 0;
  /*
     * Deckel auf die Zeilenlänge.
     *
     * Gemessen bei 1440 px lief dieser Satz über die volle Modulbreite von
     * 1360 px – eine einzige Zeile mit 136 Zeichen, der längste Wert aller
     * Textseiten. Genau dieser Hinweis entscheidet über den Anspruch
     * („erst beantragen, dann bestellen"); er darf nicht der schwerste
     * Satz der Seite sein.
     *
     * Rechnung: 54ch = 647,2 px Text + 24 px Symbol + 12 px Abstand
     * + 2 × 24 px Innenabstand = 731,2 px. `--rc-space-9` (80 px) deckt
     * Symbol, Abstand und Innenabstand ab.
     */
  max-width: calc(var(--rc-measure) + var(--rc-space-9));
  padding: var(--rc-space-5);
  background-color: var(--rc-warning-soft);
  border-left: 4px solid var(--rc-warning);
  border-radius: var(--rc-radius-control);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-body);
}
.rc-subsidy__warning .icon {
  color: var(--rc-warning);
  flex-shrink: 0;
  margin-top: 3px;
}
.rc-subsidy__calc, .rc-subsidy__process {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-6);
}
.rc-subsidy__calc-title {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-xl);
}
.rc-subsidy__calc-lead {
  margin: 0 0 var(--rc-space-5);
  color: var(--rc-muted);
  max-width: var(--rc-measure);
}
.rc-subsidy__calc-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-5);
  align-items: start;
}
@media (min-width: 768px) {
  .rc-subsidy__calc-fields {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--rc-space-7);
  }
}
.rc-subsidy__field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.rc-subsidy__label {
  display: block;
  margin-bottom: var(--rc-space-2);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-base);
  float: none;
  width: auto;
}
.rc-subsidy__input-group {
  display: flex;
  align-items: stretch;
}
.rc-subsidy__input {
  min-height: var(--rc-control-lg);
  font-size: var(--rc-fs-lg);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rc-subsidy__unit {
  display: flex;
  align-items: center;
  padding-inline: var(--rc-space-4);
  background-color: var(--rc-surface-warm);
  border: 1px solid var(--rc-border-strong);
  border-left: 0;
  border-radius: 0 var(--rc-radius-control) var(--rc-radius-control) 0;
  font-size: var(--rc-fs-lg);
  color: var(--rc-muted);
}
.rc-subsidy__choices {
  display: grid;
  gap: var(--rc-space-2);
}
.rc-subsidy__choice {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  min-height: var(--rc-control-md);
  padding: var(--rc-space-2) var(--rc-space-4);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  cursor: pointer;
  transition: border-color var(--rc-dur-btn) var(--rc-ease), background-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-subsidy__choice:hover {
  border-color: var(--rc-primary);
}
.rc-subsidy__choice input {
  width: 20px;
  height: 20px;
  accent-color: var(--rc-primary);
  flex-shrink: 0;
}
.rc-subsidy__choice:has(input:checked) {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
}
.rc-subsidy__result {
  margin: var(--rc-space-5) 0 0;
  padding: var(--rc-space-4) var(--rc-space-5);
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-control);
  font-size: var(--rc-fs-xl);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-primary-dark);
}
.rc-subsidy__result:empty {
  display: none;
}
.rc-subsidy__note, .rc-subsidy__source {
  margin: var(--rc-space-3) 0 0;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  line-height: 1.55;
  max-width: var(--rc-measure);
}
.rc-subsidy__source {
  margin: 0;
}
.rc-subsidy__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-4);
  list-style: none;
  margin: var(--rc-space-5) 0 0;
  padding: 0;
}
@media (min-width: 768px) {
  .rc-subsidy__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rc-space-5) var(--rc-space-7);
  }
}
.rc-subsidy__step {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
}
.rc-subsidy__step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--rc-primary);
  color: #fff;
  font-weight: var(--rc-fw-bold);
  font-size: var(--rc-fs-sm);
}
.rc-subsidy__step-text {
  display: grid;
  gap: 2px;
  line-height: var(--rc-lh-body);
}
.rc-subsidy__step-text strong {
  color: var(--rc-text);
}
.rc-subsidy__step-text span {
  color: var(--rc-muted);
}
.rc-subsidy__cta {
  margin-top: var(--rc-space-6);
}
/*
 * ══ Mobil-Korrekturen aus dem Regressionslauf ════════════════════════════
 *
 * Drei Befunde, alle nur unterhalb von 576 Pixel und alle mit demselben
 * Muster: Ein Element, das auf dem Desktop in eine Zeile passt, passt auf dem
 * Telefon nicht – und weil es nicht umbrechen darf, läuft es aus seinem
 * Kasten statt zu wachsen.
 */
/*
 * 1) Kategorie-Mosaik: eine Spalte statt zwei.
 *
 * Gemessen bei 375 Pixel: Raster 159,5 px je Spalte, die Beschriftungen der
 * Schaltflächen 155 bis 227 px breit. Alle sechs Knöpfe liefen aus ihrer
 * Kachel, drei davon aus dem Fenster (rechte Kanten bei 422, 392 und 439 px).
 * Die Überschriften wurden am oberen Kachelrand abgeschnitten, weil der
 * Textblock absolut positioniert nach oben wächst und die Kachel `overflow:
 * hidden` trägt.
 *
 * Zwei Spalten sind auf dieser Breite nicht zu retten: Für „Verbandschuhe
 * ansehen" braucht es 227 Pixel, verfügbar sind 159.
 */
@media (max-width: 575px) {
  /*
     * Keine feste Kachelhöhe mehr.
     *
     * Nachgemessen am 30.08.2026: `aspect-ratio: 16/10` ergibt bei 360 px
     * eine 200 px hohe Kachel. Der Textblock darunter ist 156,8 px hoch –
     * er überdeckte damit 78 % des Fotos. Die Kachel darf so hoch werden,
     * wie Bild und Text zusammen brauchen; das Bild bekommt seine eigene
     * Höhe.
     */
  .rc-category-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .rc-category-tiles__tile {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .rc-category-tiles__image, .rc-category-tiles__overlay {
    position: relative;
    height: 168px;
  }
  .rc-category-tiles__text {
    /*
         * WARUM `position: relative` UND NICHT `static`.
         *
         * Hier stand `position: static`. Gemessen wurde daraufhin bei 360 und
         * 390 px: ALLE ZWÖLF Kacheltexte unter 4,5:1, der schlechteste Wert
         * „Betten & Matratzen" mit 1,2:1, Median 1,8:1. Als Hintergrund unter
         * der weißen Schrift maß die Prüfung rgb(202,183,157) – das Foto,
         * nicht die vorgesehene dunkle Fläche rgb(35,69,59).
         *
         * Die Ursache ist die Malreihenfolge: Die Geschwister
         * .rc-category-tiles__image und .rc-category-tiles__overlay behalten
         * `position: absolute`. Positionierte Elemente werden NACH nicht
         * positionierten gemalt – Foto und Verlauf legten sich also über die
         * grüne Fläche. Sichtbar blieb nur die Schrift, weil das innere
         * .cms-element-text seinerseits `position: relative` trägt.
         *
         * Ab 768 px bestehen dieselben Texte mit 5,6 bis 10,6:1; betroffen
         * war ausschließlich das Telefon – also genau die Hälfte der Besucher,
         * für die der Shop gebaut ist.
         */
    position: relative;
    background: var(--rc-primary-dark);
    padding: var(--rc-space-4);
    margin-top: auto;
  }
}
/*
 * 2) Zuschuss-Schaltfläche: darf umbrechen.
 *
 * „Kostenvoranschlag anfordern: 0800 55 56 626" ist 494 Pixel breit. In einer
 * 335 Pixel breiten Karte standen 171 Pixel außerhalb – sichtbar blieb
 * „Kostenvoranschlag anfordern: 0", die Rufnummer fehlte. Ausgerechnet die
 * Nummer, wegen der der Knopf da ist.
 */
@media (max-width: 575px) {
  .rc-subsidy__cta {
    display: flex;
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: var(--rc-lh-heading);
    padding-block: var(--rc-space-3);
    height: auto;
    min-height: var(--rc-control-lg);
  }
}
/*
 * RehaComfort Design System – Einstieg (nach @Storefront kompiliert)
 */
/*
 * RehaComfort Design-Tokens – die einzige Quelle für Farbe, Typografie,
 * Abstand, Radius, Schatten und Bewegung.
 *
 * Regeln:
 *  - Komponenten verwenden ausschließlich var(--rc-*), niemals feste Werte.
 *  - Drei Radien, ein Schatten, eine Typo-Skala. Weniger ist ruhiger.
 *  - Untergrenze für lesbaren Text 17px, Fließtext 18–19px: Zielgruppe 65–80.
 *    Darunter liegt nur --rc-fs-micro, und das ausschließlich für Chips.
 *
 * ── Farbwechsel „Warmes Vertrauen" (Benchmark 2026, Seite 34) ────────────
 *
 * Vorher: Institutionsblau #114B75 auf kaltgrauem #F6F8FA. Das ist exakt die
 * Palette, mit der jeder DACH-Wettbewerber arbeitet (rehashop #00538D,
 * careshop #ECF1F8, medizinischer-fachhandel #0B1F52) – und es liest sich als
 * Sanitätshaus, nicht als Wohnraum. Ein Aufstehsessel für 3.999 € ist ein
 * Möbelstück, das etwas kann, kein Medizingerät.
 *
 * Jetzt: tiefes Salbei-Petrol als Marke, warmes Terrakotta als Akzent, alle
 * Neutralen warm getönt. Kein reines Weiß, kein reines Schwarz, kein
 * Kaltgrau. Alle Werte erfüllen WCAG 2.2 AA gegen ihren Einsatzgrund.
 */
/*
 * Achtung: Dieser !default ist NICHT die wirksame Zahl.
 *
 * `theme.json` (Feld `rc-container-width`, Zeile 166–172) setzt 1280 und
 * überschreibt ihn – --rc-container liefert zur Laufzeit auf allen geprüften
 * Seiten 1280px. Der Inhaltscontainer der Storefront ist aber Bootstraps
 * `.container` und misst gemessen 1400px (innere Spalte 1376px), unverändert
 * bei 1440 und bei 1920px Fensterbreite. Hier standen damit drei Zahlen für
 * dasselbe Raster: 1360 (hier), 1280 (theme.json und docs/14 Zeile 52) und
 * 1400 (die Wirklichkeit).
 *
 * Der !default steht deshalb jetzt auf der gemessenen Zahl. Sichtbar wird das
 * erst, wenn auch `theme.json` und die Dokuzeile nachgezogen werden – beide
 * liegen außerhalb dieses Bereichs. Den Container umgekehrt auf 1280 zu
 * verengen wäre der teurere Weg: Er verschiebt jede Seite und macht die
 * Dreierkacheln schmaler, was der Benchmarkvorgabe „größere Kacheln"
 * zuwiderläuft.
 *
 * Verwender von --rc-container: components/_buybox.scss:63,
 * layout/_pdp.scss:1986, utilities/_sections.scss:84 (.rc-width-wide).
 */
:root {
  --rc-primary: #2F5D50;
  --rc-primary-dark: #23453B;
  --rc-primary-hover: #27503f;
  --rc-primary-soft: #E8EFE9;
  --rc-primary-softer: #f1f5f1;
  --rc-accent: #B4573A;
  --rc-accent-soft: #F7EBE5;
  /*
     * Dieselbe Terrakotta, eine Stufe dunkler – für Text auf der Sandfläche.
     *
     * Die Abnahme hat #9D4A31 als „vierte Terrakotta-Nuance außerhalb der
     * Palette" gemeldet und vorgeschlagen, sie auf --rc-red-text (#9E3527) zu
     * ziehen. Das wäre falsch: --rc-accent erreicht auf Sand #F2EDE5 gemessen
     * nur 4,13:1 und fällt damit unter 4,5:1, #9D4A31 erreicht dort 5,21:1 und
     * auf Weiß 6,07:1. Der Wert ist also keine Nachlässigkeit, sondern eine
     * ausgemessene Kontraststufe – #9E3527 würde den Farbton von Terrakotta
     * nach Rot kippen und stünde neben den übrigen Terrakotta-Elementen
     * desselben Blocks als Fremdkörper.
     *
     * Er stand nur an der falschen Stelle: fest verdrahtet in
     * `components/_kaufberater.scss:145` statt in der Palette. Hier ist er
     * jetzt benannt; die Zeile im Kaufberater zeigt noch auf den Hexwert und
     * gehört bei der nächsten Berührung dieser Datei auf dieses Token.
     */
  --rc-accent-on-sand: #9d4a31;
  --rc-secondary: var(--rc-accent);
  --rc-secondary-soft: var(--rc-accent-soft);
  --rc-red: #B8402F;
  --rc-red-deep: #9e3527;
  --rc-red-text: #9e3527;
  --rc-red-soft: #FBEAE6;
  --rc-success: #2F7D5B;
  --rc-success-soft: #EAF5EF;
  --rc-warning: #a86512;
  --rc-warning-soft: #fbf3e6;
  --rc-bg: #FBF9F6;
  --rc-surface-warm: #f2ede5;
  --rc-bg-warm: var(--rc-surface-warm);
  --rc-surface: #ffffff;
  --rc-text: #23201C;
  --rc-text-soft: #423d36;
  --rc-muted: #5A544C;
  --rc-disabled: #9c948a;
  --rc-border: #E3DDD3;
  --rc-border-strong: #cfc6b9;
  /*
     * Haarlinie innerhalb einer Fläche – dort, wo --rc-border schon zu laut
     * ist, etwa zwischen den Einträgen eines Aufklappmenüs.
     *
     * Der Name war bereits im Einsatz, das Token aber nie angelegt:
     * `layout/_navigation.scss:173` schreibt
     * `var(--rc-border-subtle, rgba(0, 0, 0, 0.06))`. getComputedStyle liefert
     * für --rc-border-subtle auf allen geprüften Seiten den leeren String –
     * gegriffen hat also immer der schwarze Ersatzwert, und ein Ersatzwert, der
     * immer greift, ist kein Ersatzwert. Schwarz ist außerdem das einzige
     * Kaltgrau, das dieses Theme sonst nirgends benutzt.
     *
     * Deckkraft bleibt bei 0,06, damit sich die Linie optisch nicht ändert;
     * nur der Grundton wird warm wie bei den Schatten (--rc-scrim-rgb).
     */
  --rc-border-subtle: rgba(var(--rc-scrim-rgb), 0.06);
  --rc-star: #c8871f;
  /*
     * Verdunkelung über Fotos (Kacheln, Hero, Bildüberschriften).
     *
     * Vorher rgba(11, 54, 85, …) – ein kräftiges Blau, das über jedem
     * Wohnraumfoto lag und die Bilder eingefärbt hat. Jetzt der warme
     * Textton: Er dunkelt ab, ohne dem Foto eine zweite Farbe aufzuzwingen.
     */
  --rc-scrim-rgb: 35, 32, 28;
  --rc-on-dark: rgba(255, 255, 255, 0.88);
  --rc-on-dark-muted: rgba(255, 255, 255, 0.72);
  /*
     * Farbe des Tastaturfokus-Rings.
     *
     * Bisher stand die Terrakotta fest in base/_focus.scss. Gegen Weiß trägt
     * sie mit 4,81:1, auf den farbigen Leisten des Kopfbereichs aber nicht:
     * gemessen 1,46:1 auf der Aktionsleiste (#9E3527) und 1,56:1 auf der
     * Servicezeile (#2F5D50) – WCAG 1.4.11 verlangt 3:1. Betroffen waren die
     * ersten beiden Tabstopps nach den Sprunglinks.
     *
     * Als eigenes Token kann eine dunkle Fläche den Ring lokal umstellen;
     * base/_focus.scss legt zusätzlich einen weißen Trennstreifen unter den
     * Ring, damit er auch ohne eine solche Umstellung auf jedem Untergrund
     * sichtbar bleibt (Weiß auf Aktionsleiste 7,02:1, auf Servicezeile 7,49:1).
     */
  --rc-focus-ring: var(--rc-accent);
  /*
     * ── Typografie ───────────────────────────────────────────
     *
     * Werte aus der Benchmark-Tabelle (Seite 35). Die Überschriften sind
     * deutlich gestuft; bei 86 % Presbyopie ab 40 Jahren ist 18 px die
     * Untergrenze für Fließtext, nicht das Optimum.
     *
     * ── Auditbefund P1-25, hier an der Wurzel geschlossen ────────────────
     *
     * `--rc-fs-xs` stand auf 16 px. Gemessen mit tools/qa über Startseite,
     * Kategorie, Produktseite und Warenkorb bei 390 und 1440 px – gezählt
     * werden Elemente mit eigenem sichtbarem Text:
     *
     *              1440 px            390 px
     *   Start      245 von 667        448 von 630   unter 17 px
     *   Kategorie  236 von 594        420 von 550
     *   PDP         58 von 318         90 von 155
     *   Warenkorb   16 von 110         40 von  69
     *   Fußzeile     0                  4
     *
     * Bis auf drei Signaturen (siehe unten) hing das alles an diesem einen
     * Token. Entscheidend war, WAS daran hängt – die größten Textmengen,
     * summiert über alle acht Seiten-/Breitenkombinationen:
     *   3472 Zeichen / 112 Elemente  „inkl. MwSt. zzgl. Versandkosten"
     *   2746 Zeichen / 272 Elemente  Rabattchip „−20 %"
     *   2576 Zeichen / 112 Elemente  „Lieferzeit 3–5 Werktage"
     *   1795 Zeichen / 157 Elemente  Eckdaten-Label der Kachel
     *   1760 Zeichen / 110 Elemente  „Regulärer Preis:" (nur für Screenreader)
     *   1243 Zeichen / 113 Elemente  Beschriftung des Vergleichen-Knopfes
     *   1046 Zeichen / 111 Elemente  durchgestrichener Vergleichspreis
     *    840 Zeichen /  56 Elemente  Knopf „Produkt ansehen"
     *    538 Zeichen /  48 Elemente  Herstellername in der Kachel
     *    480 Zeichen /  16 Elemente  Öffnungszeiten
     * Pflichtangabe, Lieferzeit, Preis, Bedienelemente: Das ist Text, den
     * jemand liest, um zu kaufen, keine Kleinstbeschriftung. Deshalb steigt
     * das Token selbst auf die Grenze, statt 47 Fundstellen von
     * `var(--rc-fs-xs)` in fremden Dateien einzeln abzufangen.
     *
     * Nachgemessen bleiben je Seite und Breite genau zwei Elemente unter
     * 17 px, und beide tragen ein einziges Zeichen: der Warenkorbzähler
     * (11 px, fester Kasten 18 × 18 px, layout/_header.scss) und das
     * Prozentzeichen neben „Angebote" (11 px, 20 × 20 px,
     * layout/_navigation.scss). Dazu unter 480 px die Aktionsleiste mit
     * fest verdrahteten 15 px (layout/_promo-bar.scss). Alle drei liegen
     * außerhalb dieser Datei.
     *
     * Layoutfolgen, nachgemessen: Produktkachel 714 → 748 px hoch (1440 px)
     * bzw. 715 → 726 px (390 px), Filterleiste und Warenkorbzeile
     * unverändert, Dokumentbreite bei 320, 390 und 1440 px unverändert, kein
     * zusätzliches Element ragt aus dem sichtbaren Bereich.
     *
     * `--rc-fs-xs` und `--rc-fs-sm` sind seither derselbe Wert. Das ist kein
     * Versehen: Unterhalb von 17 px gibt es für lesbaren Text keine zweite
     * Stufe mehr. Beide Namen bleiben, weil 47 plus 121 Fundstellen in
     * fremden Dateien darauf zeigen und ein Sammel-Umbenennen dieser 168
     * Stellen mehr Risiko als Nutzen hat.
     */
  /*
     * Untergrenze für Beschriftungen, die niemand liest, sondern erkennt:
     * ein Zähler, ein Symbolzeichen. WCAG und der Benchmark meinen mit der
     * 17-px-Grenze lesbaren Text, nicht jede Beschriftung – dafür dieser
     * eigene Name statt einer Ausnahme im Fließtext-Token.
     *
     * Ehrlich gesagt: Noch zeigt keine Regel hierher. Die beiden Kandidaten
     * stehen mit fest verdrahteten 11 px in layout/_header.scss (Zeile 567)
     * und layout/_navigation.scss (Zeile 670), also außerhalb dieser Datei.
     * Gemessen: Das Prozentabzeichen verträgt 16 px ohne jede Änderung –
     * sein Kasten bleibt 20 × 20 px und läuft nicht über. Der Warenkorb-
     * zähler nicht: Sein Kasten hat innen nur 14 px, eine 16-px-Zeile wäre
     * 2 px zu hoch. Er braucht erst einen größeren Kasten.
     */
  --rc-fs-micro: 1rem;
  --rc-fs-xs: 1.0625rem;
  --rc-fs-sm: 1.0625rem;
  --rc-fs-base: 1.1875rem;
  --rc-fs-lg: 1.375rem;
  --rc-fs-xl: 1.6875rem;
  --rc-fs-2xl: 2.125rem;
  --rc-fs-3xl: 2.875rem;
  --rc-fs-4xl: 3.5rem;
  --rc-lh-tight: 1.15;
  --rc-lh-heading: 1.25;
  --rc-lh-body: 1.7;
  --rc-fw-regular: 400;
  --rc-fw-medium: 500;
  --rc-fw-semibold: 600;
  --rc-fw-bold: 700;
  --rc-space-1: 4px;
  --rc-space-2: 8px;
  --rc-space-3: 12px;
  --rc-space-4: 16px;
  --rc-space-5: 24px;
  --rc-space-6: 32px;
  --rc-space-7: 48px;
  --rc-space-8: 64px;
  --rc-space-9: 80px;
  --rc-space-10: 96px;
  --rc-space-11: 112px;
  --rc-radius-control: 8px;
  --rc-radius-card: 12px;
  --rc-radius-visual: 20px;
  --rc-radius-pill: 999px;
  /*
     * ── Höhen für Bedienelemente ─────────────────────────────
     *
     * Die kleine Stufe stand auf 40px. Gemessen auf dem Telefon (390px) lagen
     * damit fünf Ziele unter der 44-px-Grenze der Zielgruppenvorgabe, und alle
     * fünf hingen an genau diesem Token:
     *   .btn-sm            162–239 x 40   die sechs Kachelknöpfe der Startseite
     *   .rc-compare-toggle 121 x 40       „Vergleichen" in jeder Produktkachel
     *   .rc-password__toggle 101 x 40     „Anzeigen" am Passwortfeld
     *   .form-check         40 hoch       Filterkästchen der Kategorieseiten
     *   .dropdown-item      40 hoch       Einträge im Konto-Aufklappmenü
     *
     * Alle acht Verwender von --rc-control-sm sind Ziele, die angetippt werden;
     * eine 40-px-Stufe ist für dieses Projekt deshalb schlicht keine gültige
     * Höhe für ein Bedienelement. Deshalb steigt das Token statt acht
     * Fundstellen einzeln. Die Stufen heißen jetzt 44/48/56 statt 40/48/56.
     *
     * Folge außerhalb der Ziele: `.rc-promo-bar__inner` nutzt dasselbe Token
     * als Mindesthöhe der Aktionsleiste – die Leiste wird auf jeder Seite 4px
     * höher. Das ist gewollt, ihr Inhalt ist selbst ein Link.
     */
  --rc-control-sm: 44px;
  --rc-control-md: 48px;
  --rc-control-lg: 56px;
  --rc-shadow: 0 1px 2px rgba(var(--rc-scrim-rgb), 0.05), 0 2px 8px rgba(var(--rc-scrim-rgb), 0.05);
  --rc-shadow-raised: 0 2px 4px rgba(var(--rc-scrim-rgb), 0.07), 0 8px 24px rgba(var(--rc-scrim-rgb), 0.09);
  --rc-shadow-sm: var(--rc-shadow);
  --rc-shadow-md: var(--rc-shadow-raised);
  --rc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --rc-dur-btn: 150ms;
  --rc-dur-card: 200ms;
  --rc-dur-dropdown: 200ms;
  --rc-dur-drawer: 250ms;
  --rc-container: 1280px;
  --rc-section-desktop: 96px;
  --rc-section-mobile: 64px;
  /*
     * 66ch als Vorgabe für schmale Spalten.
     *
     * Achtung, der Wert ist NICHT die Zeichenzahl: `ch` misst die Breite der
     * Ziffer Null, die in dieser Schrift rund 1,25-mal breiter ist als das
     * mittlere Zeichen deutschen Fließtexts. 66ch ergeben gemessen rund 83
     * Zeichen je Zeile.
     *
     * Für lange Lesetexte ist das zu viel – dort setzt `pages/_service.scss`
     * innerhalb von `.rc-longform` auf 54ch herunter (nachgemessen 65–68
     * Zeichen). Hier bleibt es bei 66ch, weil der Wert auf Produktseiten in
     * ohnehin schmaleren Spalten steht und dort nicht der begrenzende ist –
     * eine globale Senkung würde dort erst eine Einschränkung schaffen.
     */
  --rc-measure: 66ch;
}
/*
 * Mobile Stufe der Typo-Skala.
 *
 * Die Benchmark-Tabelle führt zwei Spalten – 46/34 px für H1, 34/27 für H2 und
 * so fort. Ohne die zweite Spalte stünde eine 46 Pixel große Überschrift auf
 * einem 360 Pixel breiten Gerät über vier Zeilen.
 */
@media (max-width: 767px) {
  :root {
    /*
         * Hier stand `--rc-fs-sm: 1rem`. Die zweite Hälfte von P1-25: Was auf
         * dem Desktop 17 px hatte, fiel auf dem Handy auf 16. Gemessen auf der
         * Startseite 448 Elemente unter 17 px bei 390 px gegen 245 bei
         * 1440 px – 210 davon gibt es nur mobil, angeführt von den Eckdaten
         * der Kacheln („Geschwindigkeit" und „15 km/h", je 75 Stück) und dem
         * Knopf „Produkt ansehen" (28). Das kleinere Gerät bekam die kleinere
         * Schrift, obwohl die Zielgruppe dort schlechter liest.
         *
         * Die Zeile ist deshalb ersatzlos weg; `--rc-fs-sm` bleibt bei 17 px.
         * Nachgemessen: kein Element wächst über seinen Kasten hinaus, die
         * Dokumentbreite bleibt bei 390 px und bei 320 px unverändert bei der
         * Fensterbreite. Nur die Überschriften brauchen weiter eine zweite
         * Spalte – 46 px H1 stünden auf 360 px über vier Zeilen.
         */
    --rc-fs-base: 1.125rem;
    --rc-fs-lg: 1.25rem;
    --rc-fs-xl: 1.4375rem;
    --rc-fs-2xl: 1.6875rem;
    --rc-fs-3xl: 2.125rem;
    --rc-fs-4xl: 2.375rem;
  }
}
/*
 * Typografie – EIN System für den ganzen Shop.
 *
 * Vor dem Refactor waren 18 Überschriften- und 13 Schriftgrößen-Varianten im
 * Einsatz; H3 erschien mit 18 px und 20 px, Zeilenhöhen schwankten zwischen
 * 24 und 33 px. Hier gilt: eine Größe je Ebene, eine Zeilenhöhe je Zweck.
 *
 * Zielgruppe 65–80 Jahre: Fließtext 18–19 px, Zeilenhöhe 1,7, Untergrenze für
 * lesbaren Text 17 px. Die früher hier notierten 15 px sind überholt – das
 * Token --rc-fs-xs liefert seit dem Schließen von P1-25 selbst 17 px.
 */
body {
  color: var(--rc-text);
  background-color: var(--rc-bg);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1, .h1, h2, .h2, h3, .h3, .btn, .main-navigation-link {
  hyphens: manual;
  -webkit-hyphens: manual;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  letter-spacing: -0.01em;
  margin-top: 0;
}
h1, .h1 {
  font-size: var(--rc-fs-3xl);
  line-height: var(--rc-lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--rc-space-4);
}
h2, .h2 {
  font-size: var(--rc-fs-2xl);
  margin-bottom: var(--rc-space-4);
}
h3, .h3 {
  font-size: var(--rc-fs-xl);
  margin-bottom: var(--rc-space-3);
}
h4, .h4, h5, .h5, h6, .h6 {
  font-size: var(--rc-fs-lg);
  margin-bottom: var(--rc-space-2);
}
/*
 * Hier stand eine zweite, fest verdrahtete Mobilskala:
 *
 *     @media (max-width: 767px) {
 *         h1, .h1 { font-size: 1.875rem; }   // 30px
 *         h2, .h2 { font-size: 1.5rem; }     // 24px
 *         h3, .h3 { font-size: 1.25rem; }    // 20px
 *     }
 *
 * Sie ist ersatzlos weg. Die Tokens tragen ihre Mobilstufe längst selbst
 * (`abstracts/_tokens.scss`, @media max-width: 767px: 34 / 27 / 23 px, genau die
 * Tabelle aus docs/14-designsystem-2026.md Zeile 40–42). Diese Regel stand
 * daneben und hat sie überschrieben – drei Ebenen lagen dadurch je eine Stufe
 * zu tief, ohne dass irgendwo stand, warum.
 *
 * Gemessen vorher über die Breitenreihe 320/360/390/420/600/767/768/1440 auf
 * 16 Seiten (tools/qa/_rep-system.mjs typo, Rohwerte in
 * tools/qa/_rep-system-typo-vorher.json):
 *
 *     H1 auf allen Service-, Rechts-, Ratgeber-, Such- und Anmeldeseiten
 *       320–400 px  27 px   (dazu die gestrichene Regel unten, siehe dort)
 *       420–767 px  30 px   statt der 34 px, die --rc-fs-3xl mobil liefert
 *     H2 auf Angebote, Ratgeber-Übersicht und der Startseite ab 600 px
 *       bis 767 px  24 px   statt 27 px
 *
 * Nachgemessen mit derselben Kaskade wie nach dem Bau (die drei Regeln wurden
 * zur Laufzeit über die CSSOM aus dem Stylesheet gelöscht,
 * tools/qa/_rep-system.mjs probe): H1 steht auf allen zehn betroffenen Seiten
 * bei 320 bis 767 px auf 34 px, die H2 daneben auf 27 px – die Stufe ist zurück.
 * Auf keiner der 16 Seiten und keiner der sechs Breiten wächst die
 * Dokumentbreite über die Fensterbreite hinaus.
 *
 * Zur H3-Zeile ehrlich: Sie hat nichts Sichtbares geändert. Auf jeder
 * gemessenen Seite setzt eine Komponentenregel die erste H3 ohnehin selbst
 * (Produktseite und Ratgeber-Übersicht 20 px, Ratgeber-Artikel und Widerruf
 * 23 px, Kategoriekacheln 17 px aus dem CMS-Plugin). Sie fällt trotzdem mit,
 * weil eine Skala nicht an einer Stelle aus Tokens und an der anderen aus festen
 * rem-Werten bestehen soll.
 */
p {
  line-height: var(--rc-lh-body);
  margin-bottom: var(--rc-space-4);
}
.rc-legal p, .rc-article__content p, .product-detail-description p {
  max-width: var(--rc-measure);
}
small, .small {
  font-size: var(--rc-fs-xs);
  line-height: 1.5;
}
strong, b {
  font-weight: var(--rc-fw-semibold);
}
.rc-lead {
  font-size: var(--rc-fs-lg);
  color: var(--rc-text-soft);
  line-height: 1.55;
}
.rc-muted {
  color: var(--rc-muted);
}
a {
  color: var(--rc-primary);
  text-underline-offset: 3px;
  transition: color var(--rc-dur-btn) var(--rc-ease);
}
a:hover {
  color: var(--rc-primary-hover);
}
/*
 * Unterstreichung ausschließlich bei Fließtext-Links.
 * Karten-, Kachel- und Button-artige Links reagieren über Farbe oder Fläche –
 * eine mehrzeilige Unterstreichung wirkt dort unruhig.
 */
.rc-footer-consult__phone, .rc-buybox__consult, .rc-flyout__phone, .rc-offcanvas-consult__phone, .rc-utility-bar__phone, .rc-header__phone, .rc-need-selector__tile a, .rc-category-tiles__text a, .rc-guide-grid__text a, .rc-suggest__item, .product-name, .rc-related-cats a, .rc-promo-bar__link, .rc-card a.rc-card__link {
  text-decoration: none;
}
.rc-footer-consult__phone:hover, .rc-footer-consult__phone:focus-visible, .rc-buybox__consult:hover, .rc-buybox__consult:focus-visible, .rc-flyout__phone:hover, .rc-flyout__phone:focus-visible, .rc-offcanvas-consult__phone:hover, .rc-offcanvas-consult__phone:focus-visible, .rc-utility-bar__phone:hover, .rc-utility-bar__phone:focus-visible, .rc-header__phone:hover, .rc-header__phone:focus-visible, .rc-need-selector__tile a:hover, .rc-need-selector__tile a:focus-visible, .rc-category-tiles__text a:hover, .rc-category-tiles__text a:focus-visible, .rc-guide-grid__text a:hover, .rc-guide-grid__text a:focus-visible, .rc-suggest__item:hover, .rc-suggest__item:focus-visible, .product-name:hover, .product-name:focus-visible, .rc-related-cats a:hover, .rc-related-cats a:focus-visible, .rc-promo-bar__link:hover, .rc-promo-bar__link:focus-visible, .rc-card a.rc-card__link:hover, .rc-card a.rc-card__link:focus-visible {
  text-decoration: none;
}
.rc-footer-consult__phone *, .rc-buybox__consult *, .rc-flyout__phone *, .rc-offcanvas-consult__phone *, .rc-utility-bar__phone *, .rc-header__phone *, .rc-need-selector__tile a *, .rc-category-tiles__text a *, .rc-guide-grid__text a *, .rc-suggest__item *, .product-name *, .rc-related-cats a *, .rc-promo-bar__link *, .rc-card a.rc-card__link * {
  text-decoration: none;
}
.card, .card-body, .list-group-item, .form-label, .form-text, .table, .alert, .dropdown-item, label {
  color: inherit;
}
.rc-price, .rc-spec-value, .product-price, .product-detail-price {
  font-variant-numeric: tabular-nums;
}
.wishlist-listing-col .wishlist-listing-header, .card h1.card-title, .card .card-title.h1 {
  font-size: var(--rc-fs-3xl);
  line-height: var(--rc-lh-tight);
  font-weight: var(--rc-fw-semibold);
  letter-spacing: -0.02em;
}
/*
 * Letzte Kleinschrift, die das Token nicht erreicht.
 *
 * Nach dem Anheben von --rc-fs-xs blieben auf Start, Kategorie, Produktseite
 * und Warenkorb genau vier Signaturen unter 17 px. Die anderen drei sind der
 * Warenkorbzähler und das Prozentzeichen neben „Angebote" (je 11 px, je ein
 * einziges Zeichen) sowie die Aktionsleiste unter 480 px (15 px, fest
 * verdrahtet in layout/_promo-bar.scss).
 *
 * Diese hier ist die einzige, die lesbarer Text ist: „Zum Merkzettel
 * hinzufügen" stand mit 12 px in einem 160 × 20 px großen Kasten, gemessen
 * gleich auf 390 und 1440 px. Die Größe kommt aus dem Storefront-Kern
 * (.product-wishlist-btn-content-sm), nicht aus dem Theme, deshalb greift
 * kein Token und es braucht diese Regel. Nachgemessen ergibt sie 17 px in
 * einem 227 × 29 px großen Kasten, auf beiden Breiten, ohne Umbruch.
 *
 * Es ist die Beschriftung eines Bedienelements, nicht eine Fußnote: Wer sie
 * nicht liest, findet den Merkzettel nicht. 17 px sind hier Untergrenze, nicht
 * Komfort.
 */
.product-wishlist-action .product-wishlist-btn-content, .product-wishlist-action .product-wishlist-btn-content-sm {
  font-size: var(--rc-fs-xs);
}
@media (max-width: 400px) {
  /*
     * Hier stand zusätzlich `h1, .h1 { font-size: var(--rc-fs-2xl); }`.
     *
     * --rc-fs-2xl ist die H2-Stufe. Unter 400 px waren Seitentitel und
     * Abschnittstitel damit exakt gleich groß: gemessen 27/27 px auf AGB,
     * Datenschutz, Widerruf, Versand, Zahlungsarten, Kontakt, Barrierefreiheit
     * und dem Ratgeber-Artikel – acht von sechzehn geprüften Seiten. Zwischen
     * „Versand & Lieferung" und „Die drei Lieferwege" war kein Unterschied
     * mehr zu sehen; die Gliederung verschwand ausgerechnet auf dem Gerät, auf
     * dem die Zielgruppe am schlechtesten liest. Die Spannweite der Skala fiel
     * von 19 px (46/34/27) auf 4 px (27/27/23).
     *
     * Die Regel war als Überlaufschutz für lange deutsche Komposita gedacht.
     * Den leisten die drei Zeilen darüber bereits allein: Silbentrennung plus
     * `overflow-wrap: break-word`. Nachgemessen bei 320, 360 und 390 px mit
     * einer H1 auf 34 px (--rc-fs-3xl, Laufzeitprobe über eingespieltes CSS,
     * 16 Seiten): die Dokumentbreite bleibt auf jeder Seite exakt gleich der
     * Fensterbreite, keine Überschrift schiebt die Seite waagerecht auf.
     */
  h1, .h1, h2, .h2, h3, .h3 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}
img {
  height: auto;
}
/*
 * Fokus-Stile – deutlich sichtbar (WCAG 2.4.7), einheitlich für alle Interaktionselemente.
 * Klassische Selektorlisten statt :where() – scssphp-Kompatibilität.
 */
/*
 * Zweifarbig statt einfarbig – gemessener Grund.
 *
 * Der Ring stand auf `2px solid var(--rc-secondary)`, also Terrakotta #B4573A.
 * Auf hellem Grund trägt das: 4,81:1 gegen Weiß. Auf den beiden farbigen
 * Leisten des Kopfbereichs nicht:
 *
 *     Aktionsleiste  #9E3527   1,46:1
 *     Servicezeile   #2F5D50   1,56:1
 *
 * WCAG 2.2 (1.4.11) verlangt 3:1. Betroffen waren ausgerechnet die ersten
 * beiden Tabstopps nach den Sprunglinks – wer mit der Tastatur einsteigt, sieht
 * dort nicht, wo er steht. Dieselbe Rechnung gilt für jede weitere dunkle
 * Fläche des Shops (Fußzeile, Kopfzeile, Beratungsbänder).
 *
 * Statt jede dunkle Fläche einzeln aufzuzählen liegt jetzt ein weißer
 * Trennstreifen zwischen Element und Ring: `outline-offset: 2px` lässt genau
 * 2px Luft, ein `box-shadow` mit 2px Streuung füllt sie. Weiß erreicht 7,02:1
 * auf der Aktionsleiste und 7,49:1 auf der Servicezeile; auf hellem Grund fällt
 * der Streifen nicht auf und der Terrakottaring trägt weiter allein.
 *
 * Der Ring bleibt außerdem über --rc-focus-ring umstellbar, falls eine Fläche
 * doch einmal eine eigene Farbe braucht.
 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--rc-focus-ring);
  outline-offset: 2px;
  border-radius: var(--rc-radius-control);
  box-shadow: 0 0 0 2px #fff;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
  outline: none;
}
/*
 * Bewegung: kurz, ruhig, immer als Antwort auf eine Handlung.
 *
 * Der Betreiber: „mehr animationen". Das ist hier als Rückmeldung umgesetzt,
 * nicht als Zierde – jede Regel unten hängt an :hover, :focus-visible,
 * :active oder am Öffnen eines Fensters. Was beim Scrollen von selbst
 * einfliegt, gibt es weiterhin nicht: Die Designvorgabe des Betreibers zum
 * Benchmark 2026 schließt Scroll-Animationen aus, und für eine Zielgruppe ab
 * 65 ist ein Text, der erst beim Hinsehen erscheint, ein Hindernis und kein
 * Effekt.
 *
 * Bewegt werden ausschließlich `transform`, `opacity` und `box-shadow`. Diese
 * drei zeichnet der Browser ohne neuen Umbruch – die Bildrate hält auch ein
 * älteres Tablet. Eine Animation auf `height` oder `top` täte das nicht.
 *
 * Wege bleiben klein (2 bis 4 px, 1 bis 3 %) und Dauern kurz (150 bis 250 ms
 * aus den Token). Größer wirkt schnell nach Spielerei, und wer eine Maus
 * langsam führt, soll nicht warten müssen, bis eine Kachel fertig gewachsen
 * ist.
 *
 * Ganz unten hebt `prefers-reduced-motion` alles auf. Diese Einstellung
 * treffen gerade ältere Menschen bewusst, oft wegen Schwindel.
 */
.rc-hover-zoom img {
  transition: transform var(--rc-dur-card) var(--rc-ease);
}
.rc-hover-zoom:hover img {
  transform: scale(1.02);
}
/*
 * Die Produktkachel steht NICHT hier, sondern in components/_product-card.
 * Grund: Diese Datei wird als base/motion vor den Komponenten eingebunden
 * (base.scss:8 vor :16), und die Kachel setzt dort ihr eigenes `transition`.
 * Eine Liste hier würde stillschweigend überschrieben – die Kachel bekäme
 * ihre Anhebung ohne Übergang, also einen Sprung.
 */
/* ── Kategoriekacheln der Startseite ────────────────────────────────────
 *
 * Dieselbe Sprache wie bei der Produktkachel, nur deutlicher: Diese Kacheln
 * sind Bild mit Textauflage, und ein Zoom von 4 % liest sich dort ruhiger als
 * an einem freigestellten Produktfoto auf Weiß. Die Auflage wird beim
 * Überfahren eine Spur dichter, damit die Schrift auf dem bewegten Bild nicht
 * verliert.
 */
.rc-category-tiles__tile {
  transition: transform var(--rc-dur-card) var(--rc-ease), box-shadow var(--rc-dur-card) var(--rc-ease);
}
.rc-category-tiles__image {
  transition: transform var(--rc-dur-drawer) var(--rc-ease);
}
.rc-category-tiles__overlay {
  transition: opacity var(--rc-dur-card) var(--rc-ease);
}
.rc-category-tiles__tile:hover, .rc-category-tiles__tile:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--rc-shadow-raised);
}
.rc-category-tiles__tile:hover .rc-category-tiles__image, .rc-category-tiles__tile:focus-within .rc-category-tiles__image {
  transform: scale(1.04);
}
/* ── Servicekarten ──────────────────────────────────────────────────── */
.rc-service-cards__card {
  transition: transform var(--rc-dur-card) var(--rc-ease), box-shadow var(--rc-dur-card) var(--rc-ease);
}
.rc-service-cards__card:hover, .rc-service-cards__card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow-raised);
}
/* ── Knöpfe: Druckpunkt ─────────────────────────────────────────────────
 *
 * Ein Knopf, der beim Drücken nichts tut, lässt im Zweifel zweimal drücken –
 * und ein zweiter Klick auf „In den Warenkorb" ist ein echter Ärger. Die
 * 98 % sind bewusst klein: Sie sind zu spüren, ohne dass die Beschriftung
 * unscharf wird.
 */
.btn {
  transition: transform var(--rc-dur-btn) var(--rc-ease), box-shadow var(--rc-dur-btn) var(--rc-ease), background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease), color var(--rc-dur-btn) var(--rc-ease);
}
.btn:active:not(:disabled):not(.disabled) {
  transform: scale(0.98);
}
/*
 * Der Hauptknopf hebt sich beim Überfahren zusätzlich an. Nur er – wären es
 * alle Knöpfe, führte die Seite den Blick nicht mehr.
 */
.btn-primary:hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
  box-shadow: var(--rc-shadow-raised);
}
/* ── Merkzettel ─────────────────────────────────────────────────────────
 *
 * Das Herz springt einmal kurz auf, wenn es gesetzt wird. Das ist die
 * einzige Stelle, an der eine Handlung sonst gar keine sichtbare Folge auf
 * der Seite hätte – der Zähler oben im Kopf ist weit weg vom Finger.
 */
@keyframes rc-herz-puls {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.product-wishlist .icon {
  transition: transform var(--rc-dur-btn) var(--rc-ease);
}
.product-wishlist:hover .icon {
  transform: scale(1.12);
}
.product-wishlist.product-wishlist-added .icon {
  animation: rc-herz-puls var(--rc-dur-drawer) var(--rc-ease);
}
/* ── Beraterfenster ─────────────────────────────────────────────────────
 *
 * Das Fenster legt sich nicht schlagartig über die Seite, sondern steigt aus
 * 12 px Tiefe auf. Das erklärt in einem Viertelsekunde, was passiert ist:
 * Ein Fenster ist dazugekommen, die Seite darunter ist noch da.
 */
@keyframes rc-fenster-auf {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rc-schleier-auf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.rc-kbm__dialog {
  animation: rc-fenster-auf var(--rc-dur-drawer) var(--rc-ease);
}
.rc-kbm__hinterg {
  animation: rc-schleier-auf var(--rc-dur-drawer) var(--rc-ease);
}
/*
 * Die Antwortkarten im Berater. Sie sind das, was in diesem Fenster
 * angefasst wird, und waren bisher unbewegt.
 */
.rc-kbm__option {
  transition: transform var(--rc-dur-btn) var(--rc-ease), box-shadow var(--rc-dur-btn) var(--rc-ease), background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-kbm__option:hover {
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow-raised);
}
.rc-kbm__option:active {
  transform: scale(0.99);
}
/* ── Zurücknahme ────────────────────────────────────────────────────────
 *
 * Wer „Bewegung reduzieren" eingestellt hat, bekommt keine. Das gilt auch
 * für alles oben – deshalb steht diese Regel am Ende der Datei und greift
 * über `*`.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*
 * Scroll-Einblendungen – abgeschaltet.
 *
 * Der Benchmark 2026 (Seite 36) verlangt: „Keine scroll-getriggerten
 * Einblendungen. Inhalt ist beim Laden vollständig da – wer mit
 * Bildschirmvergrößerung arbeitet, sieht ihn sonst nie."
 *
 * Der Grund ist konkret: Bei 200 % Vergrößerung liegt der sichtbare Ausschnitt
 * regelmäßig unterhalb der Auslöseschwelle. Der Abschnitt blieb dann dauerhaft
 * auf Deckkraft 0 – kein Schönheitsfehler, sondern verlorener Inhalt. Für eine
 * Zielgruppe mit 86 % Presbyopie ist das der Regelfall, nicht der Randfall.
 *
 * Die Klassen bleiben im Markup, damit an dreißig Stellen nichts umgebaut
 * werden muss – sie tun nur nichts mehr. Wer die Einblendung zurückholen will,
 * braucht dafür ein anderes Argument als „sieht schöner aus".
 */
.rc-reveal, .rc-reveal--stagger, .rc-reveal--stagger > * {
  opacity: 1;
  transform: none;
}
/*
 * Symbole.
 *
 * Zwei Korrekturen am Shopware-Standard, beide mit Wirkung im ganzen Shop.
 *
 * 1. `top: 0.25em` am SVG.
 *    Der Kern verschiebt jedes Symbol um ein Viertel der Schriftgröße nach
 *    unten – gedacht für Symbole, die in einer Textzeile mitlaufen. In allen
 *    Flex-Anordnungen, und das sind hier praktisch alle, steht das Symbol
 *    dadurch systematisch zu tief: gemessen 4 Pixel gegenüber dem Text daneben.
 *    Sichtbar an Herz, Konto und Headset im Kopf, an den Haken in der
 *    Serviceleiste und am Nach-oben-Knopf.
 *
 * 2. `color: $icon-base-color`.
 *    Der Kern schreibt jedem Symbol eine feste graue Farbe zu, statt sie vom
 *    Umfeld erben zu lassen. Auf hellem Grund fällt das nicht auf, auf der
 *    dunkelblauen Serviceleiste stand das Headset dagegen grau auf Blau und
 *    war praktisch nicht zu erkennen.
 *
 * Die Farbhelfer des Kerns (.icon-primary und so weiter) werden danach erneut
 * gesetzt: Sie haben dieselbe Spezifität wie `.icon` und würden sonst allein
 * durch die Reihenfolge verlieren.
 */
.icon {
  color: inherit;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.icon > svg {
  position: static;
  top: auto;
  display: block;
}
.icon-primary {
  color: var(--rc-primary);
}
.icon-secondary {
  color: var(--rc-secondary);
}
.icon-success {
  color: var(--rc-success, #1f7a45);
}
.icon-danger {
  color: var(--rc-red-deep);
}
.icon-light {
  color: var(--rc-on-dark);
}
.icon-dark {
  color: var(--rc-text);
}
/*
 * Größenangaben gehören an den Rahmen, nicht nur an das SVG.
 *
 * Im Kern ist das SVG `width: 100%; height: 100%` seines Rahmens. Wer nur das
 * SVG vergrößert, bekommt ein Symbol, das über seinen Rahmen hinaussteht –
 * gemessen 26 Pixel SVG in einem 22 Pixel großen Rahmen. Diese Hilfsklasse
 * setzt beides zugleich.
 */
/*
 * Fokusring der Produktgalerie – nach innen statt nach außen.
 *
 * Gemessen am Carpo 2 SE, 1440x900, Aufnahme mit Fokus gegen Aufnahme ohne
 * Fokus über eine Messfläche von 620.908 px (Kontrollaufnahme ohne
 * Zustandsänderung: 0 abweichende Pixel):
 *
 *     geänderte Pixel   72   (0,01 % der Fläche)
 *     Ringfarbe Mittel  rgb(134,133,131)   Untergrund rgb(135,133,131)
 *     Kontrast          1,00:1
 *
 * 72 graue Streupixel bei gleicher Mittelfarbe sind kein Ring, das ist
 * Rauschen. getComputedStyle meldet währenddessen brav
 * „rgb(180,87,58) solid 2px offset 2px" und :focus-visible trifft zu – der
 * Ring wird nur nie gezeichnet: outline-offset 2px legt ihn 2px AUSSERHALB der
 * Slide-Box, und die Bühne div.tns-ovh schneidet mit overflow: hidden alles
 * ab, was außerhalb liegt. Zum Vergleich hat dieselbe Messung am Eingabefeld
 * des Kontaktformulars 1774 Ringpixel ergeben.
 *
 * Nach innen gelegt kann nichts mehr abgeschnitten werden. Die Rechnung für
 * die neue Fläche: der Ring läuft am Rand einer 774x774-Kachel umlaufend
 * 3px breit bei 6px Einrückung, das sind rund 4 x (774 - 12) x 3 = 9.144 px
 * gegenüber heute 0 sichtbaren Ringpixeln.
 *
 * Warum zusätzlich ein weißer Streifen nach innen: Produktfotos sind nicht
 * durchgängig hell. Terrakotta rgb(180,87,58) hat gegen Weiß 4,81:1 und liegt
 * damit sicher über den 3:1 aus WCAG 1.4.11, gegen ein dunkles Foto dagegen
 * kann es unter 3:1 fallen. Der 6px-Streifen aus box-shadow inset legt dem
 * Ring einen definierten Untergrund unter, unabhängig vom Bild. box-shadow
 * inset statt eines zweiten outline, weil ein zweiter äußerer Ring wieder
 * abgeschnitten würde.
 *
 * Wirksam wird das erst zusammen mit rc-galerie-a11y.js: die Vorlage nimmt
 * allen Slides den Tabstopp, das Skript gibt ihn dem dargestellten zurück.
 */
img.gallery-slider-image:focus-visible {
  outline: 3px solid var(--rc-secondary);
  outline-offset: -6px;
  box-shadow: inset 0 0 0 6px #fff;
  border-radius: 0;
}
/*
 * Buttons – EIN System.
 *
 * Vor dem Refactor: 22 Varianten mit Höhen von 20 bis 76 px.
 * Jetzt drei Größen, feste Höhe, feste Innenabstände.
 *
 * Wichtigste Regel: Hover, Focus und Active ändern ausschließlich Farbe.
 * Keine Änderung von Rahmenbreite, Padding, Schriftgröße oder Transform –
 * sonst springen Text und Icons im Button.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-space-2);
  height: var(--rc-control-md);
  min-height: var(--rc-control-md);
  padding: 0 var(--rc-space-5);
  border: 1px solid transparent;
  border-radius: var(--rc-radius-control);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease), color var(--rc-dur-btn) var(--rc-ease);
}
.btn:hover, .btn:focus, .btn:focus-visible, .btn:active {
  text-decoration: none;
  transform: none;
}
.btn:disabled, .btn.disabled {
  background-color: var(--rc-bg);
  border-color: var(--rc-border);
  color: var(--rc-disabled);
  cursor: not-allowed;
  opacity: 1;
}
.btn .icon {
  width: 20px;
  height: 20px;
}
.btn .icon > svg {
  width: 20px;
  height: 20px;
}
.btn-sm, .btn-group-sm > .btn {
  height: var(--rc-control-sm);
  min-height: var(--rc-control-sm);
  padding: 0 var(--rc-space-4);
  font-size: var(--rc-fs-xs);
}
.btn-sm .icon, .btn-group-sm > .btn .icon {
  width: 18px;
  height: 18px;
}
.btn-sm .icon > svg, .btn-group-sm > .btn .icon > svg {
  width: 18px;
  height: 18px;
}
.btn-lg, .btn-group-lg > .btn, .btn-buy {
  height: var(--rc-control-lg);
  min-height: var(--rc-control-lg);
  padding: 0 var(--rc-space-6);
  font-size: var(--rc-fs-base);
}
.scroll-up-button .btn {
  width: var(--rc-control-md);
  height: var(--rc-control-md);
  min-width: var(--rc-control-md);
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--rc-shadow-raised);
}
.scroll-up-button .btn .icon {
  width: 20px;
  height: 20px;
}
.scroll-up-button .btn .icon > svg {
  width: 20px;
  height: 20px;
}
.btn-icon {
  width: var(--rc-control-md);
  padding: 0;
  gap: 0;
}
.btn-primary {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--rc-primary-hover);
  border-color: var(--rc-primary-hover);
  color: #fff;
}
.btn-primary:active {
  background-color: var(--rc-primary-dark);
  border-color: var(--rc-primary-dark);
  color: #fff;
}
.btn-secondary, .btn-outline-primary, .btn-outline-secondary {
  background-color: var(--rc-surface);
  border-color: var(--rc-border-strong);
  color: var(--rc-primary);
}
.btn-secondary:hover, .btn-secondary:focus-visible, .btn-outline-primary:hover, .btn-outline-primary:focus-visible, .btn-outline-secondary:hover, .btn-outline-secondary:focus-visible {
  background-color: var(--rc-primary-soft);
  border-color: var(--rc-primary);
  color: var(--rc-primary-dark);
}
.btn-secondary:active, .btn-outline-primary:active, .btn-outline-secondary:active {
  background-color: var(--rc-secondary-soft);
  border-color: var(--rc-primary);
  color: var(--rc-primary-dark);
}
.btn-light {
  background-color: var(--rc-bg);
  border-color: var(--rc-border);
  color: var(--rc-text);
}
.btn-light:hover, .btn-light:focus-visible {
  background-color: var(--rc-primary-soft);
  border-color: var(--rc-border-strong);
  color: var(--rc-primary);
}
.btn-danger {
  background-color: var(--rc-red-deep);
  border-color: var(--rc-red-deep);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus-visible {
  background-color: #b92f38;
  border-color: #b92f38;
  color: #fff;
}
.btn-link, .btn-link-inline, .rc-btn-ghost, .product-price-tax-link, .product-detail-tax-link {
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--rc-primary);
  font-size: inherit;
  font-weight: var(--rc-fw-medium);
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
}
.btn-link:hover, .btn-link:focus-visible, .btn-link-inline:hover, .btn-link-inline:focus-visible, .rc-btn-ghost:hover, .rc-btn-ghost:focus-visible, .product-price-tax-link:hover, .product-price-tax-link:focus-visible, .product-detail-tax-link:hover, .product-detail-tax-link:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--rc-primary-hover);
  text-decoration: underline;
}
/*
 * Der MwSt.-Schalter bleibt vorerst zu klein – hier steht, was gemessen wurde,
 * damit es niemand ein zweites Mal auf diesem Weg versucht.
 *
 * „inkl. MwSt., versandkostenfrei" ist im Kern ein echter Schalter
 * (`<button class="product-price-tax-link btn btn-link-inline">`, Kernvorlage
 * component/product/card/price-unit.html.twig:133) und öffnet die Versandinfo.
 * Gemessen bei 390 px: 244 x 19 px auf der Produktseite, 244 x 26 px in jeder
 * Produktkachel – unter den 44 px, die für diese Zielgruppe gelten. Die Regel
 * darüber nimmt allen `.btn-link`-Varianten bewusst jede Höhe, weil sie mitten
 * im Text stehen können.
 *
 * Der naheliegende Weg – ein Pseudoelement, das die Trefferfläche über die
 * Zeile hinauslegt, ohne das Schriftbild zu ändern – wirkt hier NICHT. Probe
 * über eingespieltes CSS auf der Produktseite bei 390 px: das Pseudoelement
 * misst nachweislich 41 px (getComputedStyle), `document.elementFromPoint`
 * liefert 10 px über der Zeile trotzdem weiter `div.rc-buybox__price` und 10 px
 * darunter `p.delivery-information`. Auch mit `z-index: 1` am Schalter bleibt
 * es dabei – die Nachbarblöcke des Kaufbereichs liegen darüber. Eine Regel, die
 * nur in getComputedStyle steht und im Treffertest nichts ändert, ist
 * Schmuck; deshalb steht hier keine.
 *
 * Zu lösen ist das dort, wo die Stapelung des Kaufbereichs gemacht wird
 * (layout/_pdp.scss) beziehungsweise in der Kachel, deren kartenbreite
 * Klickfläche `.product-name::after` (components/_product-card.scss:323)
 * ohnehin über dem Schalter liegt. Beides außerhalb dieser Datei.
 * Messmittel: tools/qa/_rep-system.mjs (Läufe `nachbarn`, `taxprobe`).
 */
.rc-on-dark .btn-primary, .btn-on-dark {
  background-color: #fff;
  border-color: #fff;
  color: var(--rc-primary);
}
.rc-on-dark .btn-primary:hover, .rc-on-dark .btn-primary:focus-visible, .btn-on-dark:hover, .btn-on-dark:focus-visible {
  background-color: var(--rc-secondary-soft);
  border-color: var(--rc-secondary-soft);
  color: var(--rc-primary-dark);
}
/*
 * Symbole in Schaltflächen tragen die Farbe der Beschriftung.
 *
 * Der Shopware-Kern erzeugt für jede Themefarbe eine Regel
 * `.btn-{farbe} .icon { color: color-contrast(...) }`. Für `.btn-secondary`
 * kam dabei Weiß heraus – auf einer Schaltfläche, die in diesem Theme weiß
 * gefüllt ist und dunkelgrüne Schrift trägt. Ergebnis: 1,0:1, das
 * Headset-Symbol im leeren Warenkorb war schlicht nicht vorhanden.
 *
 * Die Kernregel wiegt zwei Klassen, `.icon { color: inherit }` nur eine. Diese
 * Regel wiegt ebenfalls zwei und steht später in der Kaskade.
 */
.btn .icon {
  color: inherit;
}
/*
 * Weiße Kontur – ausschließlich auf dunklem Grund.
 *
 * `.btn-outline-light` stand hier ohne Bedingung. Shopware setzt dieselbe
 * Klasse aber auch für die Plus- und Minus-Schaltflächen der Mengenauswahl auf
 * der Produktseite, und die liegen auf Weiß: gemessen 1,0:1 – die Symbole waren
 * unsichtbar, die Mengenauswahl faktisch unbedienbar.
 *
 * Die weiße Fassung gilt jetzt nur noch innerhalb einer dunklen Fläche.
 */
.rc-on-dark .btn-secondary, .rc-on-dark .btn-outline-light, .rc-hero__content .btn-outline-light, .rc-consultation-cta .btn-outline-light, .rc-campaign .btn-outline-light {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.rc-on-dark .btn-secondary:hover, .rc-on-dark .btn-secondary:focus-visible, .rc-on-dark .btn-outline-light:hover, .rc-on-dark .btn-outline-light:focus-visible, .rc-hero__content .btn-outline-light:hover, .rc-hero__content .btn-outline-light:focus-visible, .rc-consultation-cta .btn-outline-light:hover, .rc-consultation-cta .btn-outline-light:focus-visible, .rc-campaign .btn-outline-light:hover, .rc-campaign .btn-outline-light:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}
/*
 * Auf hellem Grund verhält sich die Kontur wie jede andere Nebenaktion.
 *
 * Die Fläche ist leicht getönt, nicht weiß: Der Kaufbereich ist selbst weiß,
 * eine weiße Schaltfläche darin wäre nur an ihrem Rahmen zu erkennen. Das
 * betrifft vor allem die Mengenauswahl, wo Plus und Minus die einzigen
 * Bedienelemente sind.
 */
.btn-outline-light {
  background-color: var(--rc-surface-warm);
  border-color: var(--rc-border-strong);
  color: var(--rc-primary);
}
.btn-outline-light:hover, .btn-outline-light:focus-visible {
  background-color: var(--rc-primary-soft);
  border-color: var(--rc-primary);
  color: var(--rc-primary-dark);
}
.btn-block, .btn.w-100 {
  width: 100%;
}
/*
 * Formulare – große Felder, sichtbare Labels, klare Fehler.
 * Für ältere Nutzer: Placeholder ersetzt niemals ein Label.
 */
/*
 * ── Eine eigene Randfarbe für Bedienelemente ─────────────────────────────
 *
 * BEFUND der Endabnahme (Dimension warenkorb, Schwere: wichtig):
 * „Auswahlkästchen und Zahlart-Knöpfe haben nur 1,61:1 Kontrast – WCAG
 * verlangt 3:1."
 *
 * Eigene Nachmessung auf /checkout/confirm, alle sichtbaren
 * `.form-check-input` bei 360, 768, 1024 und 1440 px:
 *
 *   #tos                     rgb(207,198,185) auf rgb(251,249,246)  1,61:1
 *   Express                  dieselbe Farbe                         1,61:1
 *   Vorkasse per Überweisung  dieselbe Farbe                        1,61:1
 *   Kauf auf Rechnung        dieselbe Farbe                         1,61:1
 *   die zwei GEWÄHLTEN       rgb(47,93,80)                          7,13:1
 *
 * Und auf /checkout/cart das Mengenfeld: Rahmen rgb(207,198,185) auf Weiß =
 * 1,69:1. Rahmenstärke überall 1 px.
 *
 * WCAG 2.1 AA, Kriterium 1.4.11 „Kontrast von Nicht-Text-Inhalten", fordert
 * 3:1 für die Umrandung von Bedienelementen. Für 65- bis 80-Jährige ist ein
 * leerer, fast unsichtbarer Kreis nicht als anklickbar erkennbar – und der
 * AGB-Haken ist zugleich das Pflichtfeld, ohne das nicht bestellt werden
 * kann.
 *
 * --rc-border-strong (#cfc6b9) bleibt, wo es hingehört: an Trennlinien und
 * Flächenkanten, wo kein Kontrastminimum gilt. Für die Umrandung von
 * Bedienelementen gibt es ab jetzt einen eigenen, dunkleren Wert aus
 * derselben warmen Reihe – nachgerechnet nach der WCAG-Formel:
 *
 *   #8a8175 auf #fbf9f6 (Kartenfläche)  = 3,65:1
 *   #8a8175 auf #ffffff (Feldfläche)    = 3,83:1
 *
 * Er steht hier und nicht in abstracts/_tokens.scss, weil er zur
 * Formularschicht gehört und nur von ihr benutzt wird.
 */
:root {
  --rc-border-control: #8a8175;
}
.form-control, .form-select, .custom-select {
  height: var(--rc-control-md);
  min-height: var(--rc-control-md);
  padding: 0 var(--rc-space-4);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border-control);
  border-radius: var(--rc-radius-control);
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  line-height: 1.4;
  transition: border-color var(--rc-dur-btn) var(--rc-ease), box-shadow var(--rc-dur-btn) var(--rc-ease);
}
.form-control::placeholder, .form-select::placeholder, .custom-select::placeholder {
  color: var(--rc-muted);
}
.form-control:focus, .form-select:focus, .custom-select:focus {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 3px var(--rc-secondary-soft);
  outline: none;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled, .form-select[readonly], .custom-select:disabled, .custom-select[readonly] {
  background-color: var(--rc-bg);
  color: var(--rc-disabled);
  border-color: var(--rc-border);
  cursor: not-allowed;
}
.form-control:disabled::placeholder, .form-control[readonly]::placeholder, .form-select:disabled::placeholder, .form-select[readonly]::placeholder, .custom-select:disabled::placeholder, .custom-select[readonly]::placeholder {
  color: var(--rc-disabled);
}
.form-control.is-invalid, .form-select.is-invalid, .custom-select.is-invalid {
  border-color: var(--rc-red);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus, .custom-select.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--rc-red-soft);
}
textarea.form-control {
  height: auto;
  min-height: 120px;
  padding: var(--rc-space-3) var(--rc-space-4);
  line-height: var(--rc-lh-body);
}
.form-label, legend, legend.form-label {
  display: block;
  margin-bottom: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
legend {
  float: none;
  width: auto;
  line-height: var(--rc-lh-body);
}
.form-text, .form-hint {
  margin-top: var(--rc-space-1);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.invalid-feedback, .form-error {
  display: block;
  margin-top: var(--rc-space-1);
  color: var(--rc-red);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-medium);
}
.form-check {
  min-height: var(--rc-control-sm);
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  padding-left: 0;
  margin-bottom: 0;
}
.form-check-input, .form-check .form-check-input {
  width: 22px;
  height: 22px;
  margin: 0;
  float: none;
  border: 2px solid var(--rc-border-control);
  flex-shrink: 0;
}
.form-check-input:checked, .form-check .form-check-input:checked {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
}
.form-check-input:focus, .form-check .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--rc-secondary-soft);
  border-color: var(--rc-primary);
}
.form-check-label {
  font-size: var(--rc-fs-sm);
  line-height: 1.5;
  cursor: pointer;
}
/*
 * ── Der AGB-Haken sagt selbst, was fehlt ─────────────────────────────────
 *
 * BEFUND der Endabnahme: „Ohne AGB-Haken passiert beim Bestellen sichtbar
 * nichts – keine eigene Fehlermeldung." Eigene Nachmessung auf
 * /checkout/confirm bei 360 und 1440 px mit einem Zähler auf dem
 * submit-Ereignis: 0 Absendungen, URL unverändert, #tos.validity.valueMissing
 * true, validationMessage in der Sprache des BROWSERS („Please check this box
 * if you want to proceed."), und 0 sichtbare .invalid-feedback /
 * .alert-danger / .form-error. Die Browserblase verdeckt dabei die zweite
 * Zeile der Beschriftung und verschwindet beim nächsten Klick.
 *
 * Die Meldung liegt als Geschwister des Hakens in `.form-check` (siehe
 * page/checkout/confirm/index.html.twig). Deshalb genügt hier der einfache
 * Nachbarschaftsselektor – kein `:has()`, das der SCSS-Übersetzer dieses
 * Projekts mit einem Attributselektor darin nicht übersetzt.
 *
 * `:user-invalid` und nicht `:invalid`: `:invalid` griffe schon beim Laden
 * der Seite und färbte den Haken rot, bevor jemand etwas falsch gemacht hat.
 * `:user-invalid` greift erst nach einem Absendeversuch – genau der Moment,
 * in dem heute die Browserblase aufgeht. Anders als die Blase bleibt diese
 * Meldung danach stehen, ist deutsch und wird über `aria-describedby`
 * vorgelesen.
 *
 * `flex-basis: 100%` ist nötig, weil `.form-check` weiter oben eine
 * Flex-Zeile ist: Ohne das stünde die Meldung neben dem Haken statt darunter.
 */
.form-check.rc-agb {
  flex-wrap: wrap;
  align-items: flex-start;
}
.rc-agb__fehler {
  display: none;
  flex: 0 0 100%;
  width: 100%;
  margin: var(--rc-space-2) 0 0;
  color: var(--rc-red-deep);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.5;
}
.form-check-input:user-invalid ~ .rc-agb__fehler, .form-check-input.is-invalid ~ .rc-agb__fehler {
  display: block;
}
.form-check-input:user-invalid, .form-check-input.is-invalid {
  border-color: var(--rc-red-deep);
}
.form-group, .rc-form-row + .rc-form-row {
  margin-bottom: var(--rc-space-4);
}
.form-label .required, .form-required, .form-required-label {
  color: var(--rc-red-deep);
}
.rc-password {
  position: relative;
  display: block;
}
.rc-password input {
  padding-right: 6.5rem;
}
.rc-password__toggle {
  position: absolute;
  top: 50%;
  right: var(--rc-space-2);
  transform: translateY(-50%);
  min-height: var(--rc-control-sm, 36px);
  padding: 0 var(--rc-space-3);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  line-height: 1;
  cursor: pointer;
}
.rc-password__toggle:hover, .rc-password__toggle:focus-visible {
  border-color: var(--rc-secondary);
  background-color: var(--rc-secondary-soft);
}
.rc-account-guest {
  margin-top: var(--rc-space-5);
  padding: var(--rc-space-4) var(--rc-space-5);
  border-left: 3px solid var(--rc-secondary);
  background-color: var(--rc-primary-soft);
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  line-height: 1.5;
}
/*
 * Karten – EIN Grundstil mit Modifikatoren.
 *
 * Vor dem Refactor: 20 Varianten mit fünf Radien und sechs Padding-Werten.
 *
 * Gestaltungsentscheidung: Tiefe entsteht über einen feinen Rahmen und
 * Weißraum, nicht über Schatten. Schwebende Karten überall wirken nach
 * Baukasten – ein hochwertiger Fachhandel wirkt ruhiger.
 */
.rc-card {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-2);
}
.rc-card > :last-child {
  margin-bottom: 0;
}
.rc-card--interactive {
  position: relative;
  transition: border-color var(--rc-dur-card) var(--rc-ease), background-color var(--rc-dur-card) var(--rc-ease);
}
.rc-card--interactive:hover, .rc-card--interactive:focus-within {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-softer);
}
.rc-card--plain {
  border-color: transparent;
  background-color: var(--rc-surface);
}
.rc-card--raised {
  box-shadow: var(--rc-shadow);
}
.rc-card--info {
  background-color: var(--rc-primary-soft);
  border-color: transparent;
}
.rc-card__title {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  margin: 0;
}
.rc-card__text {
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1.6;
  margin: 0;
}
.rc-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  box-shadow: none;
}
.card .card-header, .card .card-footer {
  background-color: transparent;
  border-color: var(--rc-border);
}
.card .card-title {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  margin-bottom: var(--rc-space-3);
}
.card-title, h2.card-title, .card-title.h2, h3.card-title, .card-title.h3 {
  color: var(--rc-text);
  line-height: var(--rc-lh-heading);
}
.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  padding: var(--rc-space-2) var(--rc-space-3);
  border-radius: var(--rc-radius-control);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  background-color: var(--rc-bg);
  color: var(--rc-text-soft);
  box-shadow: none;
}
.rc-badge--info {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary);
}
.rc-badge--success {
  background-color: var(--rc-success-soft);
  color: var(--rc-success);
}
.rc-badge--bestseller {
  background-color: var(--rc-secondary-soft);
  color: var(--rc-primary);
}
.rc-badge--sale {
  background-color: var(--rc-red-deep);
  color: #fff;
  border-radius: var(--rc-radius-pill);
}
.badge, span.badge {
  border-radius: var(--rc-radius-control);
  padding: 3px var(--rc-space-2);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.4;
  box-shadow: none;
  border: 0;
}
/*
 * Leerzustände (Briefing §6): leerer Warenkorb, Suche ohne Treffer,
 * leerer Merkzettel.
 *
 * Ein Leerzustand ist kein Fehler, sondern eine Weggabelung: er benennt die
 * Lage, erklärt den nächsten Schritt und bietet beide Wege an – selbst weiter-
 * suchen oder anrufen. Deshalb nie nur ein Hinweisstreifen über leerer Fläche.
 */
.rc-empty {
  max-width: 620px;
  margin: var(--rc-space-8) auto var(--rc-space-9);
  text-align: center;
}
.rc-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--rc-space-5);
  border-radius: 50%;
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary);
}
.rc-empty__icon svg {
  width: 32px;
  height: 32px;
}
.rc-empty__title {
  margin-bottom: var(--rc-space-3);
  font-size: var(--rc-fs-2xl);
}
.rc-empty__text {
  margin-bottom: var(--rc-space-6);
  color: var(--rc-muted);
  font-size: var(--rc-fs-base);
}
.rc-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rc-space-3);
}
.rc-empty__actions .btn {
  flex: 0 1 auto;
}
@media (max-width: 575px) {
  .rc-empty__actions .btn {
    flex: 1 1 100%;
  }
}
.rc-empty-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
  justify-content: center;
  margin-bottom: var(--rc-space-5);
}
.rc-empty-search .form-control {
  flex: 1 1 260px;
  max-width: 380px;
  min-height: var(--rc-control-lg);
}
.rc-empty-search .btn {
  min-height: var(--rc-control-lg);
  padding-left: var(--rc-space-6);
  padding-right: var(--rc-space-6);
}
@media (max-width: 575px) {
  .rc-empty-search .form-control, .rc-empty-search .btn {
    flex: 1 1 100%;
    max-width: none;
  }
}
/*
 * Cookie-Hinweis – ruhige Leiste, keine überdimensionierten Buttons.
 */
.cookie-permission-container {
  background-color: var(--rc-surface);
  border-top: 1px solid var(--rc-border);
  box-shadow: 0 -4px 20px rgba(var(--rc-scrim-rgb), 0.08);
  padding: var(--rc-space-4) 0;
}
.cookie-permission-content {
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  line-height: 1.5;
}
.cookie-permission-content a {
  color: var(--rc-primary);
}
/*
 * Zustimmen und Ablehnen gleichrangig, Einstellungen als dritter Weg.
 *
 * Vorher: drei gleich aussehende Primärknöpfe in einer Zeile, je 36 Pixel hoch
 * bei 17px Schrift. Drei identische Knöpfe geben keine Empfehlung – der Nutzer
 * muss lesen und vergleichen, bevor er den Shop sieht.
 *
 * Jetzt: „Alle akzeptieren" gefüllt, „Nur notwendige" umrandet – GLEICHE Höhe,
 * gleiche Breite, gleiche Schrift, gleiche Klickfläche. Nur die Farbe
 * unterscheidet sie. Das ist nach § 25 TDDSG zulässig; ein kleineres oder
 * versteckteres Ablehnen wäre es nicht.
 *
 * 56 Pixel Höhe statt 36: Die Zielgruppe trifft ungenau, und dies ist das
 * allererste Bedienelement des Shops.
 */
.cookie-permission-actions, .rc-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-3);
  margin-top: var(--rc-space-3);
}
@media (min-width: 768px) {
  .cookie-permission-actions, .rc-cookie__actions {
    margin-top: 0;
    justify-content: flex-end;
  }
}
.rc-cookie__action {
  flex: 1 1 auto;
}
@media (min-width: 576px) {
  .rc-cookie__action {
    flex: 0 0 auto;
  }
}
.rc-cookie__btn {
  width: 100%;
  min-height: var(--rc-control-lg);
  padding-inline: var(--rc-space-6);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  white-space: nowrap;
}
@media (min-width: 576px) {
  .rc-cookie__btn {
    min-width: 200px;
  }
}
/*
 * „Einstellungen" ist bewusst KEIN Knopf, sondern ein Textlink.
 *
 * Das ist der einzige zulässige Rangunterschied: Wer einzeln entscheiden will,
 * sucht aktiv danach. Ablehnen bleibt davon unberührt und steht oben als
 * vollwertiger Knopf – sonst wäre die Einwilligung nicht freiwillig.
 */
.rc-cookie__settings {
  flex: 0 0 auto;
}
.rc-cookie__link {
  min-height: 44px;
  padding: var(--rc-space-2) var(--rc-space-3);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-cookie__link:hover, .rc-cookie__link:focus-visible {
  color: var(--rc-primary);
}
.offcanvas-cookie .offcanvas-cookie-entries {
  padding: var(--rc-space-2) 0;
}
.offcanvas-cookie .offcanvas-cookie-group {
  border-bottom: 1px solid var(--rc-border);
}
/*
 * Produktkarte (§14 des Briefings).
 *
 * Inhalt in fester Reihenfolge: Bild · Hersteller · Name · Key Facts ·
 * Preis · Verfügbarkeit · CTA · Vergleichen.
 * Alle Karten einer Reihe schließen unten bündig ab.
 */
.product-box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  overflow: hidden;
  box-shadow: none;
  /*
     * Die Kachel hebt sich beim Überfahren als GANZES an – 3 px, mit Schatten.
     * Der Betreiber wünscht mehr Bewegung, und die Kachel ist ein Klickziel
     * über die ganze Fläche, sah aber aus wie ein Stück Papier: Der einzige
     * Hinweis war bisher ein Rahmen, der die Farbe wechselt.
     *
     * Als Ganzes und nicht in Teilen: In der Kachel verschiebt sich nichts
     * gegeneinander, Text und Bild behalten ihren Abstand. Ein Umbruch
     * entsteht nicht, weil `transform` den Platzbedarf nicht ändert – die
     * Nachbarkacheln stehen still.
     *
     * `:focus-within` bekommt den Schatten, aber nicht die Anhebung: Wer mit
     * der Tastatur durch eine Liste läuft, sonst hüpft die halbe Seite.
     */
  transition: border-color var(--rc-dur-card) var(--rc-ease), transform var(--rc-dur-card) var(--rc-ease), box-shadow var(--rc-dur-card) var(--rc-ease);
  /*
     * ── Bildzoom, überarbeitet ───────────────────────────────────────────
     *
     * Der Betreiber: „ueberarbeite auch den bild zoom er ist etwas komisch."
     * Vorher: `transform: scale(1.03)` über --rc-dur-drawer (250 ms), Ursprung
     * in der Mitte.
     *
     * WARUM es komisch aussah – gemessen, nicht geraten:
     *
     * 1. Zwei Bewegungen, zwei Dauern. Die Karte hebt sich über
     *    --rc-dur-card (200 ms), das Foto wuchs über --rc-dur-drawer (250 ms).
     *    Beide wirken auf dieselben Pixel. Das Foto wuchs also noch 50 ms
     *    weiter, nachdem die Karte längst stand – eine Bewegung, die zweimal
     *    zur Ruhe kommt.
     *
     * 2. Der Zoom zog das Foto nach oben statt es zu vergrößern. Bei Ursprung
     *    Mitte wandert die Oberkante um die Hälfte des Zuwachses nach oben und
     *    die Unterkante um dieselbe Strecke nach unten – die Anhebung der
     *    Karte um 3 px addiert sich oben dazu und hebt sich unten auf.
     *    Gemessen an der Kachel auf /Angebote/ (Bühne 327 x 244, Foto 220 x 220,
     *    Motiv im Foto 80 % breit und 69 % hoch – der Rest ist eingebackenes
     *    Weiß, geprüft über die Bildpunkte): Oberkante des Motivs 5,3 px nach
     *    oben, Unterkante 0,7 px – ein Verhältnis von 7,6 zu 1. Das liest sich
     *    als Zug nach oben, nicht als Näherkommen.
     *
     * 3. Beschnitten wurde dabei nichts: Über und unter dem Foto liegen exakt
     *    die 12 px Innenabstand der Bühne (auf allen sechs geprüften Seiten und
     *    drei Breiten derselbe Wert), links und rechts 50 bis 95 px. Der
     *    Zuwachs von 3,3 px passte hinein. Der Fehler lag in der Richtung der
     *    Bewegung, nicht in ihrer Größe.
     *
     * WAS JETZT PASSIERT: eine einzige Bewegung.
     *
     * `transform-origin: 50% 0` legt den Ursprung an die Oberkante des Fotos.
     * Der Zuwachs läuft damit vollständig nach unten – also GEGEN die Anhebung
     * der Karte statt mit ihr. Die Mitte des Fotos wächst dabei um die Hälfte
     * des Zuwachses nach unten: bei 220 px Fotohöhe 2,2 px, bei 286 px auf der
     * Startseite 2,9 px. Die Karte hebt sich um 3 px. Beides hebt sich fast
     * genau auf – das Foto steht still und wird größer, statt zu wandern.
     *
     * 2 % statt 3 %: Der Zuwachs nach unten bleibt damit auf 4,4 bis 5,7 px
     * begrenzt und passt in die 12 px Innenabstand, auch bei Fotos ohne
     * eingebackenen weißen Rand. base/_motion.scss steckt für das ganze Theme
     * den Rahmen ab: „Wege bleiben klein (2 bis 4 px, 1 bis 3 %)."
     *
     * Der Rahmen beschneidet weiterhin: Ohne `overflow: hidden` wüchse das Bild
     * in die Zeile mit dem Produktnamen hinein. Das Herz des Merkzettels sitzt
     * ebenfalls in diesem Rahmen, aber mit Abstand zur Kante – sein Fokusring
     * bleibt vollständig sichtbar.
     */
}
.product-box:hover, .product-box:focus-within {
  border-color: var(--rc-primary);
}
.product-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--rc-shadow-raised);
}
.product-box:focus-within {
  box-shadow: var(--rc-shadow-raised);
}
.product-box .product-image-wrapper {
  overflow: hidden;
}
.product-box .product-image-wrapper img {
  transform-origin: 50% 0;
  transition: transform var(--rc-dur-card) var(--rc-ease);
}
.product-box:hover .product-image-wrapper img {
  transform: scale(1.02);
}
.product-box .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-2);
  padding: var(--rc-space-4) var(--rc-space-5) var(--rc-space-5);
  flex: 1 1 auto;
}
.product-slider-container.tns-slider {
  display: flex;
  align-items: stretch;
}
.product-slider-item {
  display: flex;
  flex-shrink: 0;
  height: auto;
}
.product-slider-item > .product-box, .product-slider-item > .card {
  width: 100%;
}
/*
 * Bildfläche: quadratische Bühne über die volle Kartenbreite.
 *
 * Zwei Dinge hielten das Foto klein:
 *
 * 1. Der Shopware-Kern setzt `height: 200px` auf .product-image-wrapper.
 *    `aspect-ratio` greift nur, solange die Höhe `auto` ist – im Listing blieb
 *    die Bühne deshalb 268 × 200 statt quadratisch.
 * 2. Die Bühne lag im Innenabstand von .card-body und verlor links und rechts
 *    je 24 Pixel.
 *
 * Gemessen: vom 318 Pixel breiten Kartenkopf kamen 183 Pixel beim Foto an –
 * 58 %. Mit voller Breite und aufgehobener Kernhöhe sind es rund 290 Pixel.
 *
 * Die negativen Ränder heben genau den Innenabstand von .card-body auf; beide
 * Werte stehen oben in dieser Datei und können nicht auseinanderlaufen.
 *
 * 3. Nachtrag: `aspect-ratio` hat die Bühne nur nach unten begrenzt. Der Kern
 *    gibt ihr `flex: 1 0 180px`, in der Spalten-Flexbox der Karte war sie
 *    damit das einzige Element, das wächst – sie schluckte alles, was andere
 *    Blöcke frei ließen. Gemessen auf /Verbandschuhe/ bei 1440 px sechs
 *    verschiedene Bühnenhöhen nebeneinander (328, 348, 365, 385, 402, 422 px),
 *    auf /search?search=rollator bis 462 px bei 317 px Kartenbreite. Zwei
 *    Fotos in derselben Reihe waren also um 29 % verschieden groß.
 *    `flex: 0 0 auto` nimmt den Wachstumsanteil, `min-height: 0` die
 *    automatische Mindesthöhe des Bildes – erst dann entscheidet allein
 *    `aspect-ratio`. Nachgemessen: genau eine Bühnenhöhe je Seite
 *    (327 px bei 329 px Karte).
 */
/*
 * Nachtrag 4: Seitenverhältnis 4 : 3 statt 1 : 1.
 *
 * Der Betreiber: „die product cards sind viel zu lang gezogen und etwas
 * unübersichtlich."
 *
 * Gemessen auf /Elektromobile/ bei 1440 px: Karte 329 × 852 px – ein
 * Verhältnis von 1 : 2,6. Davon entfielen 327 px allein auf die quadratische
 * Bildbühne. Mit 4 : 3 sind es 247 px, ohne dass ein Foto kleiner wird: Die
 * Bilder liegen mit `object-fit: contain` in der Bühne, die Breite bleibt
 * unverändert, nur die Leerfläche über und unter dem Motiv fällt weg.
 * Nachgemessen weiter unten in dieser Datei.
 */
.product-image-wrapper {
  position: relative;
  height: auto;
  aspect-ratio: 1.3333333333;
  flex: 0 0 auto;
  min-height: 0;
  margin: calc(var(--rc-space-4) * -1) calc(var(--rc-space-5) * -1) var(--rc-space-3);
  padding: var(--rc-space-3);
  background-color: var(--rc-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--rc-border);
}
.product-image-wrapper .product-image-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-image-wrapper .product-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
/*
 * Herstellerzeile: Name links, Sterne rechts.
 *
 * Der Betreiber wollte die Sterne neben den Hersteller. Die Zeile war dafür
 * die richtige: Der Herstellername misst gemessen 60 bis 130 px in einer
 * 279 px breiten Spalte, rechts stand also die halbe Zeile leer.
 *
 * `space-between` statt einer festen Spalte: Fehlen die Sterne – und das ist
 * der Normalfall, solange es keine echten Bewertungen gibt –, bleibt der
 * Herstellername einfach stehen, wo er immer stand. Es entsteht keine Lücke
 * und kein Platzhalter.
 *
 * `gap` mit Umbruch, damit ein langer Herstellername die Sterne nicht
 * hinausdrückt: Sie rutschen dann in die nächste Zeile, statt abgeschnitten
 * zu werden.
 */
.rc-product-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-1) var(--rc-space-3);
  min-height: 20px;
}
.rc-product-manufacturer {
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--rc-fw-medium);
}
/*
 * Die Sterne stehen in der Zeile eines 15-px-Textes und dürfen ihn nicht
 * überragen – sonst wandert die Grundlinie des Herstellernamens.
 */
.rc-product-kopfzeile .rc-product-rating {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 1;
}
.rc-product-kopfzeile .rc-product-rating .product-review-rating, .rc-product-kopfzeile .rc-product-rating .product-review-point {
  line-height: 1;
}
.rc-product-kopfzeile .rc-product-rating svg, .rc-product-kopfzeile .rc-product-rating .icon {
  width: 15px;
  height: 15px;
}
/*
 * ── Drei Zeilen für den Produktnamen, nicht zwei ────────────────────────
 *
 * Bei zwei Zeilen fiel genau der unterscheidende Teil weg. Gemessen am
 * 30.08.2026 über `scrollHeight > clientHeight` je Karte:
 *
 *   /Rollatoren/     1440 px   5 von  8 Namen abgeschnitten (63 %)
 *   /Sessel/         1440 px   9 von 24
 *   /Angebote/       1440 px   7 von 24
 *   /Elektromobile/  1440 px   3 von 24
 *   /Rollatoren/      360 px   4 von  8
 *   /Sessel/          360 px   8 von 24
 *
 * Betroffen war die Modellbezeichnung am Ende: „Leichtgewichtrollator – mit
 * Unterarmauflagen Vermeiren 276" endete sichtbar bei „… Vermei…", direkt
 * daneben stand „Leichtgewichtrollator – Rollator Vermeiren Quadri…". Auf
 * einer Seite mit acht Rollatoren begannen fünf Karten mit demselben Wort und
 * verloren das Modell. Der volle Name steht zwar im `title`-Attribut und im
 * DOM – aber am Telefon gibt es kein Hover, und wer nicht mit Sprachausgabe
 * arbeitet, sieht ihn nirgends.
 *
 * Nachgemessen mit drei Zeilen (Regel im laufenden Browser gesetzt,
 * tools/qa/_liste-namen3.mjs):
 *
 *                          abgeschnitten   höchste Karte   Seitenhöhe
 *   /Rollatoren/  1440     5 -> 0          768,6 -> 796,1  +55 px
 *   /Sessel/      1440     9 -> 3          797,2 -> 824,7  +137 px
 *   /Angebote/    1440     7 -> 1          817,2 -> 824,7  +138 px
 *   /Elektromobile/ 1440   3 -> 0          817,2 -> 824,7  +82 px
 *   /Rollatoren/   360     4 -> 0          761,8 -> 786,8  +100 px
 *   /Sessel/       360     8 -> 2          790,4 -> 815,4  +200 px
 *
 * Die Karte wächst um höchstens eine Zeile (27,5 px am Rechner, 25 px am
 * Telefon), die Seite um unter einem Prozent. Die Karten einer Reihe gleichen
 * sich ohnehin auf dieselbe Höhe aus (gemessene Abweichung innerhalb einer
 * Reihe: 0 px), es entsteht also keine unruhige Kante.
 *
 * ── Warum hier drei Angaben stehen und nicht eine ───────────────────────
 *
 * Der Kern begrenzt an DREI Stellen gleichzeitig
 * (`vendor/shopware/storefront/.../component/_product-box.scss:114-121`):
 * `-webkit-line-clamp: 2`, das genormte `line-clamp: 2` und zusätzlich
 * `height: 2.75rem`. Ein Blatt, das nur die `-webkit-`-Angabe umstellt, bleibt
 * wirkungslos – nachgemessen: `getComputedStyle` meldete danach unverändert
 * 55 px Höhe und 83 px Inhalt. `height: auto` nimmt die feste Höhe des Kerns
 * zurück; die Untergrenze von zwei Zeilen bleibt als `min-height` bestehen.
 */
.product-name {
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto;
  min-height: calc(2 * var(--rc-lh-heading) * 1em);
}
.product-name:hover {
  color: var(--rc-primary);
}
.product-name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rc-key-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
}
.rc-key-facts__item {
  display: flex;
  align-items: baseline;
  gap: var(--rc-space-2);
  white-space: nowrap;
  overflow: hidden;
  /*
     * Häkchen aus zwei Strichen statt als SVG – siehe key-facts.html.twig.
     * Spart pro Karte rund 20 DOM-Knoten bei identischer Darstellung.
     *
     * Größe: 5 × 9 Pixel war bei einer Zielgruppe mit 86 % Presbyopie kaum
     * als Häkchen erkennbar – aus zwei Metern Abstand ein Punkt. Jetzt
     * 8 × 14 Pixel mit 2,5 Pixel Strichstärke, in Terrakotta statt in Grau.
     */
}
.rc-key-facts__item::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 14px;
  margin-left: 4px;
  margin-right: var(--rc-space-2);
  border-right: 2.5px solid var(--rc-accent);
  border-bottom: 2.5px solid var(--rc-accent);
  transform: rotate(45deg);
  align-self: center;
}
.rc-key-facts__label {
  color: var(--rc-muted);
  flex-shrink: 0;
}
.rc-key-facts__value {
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-box .rc-key-facts {
  margin-bottom: var(--rc-space-1);
}
.product-price-info {
  margin-top: 0;
}
.product-box .product-price-unit {
  height: auto;
  min-height: 0;
  margin-bottom: 0;
}
.product-box .product-cheapest-price {
  min-height: 0;
  margin-bottom: 0;
}
.product-box .product-price-info {
  margin-top: var(--rc-space-2);
}
.product-box .product-variant-characteristics {
  min-height: 0;
}
.product-box .product-variant-characteristics .product-variant-characteristics-text {
  height: auto;
  max-height: 3em;
}
.product-box .product-price-tax-link {
  display: block;
  overflow: visible;
  margin-top: var(--rc-space-1);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-regular);
  line-height: 1.4;
  color: var(--rc-muted);
  text-decoration: none;
}
.product-box .product-price-tax-link:hover, .product-box .product-price-tax-link:focus-visible {
  color: var(--rc-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-price, .product-price.with-list-price {
  color: var(--rc-text);
  font-size: var(--rc-fs-xl);
  font-weight: var(--rc-fw-bold);
  line-height: 1.2;
  margin: 0;
}
.product-cheapest-price {
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.rc-availability {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rc-space-1) var(--rc-space-2);
  font-size: var(--rc-fs-xs);
  line-height: 1.45;
  color: var(--rc-success);
}
.rc-availability__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--rc-success);
  flex-shrink: 0;
}
/*
 * Lieferzeit als eigener Flex-Eintrag statt als erzwungene zweite Zeile.
 *
 * Vorher: `display: block; width: 100%` – die Lieferzeit bekam IMMER eine
 * eigene Zeile, auch wenn beides nebeneinander gepasst hätte. Gemessen auf
 * /Elektromobile/ bei 1440 px: 60 px für „Auf Lager" und „Lieferzeit 3–5
 * Werktage", zusammen 35 Zeichen.
 *
 * Der Grund für die alte Lösung war ein Trennpunkt, der beim Umbruch verwaist
 * am Zeilenanfang stand. Den gibt es jetzt nicht mehr: Getrennt wird über die
 * Lücke der Flexbox. Passt beides in eine Zeile, steht es in einer; wird es
 * länger (lange Lieferzeitnamen, schmale Karten), bricht die Flexbox von
 * selbst um – ohne herumliegendes Satzzeichen.
 */
.rc-availability__delivery {
  color: var(--rc-muted);
}
.product-box .product-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/*
 * Knopf und „Vergleichen" in einer Zeile.
 *
 * Vorher stand „Vergleichen" als eigene 43 px hohe Zeile unter dem Knopf –
 * zusammen mit dem Vorlauf 107 px allein für die Aktionen. Gemessen passen
 * beide nebeneinander: Knopf mindestens 140 px, Umschalter 116 px, Lücke
 * 12 px – zusammen 268 px in einer 279 px breiten Spalte.
 *
 * `flex-wrap: wrap` ist kein Schmuck, sondern die Rückfallebene: Auf schmalen
 * Karten (zwei Spalten am Telefon) oder bei längeren Übersetzungen rutscht der
 * Umschalter von selbst in die zweite Zeile, statt aus der Karte zu laufen.
 */
.rc-product-action {
  margin-top: auto;
  padding-top: var(--rc-space-3);
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-2) var(--rc-space-3);
}
.rc-product-action .rc-product-action__view {
  flex: 1 1 auto;
  min-width: 148px;
}
.rc-product-action .rc-compare-toggle {
  flex: 0 0 auto;
  padding-top: 0;
}
/*
 * Rabattabzeichen und Merkzettel-Herz auf dieselbe Höhe.
 *
 * Die beiden haben unterschiedliche Bezugspunkte: Shopware hängt das
 * Abzeichen an .card-body und positioniert es damit relativ zur ganzen
 * Karte, das Herz sitzt in .product-image-wrapper. Mit demselben Zahlenwert
 * landeten sie deshalb sichtbar versetzt – gemessen 13/13 gegenüber 39/37.
 *
 * Beide beziehen sich jetzt auf die Ecke der Bildfläche. Beim Abzeichen wird
 * der Innenabstand von .card-body herausgerechnet; die Werte stehen weiter
 * oben in dieser Datei und können nicht auseinanderlaufen.
 */
.product-box {
  --rc-marken-abstand: 10px;
}
.product-badges {
  position: absolute;
  top: var(--rc-marken-abstand);
  left: var(--rc-marken-abstand);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-1);
  z-index: 2;
}
/*
 * Nur auf der Produktkachel, nicht überall.
 *
 * Ohne die Einschränkung auf `.product-box` griff diese Regel auch im
 * Seitenwarenkorb: Shopware rendert den Merkzettel-Knopf dort als letztes
 * Element der Textspalte, und `position: absolute` ließ ihn mitten im
 * Fließtext zwischen Lieferzeit und Menge hängen – gemessen am 25.08.2026 bei
 * 360 px auf y=482, zwischen Lieferzeit (424) und Mengenzeile (498).
 * Der Betreiber: „das herz ist sticky."
 */
.product-box .product-wishlist {
  position: absolute;
  top: var(--rc-marken-abstand);
  right: var(--rc-marken-abstand);
  margin: 0;
  bottom: auto;
  width: 44px;
  height: 44px;
  z-index: 3;
}
.product-wishlist-action-circle, .product-wishlist-action {
  position: static;
  top: auto;
  right: auto;
  inset: auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
     * Ruhezustand mit eigener Fläche.
     *
     * Vorher war der Knopf bis zur Berührung vollständig durchsichtig. Auf
     * einem hellen Produktfoto verschwand das graue Herz darin – man sah es
     * erst, wenn man zufällig darüberfuhr. Für eine Zielgruppe, die nicht
     * jede Fläche des Bildschirms mit der Maus abtastet, ist das dasselbe wie
     * nicht vorhanden.
     */
  /*
     * Leicht getönte Fläche mit demselben Rahmen wie die Formularfelder.
     *
     * Die Bildfläche der Karte ist weiß; ein weißer Kreis darauf war nur an
     * seinem Rahmen zu erkennen, und der helle --rc-border erreichte gegen
     * Weiß nicht einmal 1,5:1. Mit --rc-border-strong ist der Knopf als
     * Bedienelement erkennbar, ohne vom Produkt abzulenken.
     *
     * Kein backdrop-filter: Der Weichzeichner hinter einer zu 92 % deckenden
     * Fläche ist nicht zu sehen, erzeugt aber einen eigenen Zeichenkontext –
     * und damit beim Überfahren eine messbare Verschiebung des Symbols.
     */
  background-color: rgba(251, 249, 246, 0.94);
  border: 1px solid var(--rc-border-strong);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease), box-shadow var(--rc-dur-btn) var(--rc-ease);
}
.product-wishlist-action-circle .icon, .product-wishlist-action .icon {
  color: var(--rc-muted);
  width: 20px;
  height: 20px;
}
.product-wishlist-action-circle .icon > svg, .product-wishlist-action .icon > svg {
  width: 20px;
  height: 20px;
}
.product-wishlist-action-circle:hover, .product-wishlist-action-circle:focus-visible, .product-wishlist-action:hover, .product-wishlist-action:focus-visible {
  background-color: #fff;
  border-color: var(--rc-red);
  box-shadow: var(--rc-shadow);
}
.product-wishlist-action-circle:hover .icon, .product-wishlist-action-circle:focus-visible .icon, .product-wishlist-action:hover .icon, .product-wishlist-action:focus-visible .icon {
  color: var(--rc-red);
}
.product-wishlist-action-circle.product-wishlist-added .icon, .product-wishlist-action-circle .icon-wishlist-added, .product-wishlist-action.product-wishlist-added .icon, .product-wishlist-action .icon-wishlist-added {
  color: var(--rc-red);
}
.rc-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  background: none;
  border: 0;
  padding: var(--rc-space-2) 0 0;
  min-height: var(--rc-control-sm);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color var(--rc-dur-btn) var(--rc-ease);
  /*
     * Der aktive Zustand ändert die Schriftstärke NICHT.
     *
     * Der Betreiber: „wenn man vergleichen im produkt finder anhakt fliegt es
     * runter."
     *
     * Gemessen im Kaufberater auf /Verbandschuhe/: Der Umschalter wuchs beim
     * Anhaken von 116 auf 118 px, weil `font-weight: 600` den Text breiter
     * macht. In der Aktionszeile blieben nur 2 px Rest – der Umschalter brach
     * um und sprang 48 px nach unten (y 861 → 909), also genau um die Höhe des
     * Knopfes darüber. Ein Bedienelement, das beim Anklicken wegläuft, ist für
     * diese Zielgruppe unbrauchbar.
     *
     * Der Zustand ist auch ohne Fettung eindeutig: Das Kästchen füllt sich mit
     * Primärgrün und bekommt ein weißes Häkchen (Form, nicht nur Farbe – WCAG
     * 1.4.1), die Schrift wechselt auf Primärgrün, und `aria-pressed` meldet
     * ihn an die Vorlesesoftware.
     */
}
.rc-compare-toggle:hover {
  color: var(--rc-primary);
}
.rc-compare-toggle__box {
  width: 20px;
  height: 20px;
  border: 1px solid var(--rc-border-strong);
  border-radius: 5px;
  background-color: var(--rc-surface);
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-compare-toggle.is-active {
  color: var(--rc-primary);
}
.rc-compare-toggle.is-active .rc-compare-toggle__box {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
}
.rc-compare-toggle.is-active .rc-compare-toggle__box::after {
  content: "";
  position: absolute;
  inset: 4px 6px 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}
/*
 * Platzhalter für Produkte ohne Bild.
 *
 * Shopware zeichnet dort sein Kamerasymbol in voller Kachelgröße – bei 320
 * Pixeln Bildschirmbreite ein 179 × 125 großer leerer Kasten, der wie ein
 * Ladefehler aussieht. Als kleines, blasses Zeichen auf ruhiger Fläche ist
 * erkennbar, dass hier schlicht kein Foto vorliegt.
 *
 * Die eigentliche Lösung ist ein Foto; hier geht es nur darum, dass die Lücke
 * nicht nach Defekt aussieht.
 */
.product-image-wrapper .product-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--rc-bg);
  border-radius: var(--rc-radius-control);
}
.product-image-wrapper .product-image-placeholder .icon {
  width: 32px;
  height: 32px;
  color: var(--rc-muted);
}
.product-image-wrapper .product-image-placeholder .icon > svg {
  width: 32px;
  height: 32px;
}
/*
 * ── § 11 PAngV: Preisermäßigung nur mit Pflichtangabe ────────────────────
 *
 * Ein durchgestrichener Preis ist die Bekanntgabe einer Preisermäßigung
 * (EuGH C-330/23, Aldi Süd). § 11 Abs. 1 PAngV verlangt dann den niedrigsten
 * Gesamtpreis der letzten 30 Tage.
 *
 * Gemessen am 26.08.2026, Rohwerte in tools/qa/_preise-datenlage.json:
 * 1240 von 1253 bepreisten Datensätzen tragen einen Streichpreis, und die
 * Formel `abrunden(Verkaufspreis × 1,25)` trifft 1238 davon auf den Cent
 * (99,84 %). Der Streichpreis ist errechnet, nicht belegt. Die Anzeige hängt
 * deshalb am Schalter `rc-streichpreis-anzeigen`, der von sich aus AUS ist;
 * das Markup entsteht in price-unit.html.twig gar nicht erst.
 *
 * Gemessen auf allen sechs Hauptkategorien, der Angebotsseite, der Startseite
 * und einer Produktseite (tools/qa/_preise-vorher.json gegen
 * _preise-nachher.json): 301 Streichpreise im Markup vorher, 0 nachher;
 * 159 sichtbar durchgestrichene Beträge vorher, 0 nachher. Die Preiszeile der
 * Kachel schrumpft dabei von 87 px auf 64 px – kein Loch, die Zeile fällt
 * ersatzlos weg und alles darunter rückt geschlossen nach oben. Sie wird
 * dadurch sogar einheitlicher: Vorher standen auf der Startseite 64, 87 und
 * 107 px nebeneinander (Karten ohne Streichpreis neben solchen mit), jetzt
 * nur noch 64 und 84 px.
 */
/*
 * Die Zwischenlösung von hier ist entfallen.
 *
 * An dieser Stelle stand `.product-badges .badge-discount { display: none }` –
 * eine Notbremse, solange badges.html.twig den Schalter noch nicht kannte.
 * Sie war nicht an `rc-streichpreis-anzeigen` gekoppelt und konnte es auch
 * nicht sein: Schalterfelder aus theme.json stehen dort mit `"scss": false`
 * und kommen nicht als SCSS-Variable an.
 *
 * Folge im Betrieb: Der Betreiber legte den Schalter um, sah Streichpreise –
 * aber keine Abzeichen („die rabat badges fehlen ueberall auch in den product
 * cards?"). Gemessen waren es 300 Abzeichen im Markup und 0 sichtbare.
 *
 * Die Bedingung steht jetzt in badges.html.twig selbst, wo sie das Markup gar
 * nicht erst erzeugt. Das ist auch die rechtlich saubere Seite: Ein per CSS
 * verstecktes „−20 %" ist trotzdem ausgeliefert.
 *
 * Die Form des Abzeichens (roter Grund, weißer Text) steht in
 * components/_cards.scss bei .rc-badge--sale und in components/_preis.scss.
 */
/*
 * Pflichtsatz nach § 11 PAngV, sichtbar nur bei eingeschaltetem Streichpreis.
 *
 * 17 px ist die Untergrenze des Themes für rechtliche Angaben (--rc-fs-xs) –
 * bei einer Zielgruppe von 65 bis 80 Jahren wird eine Pflichtangabe nicht
 * kleingesetzt. Die Farbe ist --rc-muted und damit dieselbe wie beim
 * Steuerhinweis darunter; der Satz ist Information, kein Werbeversprechen.
 */
.product-box .rc-preishinweis {
  margin: var(--rc-space-1) 0 0;
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-regular);
  line-height: 1.4;
  color: var(--rc-muted);
}
/*
 * Produktvergleich (§21): Toggle, Sticky-Leiste, Overlay-Tabelle.
 */
.rc-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  background: none;
  border: 0;
  padding: var(--rc-space-2) 0;
  min-height: var(--rc-control-sm);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  cursor: pointer;
}
.rc-compare-toggle:hover {
  color: var(--rc-primary);
}
.rc-compare-toggle__box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--rc-border);
  border-radius: 5px;
  background-color: var(--rc-surface);
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-compare-toggle.is-active {
  color: var(--rc-primary);
}
.rc-compare-toggle.is-active .rc-compare-toggle__box {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
}
.rc-compare-toggle.is-active .rc-compare-toggle__box::after {
  content: "";
  position: absolute;
  inset: 4px 5px 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}
.rc-compare-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1040;
  background-color: var(--rc-surface);
  border-top: 1px solid var(--rc-border);
  box-shadow: 0 -8px 28px rgba(var(--rc-scrim-rgb), 0.12);
  padding: var(--rc-space-3) 0;
}
.rc-compare-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
}
@media (max-width: 575.98px) {
  .rc-compare-bar__inner {
    flex-wrap: wrap;
    gap: var(--rc-space-3);
  }
}
.rc-compare-bar__items {
  display: flex;
  gap: var(--rc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-compare-bar__items li {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  background: #fff;
}
.rc-compare-bar__items li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.rc-compare-bar__items li button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background-color: var(--rc-primary);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}
.rc-compare-bar__items li button:hover {
  background-color: var(--rc-red);
}
.rc-compare-bar__count {
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  margin-left: auto;
  flex-shrink: 0;
}
.rc-compare-bar [data-rc-compare-open] {
  flex-shrink: 0;
  min-height: var(--rc-control-lg);
}
@media (max-width: 575.98px) {
  .rc-compare-bar [data-rc-compare-open] {
    flex-basis: 100%;
  }
}
.rc-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(var(--rc-scrim-rgb), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rc-space-4);
}
.rc-compare-modal {
  background: var(--rc-surface);
  border-radius: var(--rc-radius-visual);
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--rc-shadow-md);
}
.rc-compare-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--rc-space-4) var(--rc-space-5);
  border-bottom: 1px solid var(--rc-border);
}
.rc-compare-modal__head h2, .rc-compare-modal__head .h2 {
  margin: 0;
  font-size: var(--rc-fs-xl);
}
.rc-compare-modal__close {
  border: 0;
  background: var(--rc-bg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--rc-text);
  cursor: pointer;
}
.rc-compare-modal__close:hover {
  background: var(--rc-red-soft);
  color: var(--rc-red);
}
.rc-compare-modal__scroll {
  overflow: auto;
  padding: var(--rc-space-4) var(--rc-space-5);
}
.rc-compare-modal__hint {
  margin: 0;
  padding: var(--rc-space-3) var(--rc-space-5) var(--rc-space-4);
  border-top: 1px solid var(--rc-border);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
}
.rc-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rc-fs-sm);
}
.rc-compare-table th, .rc-compare-table td {
  padding: var(--rc-space-2) var(--rc-space-3);
  border-bottom: 1px solid var(--rc-border);
  text-align: left;
  vertical-align: top;
  min-width: 140px;
}
.rc-compare-table thead th a {
  display: grid;
  gap: var(--rc-space-1);
  text-decoration: none;
  color: var(--rc-text);
}
.rc-compare-table thead th a img {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
}
.rc-compare-table__mfr {
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  text-transform: uppercase;
}
.rc-compare-table__name {
  font-weight: var(--rc-fw-semibold);
  line-height: 1.3;
}
.rc-compare-table__price {
  font-weight: var(--rc-fw-bold);
  color: var(--rc-primary-dark);
  font-size: var(--rc-fs-base);
}
.rc-compare-table tbody th {
  color: var(--rc-muted);
  font-weight: var(--rc-fw-medium);
}
.rc-compare-table .rc-compare__diff td {
  background-color: var(--rc-secondary-soft);
  font-weight: var(--rc-fw-semibold);
}
/*
 * Kaufberater – Anreißer auf der Seite, Fragen im Dialogfenster.
 *
 * Aufbau nach dem Vorbild, das der Betreiber als Maßstab genannt hat
 * (Sesselberater des alten Shops). Übernommen sind Aufbau, Abfolge und
 * Kartenaufbau; die Farben bleiben die dieser Storefront. Das Vorbild ist
 * dunkelblau, hier gilt die warme Palette des Benchmarks 2026 – ein zweites
 * Farbsystem allein für den Berater wäre ein Fremdkörper auf der Seite, auf
 * der er steht.
 *
 * Die Maße stammen aus dem Benchmark 2026 und sind dort begründet, nicht
 * geschätzt (Seite 35, „Raster & Klickflächen"):
 *
 *   Klickflächen        ≥ 48 × 48 px
 *   Knöpfe              56 px hoch
 *   Abstand zwischen
 *   Klickzielen         ≥ 12 px – gegen Tremor, nicht aus Geschmack
 *   Sektionsabstand     96 px Desktop / 64 px mobil
 *   Produktraster       3 Spalten Desktop, 2 Tablet, 1 mobil – nicht 4
 *   Sektionstrennung    über Flächenfarbe, NICHT über Haarlinien
 *   Reflow              ohne Horizontalscroll ab 320 px
 *
 * Dazu zwei Verbote von Seite 35, die man leicht übersieht:
 *   keine Versalien-CTAs (das Wortbild geht verloren)
 *   kein negatives Letter-Spacing in Überschriften
 *
 * Und die Haltung aus Seite 33: „Weißraum statt Effekte. Erdtöne statt
 * Institutionsblau." Deshalb hier keine Verläufe und keine Rahmen als
 * Gestaltungsmittel – Flächen und Abstand tragen.
 */
/*
 * ── Der Abstand NACH OBEN steht nicht hier ──────────────────────────────
 *
 * Hier stehen nur die Innenabstände der Sandfläche. Den Abstand zur Sektion
 * darüber trägt auf Kategorieseiten der Kategoriekopf, siehe
 * `layout/_listing.scss`, Regel `.cms-block-text:has(.rc-katkopf)`.
 *
 * Der Grund ist kein Geschmack, sondern eine Nebenwirkung: Auf
 * Unterkategorieseiten steckt der Anreißer im Block
 * `.cms-block-sidebar-filter`, und der trägt `display: contents`, damit die
 * Filterleiste über die ganze Liste mitlaufen kann. Ein Element ohne eigenen
 * Kasten hat auch keine Ränder – der Blockrhythmus aus
 * `layout/_cms-layout.scss` fiel an dieser einen Stelle aus. Gemessen lag die
 * Oberkante der Sandfläche auf /Sessel/Aufstehsessel/ und
 * /Sessel/Pflegesessel/ bei allen Breiten von 320 bis 1440 px exakt 0 px
 * unter dem Kopf; genau das hat der Betreiber als „klebt" gemeldet.
 *
 * Ein `margin-top` an dieser Stelle wäre der falsche Ort: Auf der Startseite
 * und den sechs Hauptkategorien steht derselbe Anreißer in einem gewöhnlichen
 * Block, bekommt seinen Abstand vom Blockrhythmus (gemessen 64 px) und würde
 * ihn dann doppelt tragen.
 */
.rc-kb {
  background-color: var(--rc-surface-warm);
  padding-block: 64px;
  padding-inline: var(--rc-space-5);
  /*
     * Abstand für den Sprung über den Anker.
     *
     * Die Startseite verlinkt die Kategorieseiten mit `#kaufberater`. Ohne
     * diesen Wert scrollt der Browser die Sektion exakt an den oberen
     * Fensterrand – und der klebende Kopf (gemessen 142 px bei 1440, 151 px
     * bei 768) liegt dann darüber. Man landet auf der Sektion und sieht ihre
     * Überschrift nicht.
     */
  scroll-margin-top: 160px;
}
@media (min-width: 992px) {
  .rc-kb {
    padding-block: 96px;
  }
}
.rc-kb__inner {
  /*
     * Volle Containerbreite, nicht 940 px.
     *
     * Der Anreißer war auf 940 px begrenzt und stand damit als
     * schmale Insel in einem 1360 px breiten Bereich – gemessen über
     * 200 px Luft an jeder Seite, während die Sektionen darüber und
     * darunter bis an die Containerkante liefen. Genau das war der
     * Eindruck „hineingelegt" statt „gebaut".
     *
     * Die Zeilenlänge bleibt trotzdem lesbar: Der Text steht in der
     * linken Rasterspalte und ist dort über --rc-measure begrenzt.
     */
  max-width: 1280px;
  margin-inline: auto;
}
/* ── Kopf ─────────────────────────────────────────────────────────────── */
.rc-kb__kopf {
  text-align: center;
  margin-bottom: var(--rc-space-7);
}
/*
 * ── Die Themenauswahl braucht weniger Höhe ──────────────────────────────
 *
 * Der Betreiber: „es nimmt alles viel zu viel platz weg."
 *
 * Gemessen auf der Startseite bei 1440 px: Die Sektion war 637 px hoch für
 * eine Überschrift, einen Satz und sechs Kacheln. Davon waren 96 px Luft
 * oben, 96 px unten und 48 px zwischen Kopf und Kacheln – zusammen 240 px,
 * also 38 Prozent der Sektion, ohne einen einzigen Inhalt.
 *
 * Die 96 px sind der Sektionsabstand des Benchmarks und an sich richtig; sie
 * gelten für Sektionen mit eigener Fläche. Diese hier IST eine solche
 * Fläche – sie trägt den Sandton –, und dann zählt der Abstand doppelt: Der
 * Blockrhythmus der Seite setzt bereits 64 px davor.
 *
 * 64/64 statt 96/96 und 32 statt 48 im Kopf nehmen 112 px heraus, ohne dass
 * die Sektion gedrängt wirkt. Der Anreißer auf den Kategorieseiten bleibt
 * unberührt – dort füllt ein Bild die Höhe, und die Luft trägt ihn.
 */
.rc-kb--uebersicht {
  padding-block: 48px;
}
@media (min-width: 992px) {
  .rc-kb--uebersicht {
    padding-block: 64px;
  }
}
.rc-kb--uebersicht .rc-kb__kopf {
  margin-bottom: var(--rc-space-6);
}
.rc-kb__auge {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  /*
     * Nicht --rc-secondary (#B4573A).
     *
     * Gemessen auf der Sandfläche #F2EDE5 kommt die Terrakotta des Themes
     * nur auf 4,13:1 – unter der Grenze von 4,5:1 für Fließtext. Auf Weiß
     * reicht sie mit 4,58:1 knapp, hier aber nicht; genau dafür misst der
     * Prüfer gegen die tatsächliche Fläche darunter.
     *
     * #9D4A31 ist dieselbe Farbe, eine Stufe dunkler, und erreicht 5,21:1
     * auf Sand und 6,07:1 auf Weiß. Der Akzent bleibt damit erhalten – Grün
     * hätte ihn neben der grünen Überschrift verschluckt.
     */
  color: #9d4a31;
  letter-spacing: 0.02em;
}
.rc-kb__titel {
  margin: 0;
  font-size: var(--rc-fs-2xl);
  font-weight: var(--rc-fw-bold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
  letter-spacing: 0;
  text-wrap: balance;
}
.rc-kb__unter {
  margin: var(--rc-space-3) 0 0;
  max-width: 46ch;
  font-size: var(--rc-fs-base);
  color: var(--rc-muted);
}
/*
 * Im zentrierten Kopf muss auch der Untertitel mittig stehen.
 *
 * `text-align: center` zentriert nur die ZEILEN in einem Kasten, nicht den
 * Kasten selbst. Der Untertitel ist über `max-width: 46ch` schmaler als der
 * Kopf – gemessen auf der Startseite bei 1440 px: Kopf 1280 px breit,
 * Untertitel 551 px, und weil ihm der automatische Seitenrand fehlte, stand
 * seine Mitte bei 336 statt bei 700. Genau das hat der Betreiber gemeldet:
 * „hier ist der text nicht mittig".
 *
 * Nur im Kopf, nicht im Anreißer: Dort steht derselbe Satz links neben dem
 * Bild und soll auch links bleiben.
 */
.rc-kb__kopf .rc-kb__unter {
  margin-inline: auto;
}
/* ── Anreißer ─────────────────────────────────────────────────────────── */
/*
 * Der Anreißer ersetzt den früheren Fragebogen auf der Seite.
 *
 * Der Fragebogen stand mitten in der Kategorieseite und war je nach Schritt
 * unterschiedlich hoch – die Trefferliste darunter sprang bei jedem Klick.
 * Im Dialogfenster hat er festen Platz, die Seite dahinter bleibt ruhig, und
 * der Kunde landet nach dem Schließen wieder genau dort, wo er war.
 */
/*
 * Zweispaltig mit Bild, bündig in der Sektionsfläche.
 *
 * Kein weißer Kasten mehr auf beigem Grund: Zwei Flächen übereinander
 * sind eine Fläche zu viel. Die Sektion selbst trägt jetzt das Weiß,
 * das Bild sitzt bündig an ihrer Kante.
 *
 * 1,05fr für den Text, 1fr für das Bild: Der Text braucht die Spur
 * Mehr, weil er drei Zusagen, eine Überschrift und zwei Handlungen
 * trägt; ein exaktes Halbe-Halbe ließe das Bild dominieren.
 *
 * Zwei Spalten erst ab 900 px CONTAINERbreite, gemessen über
 * repeat(auto-fit, minmax(…)) und nicht über die Fensterbreite: Auf
 * der Kategorieseite steht links die Filterspalte, dort bleiben nur
 * rund 750 px – und dort gehört das Bild unter den Text, nicht
 * daneben.
 */
.rc-kb__anreisser {
  display: grid;
  gap: 0;
  align-items: stretch;
  background-color: var(--rc-surface);
  border-radius: var(--rc-radius-visual);
  overflow: hidden;
}
@media (min-width: 900px) {
  .rc-kb__anreisser {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}
/*
 * Bildspalte.
 *
 * `order` statt einer anderen Reihenfolge im Markup: Auf schmalen
 * Geräten steht das Bild oben und führt in die Sektion; am
 * Schreibtisch rechts, weil der Blick links mit der Überschrift
 * anfängt. Im Markup steht es vorn, damit es ohne CSS zuerst kommt.
 *
 * `align-self: stretch` plus `object-fit: cover`: Das Bild füllt die
 * Spalte auf die Höhe des Textes, egal wie lang der wird. Ein festes
 * Seitenverhältnis würde bei sechs verschiedenen Fragebögen (drei bis
 * sieben Fragen) mal eine Lücke, mal einen Überstand erzeugen.
 */
.rc-kb__bild {
  margin: 0;
  min-height: 0;
}
.rc-kb__bild img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 260px;
}
@media (min-width: 900px) {
  .rc-kb__bild {
    order: 2;
  }
  .rc-kb__bild img {
    max-height: none;
  }
}
.rc-kb__anreissertext {
  padding: var(--rc-space-8);
}
@media (max-width: 899px) {
  .rc-kb__anreissertext {
    padding: var(--rc-space-6) var(--rc-space-5);
  }
}
.rc-kb__zusagen {
  list-style: none;
  margin: var(--rc-space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--rc-space-3);
}
.rc-kb__zusagen li {
  position: relative;
  padding-left: 30px;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-text);
}
.rc-kb__zusagen li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 14px;
  border-right: 2.5px solid var(--rc-success);
  border-bottom: 2.5px solid var(--rc-success);
  transform: rotate(45deg);
}
.rc-kb__start {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  min-height: 56px;
}
.rc-kb__startpfeil {
  font-size: 1.2em;
  line-height: 1;
}
/*
 * Knopf und Rufnummer nebeneinander.
 *
 * Vorher stand die Nummer in einem eigenen dunkelgrünen Kasten rechts.
 * Damit hatte die Sektion drei Flächen (Sand außen, Weiß innen, Grün
 * rechts) und zwei gleich starke Handlungen nebeneinander – man sah
 * nicht, was der Hauptweg ist. Jetzt führt der Knopf, die Nummer steht
 * daneben als zweiter Weg.
 *
 * Umbruch erlaubt: Unter rund 520 px passen 56-px-Knopf und Nummer
 * nicht nebeneinander; dann steht die Nummer darunter statt
 * abgeschnitten daneben.
 */
.rc-kb__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-4) var(--rc-space-6);
  margin-top: var(--rc-space-6);
}
.rc-kb__telefon {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
  min-height: 56px;
  color: var(--rc-primary);
  text-decoration: none;
}
.rc-kb__telefon svg {
  flex: none;
  color: var(--rc-secondary);
}
.rc-kb__telefon:hover strong, .rc-kb__telefon:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-kb__telefontext {
  display: grid;
}
.rc-kb__telefontext strong {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--rc-primary-dark);
}
.rc-kb__telefontext small, .rc-kb__telefontext .small {
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-kb__hilfemeta {
  margin: var(--rc-space-4) 0 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-kb__vorrat {
  display: none;
}
.rc-kb__ersatz {
  margin: var(--rc-space-5) 0 0;
}
/* ══ Dialogfenster ═══════════════════════════════════════════════════════ */
.rc-kbm-offen, .rc-kbm-offen body {
  overflow: hidden;
}
/*
 * Der Rahmen des Fensters.
 *
 * `align-items: flex-start` statt `center`, dazu `margin: auto` am Dialog:
 * Solange Platz ist, steht das Fenster mittig – genau wie vorher. Reicht der
 * Platz nicht, wächst es NACH UNTEN und der Rahmen scrollt, statt oben aus
 * dem Bild zu laufen.
 *
 * Warum das nötig ist: Mit `align-items: center` verteilt Flexbox einen
 * Überhang auf beide Seiten. Der obere Teil – Titel, Schließen-Kreuz und
 * Schrittleiste – wandert dann über die obere Fensterkante hinaus und ist
 * durch nichts mehr erreichbar, weil ein zentriertes Flex-Kind sich nicht
 * zurückscrollen lässt. Der Betreiber hat genau das gemeldet: „oben ist
 * abgeschnitten".
 *
 * Der Überhang entsteht auf dem Telefon zuverlässig, obwohl `max-height`
 * gesetzt ist: `100vh` meint dort das GROSSE Sichtfeld, also die Höhe ohne
 * eingeblendete Adressleiste. Sichtbar ist aber das kleine. Auf einem
 * iPhone sind das rund 90 px Unterschied – die Hälfte davon fehlt oben.
 * Deshalb unten zusätzlich `dvh`, das die eingeblendete Leiste mitrechnet.
 * Ein Headless-Browser hat keine Adressleiste und kann den Fall nicht
 * zeigen; gemessen wurde er nicht, sondern aus den Sichtfeld-Einheiten
 * hergeleitet.
 */
.rc-kbm {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--rc-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rc-kbm[hidden] {
  display: none;
}
@media (max-width: 767px) {
  .rc-kbm {
    padding: 0;
  }
}
.rc-kbm__hinterg {
  position: fixed;
  inset: 0;
  background-color: rgba(var(--rc-scrim-rgb), 0.55);
}
.rc-kbm__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1120px;
  margin: auto;
  max-height: calc(100vh - var(--rc-space-8));
  max-height: calc(100dvh - var(--rc-space-8));
  background-color: var(--rc-surface);
  border-radius: var(--rc-radius-visual);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(var(--rc-scrim-rgb), 0.28);
}
@media (max-width: 767px) {
  .rc-kbm__dialog {
    max-width: none;
    margin: 0;
    max-height: 100vh;
    height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
}
/* ── Kopf ─────────────────────────────────────────────────────────────── */
.rc-kbm__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
  padding: var(--rc-space-4) var(--rc-space-5);
  border-bottom: 1px solid var(--rc-border);
}
.rc-kbm__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
  min-width: 0;
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
}
.rc-kbm__marke svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--rc-primary);
}
.rc-kbm__marke span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-kbm__x {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rc-surface-warm);
  border: 0;
  border-radius: 50%;
  color: var(--rc-text);
  cursor: pointer;
}
.rc-kbm__x svg {
  width: 20px;
  height: 20px;
}
.rc-kbm__x:hover {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary);
}
/* ── Schrittleiste ────────────────────────────────────────────────────── */
/*
 * Waagerechter Rand NICHT hier, sondern an der Liste – siehe unten.
 *
 * Ein scrollender Kasten zeigt seinen rechten Innenabstand nicht: Der Inhalt
 * läuft bis an die Kante und der Abstand fällt weg, sobald überhaupt
 * gescrollt wird. Gemessen bei 1536 px endete „8 E-Mail" vier Pixel vor dem
 * Dialogrand und sah abgeschnitten aus, obwohl 24 px Rand gesetzt waren.
 *
 * Die beiden Verläufe sind der bekannte Scrollschatten: Sie hängen mit
 * `background-attachment: local` am Inhalt, mit `scroll` am Kasten. Steht
 * der Inhalt am Anfang, deckt der weiße Verlauf den Schatten zu; ist links
 * oder rechts noch etwas, bleibt ein weicher Schatten stehen. So sieht man,
 * dass die Leiste weitergeht, statt sie für zerschnitten zu halten.
 */
.rc-kbm__schritte {
  padding: var(--rc-space-4) 0;
  border-bottom: 1px solid var(--rc-border);
  overflow-x: auto;
  scrollbar-width: none;
  background-image: linear-gradient(to right, var(--rc-surface), rgba(255, 255, 255, 0)), linear-gradient(to left, var(--rc-surface), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(var(--rc-scrim-rgb), 0.13), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(var(--rc-scrim-rgb), 0.13), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.rc-kbm__schritte::-webkit-scrollbar {
  display: none;
}
.rc-kbm__schrittliste {
  list-style: none;
  margin: 0;
  padding: 0 var(--rc-space-5);
  display: flex;
  align-items: center;
  gap: var(--rc-space-1);
  min-width: max-content;
}
.rc-kbm__schritt {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  color: var(--rc-muted);
  /*
     * Verbindungsstrich zum nächsten Schritt.
     *
     * 12 px breit mit 2 px Rand, nicht 40 mit 8: Elektromobile haben acht
     * Schritte (sieben Fragen plus E-Mail). Mit den großzügigen Werten
     * brauchte die Leiste rund 1100 px bei 1040 px Platz im Dialog – der
     * letzte Schritt lag außerhalb und war nur durch seitliches Scrollen zu
     * finden.
     *
     * Auch 16 px mit 4 px Rand reichten noch nicht: gemessen 1092 px Inhalt
     * bei 1072 px Innenbreite, die letzten 20 px standen im Rand und „E-Mail"
     * klebte am Rahmen. Mit 20 px je Verbindung bleiben 1036 px – die Leiste
     * passt am Schreibtisch vollständig.
     *
     * Für den Fall, dass ein Bogen einmal noch länger wird, rollt das Skript
     * zusätzlich den aktuellen Schritt ins Bild.
     */
}
.rc-kbm__schritt:not(:last-child)::after {
  content: "";
  width: 12px;
  height: 1px;
  margin-inline: 2px;
  background-color: var(--rc-border);
}
.rc-kbm__schritt.is-fertig, .rc-kbm__schritt.is-aktuell {
  color: var(--rc-text);
}
.rc-kbm__schrittnr {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rc-border);
  color: var(--rc-surface);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-bold);
}
.is-fertig .rc-kbm__schrittnr, .is-aktuell .rc-kbm__schrittnr {
  background-color: var(--rc-primary);
  color: #fff;
}
.rc-kbm__schrittname {
  font-size: var(--rc-fs-sm);
  white-space: nowrap;
}
.is-aktuell .rc-kbm__schrittname {
  font-weight: var(--rc-fw-semibold);
}
/* ── Körper ───────────────────────────────────────────────────────────── */
.rc-kbm__koerper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--rc-space-6) var(--rc-space-5);
  scrollbar-width: auto;
  scrollbar-color: var(--rc-border-strong) transparent;
}
.rc-kbm__koerper::-webkit-scrollbar {
  width: 12px;
}
.rc-kbm__koerper::-webkit-scrollbar-track {
  background: transparent;
}
.rc-kbm__koerper::-webkit-scrollbar-thumb {
  background-color: var(--rc-border-strong);
  border-radius: 6px;
}
/* ── Frage ────────────────────────────────────────────────────────────── */
.rc-kbm__frage {
  max-width: 860px;
  margin-inline: auto;
  animation: rc-kb-ein var(--rc-dur-drawer, 0.3s) var(--rc-ease) both;
}
.rc-kbm__fragetitel {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-xl);
  font-weight: var(--rc-fw-bold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
  letter-spacing: 0;
  /*
     * Kein sichtbarer Fokusring.
     *
     * Die Überschrift bekommt den Fokus per Skript, damit Tastatur und
     * Vorlesesoftware nach jedem Schritt an der richtigen Stelle stehen. Beim
     * ersten Aufbau gab es aber noch keine Eingabe, und Chrome wertet
     * `:focus-visible` dann als erfüllt – im Screenshot des Betreibers lag
     * deshalb ein roter Rahmen um den Fragetext, ohne dass jemand etwas
     * angeklickt hatte.
     *
     * Eine Überschrift ist kein Bedienelement; WCAG 2.4.7 verlangt den
     * sichtbaren Fokus für bedienbare Elemente. Der Fokus bleibt also
     * erhalten – nur seine Darstellung entfällt.
     */
}
.rc-kbm__fragetitel:focus, .rc-kbm__fragetitel:focus-visible {
  outline: none;
}
.rc-kbm__fragehinweis {
  margin: 0 0 var(--rc-space-5);
  font-size: var(--rc-fs-base);
  color: var(--rc-muted);
  line-height: var(--rc-lh-body);
}
.rc-kbm__optionen {
  display: grid;
  gap: var(--rc-space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .rc-kbm__optionen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
 * Antwortkarte: Ziffer, Beschriftung, Zusatz.
 *
 * Die ganze Karte ist Klickfläche, nicht nur der Text – bei einer Zielgruppe,
 * deren Zeigefinger zittert, ist die Fläche die halbe Bedienbarkeit.
 */
.rc-kbm__option {
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
  width: 100%;
  min-height: 72px;
  padding: var(--rc-space-4);
  text-align: left;
  background-color: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  cursor: pointer;
  transition: border-color var(--rc-dur-btn) var(--rc-ease), background-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-kbm__option:hover {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
}
.rc-kbm__option:focus-visible {
  outline: 3px solid var(--rc-primary);
  outline-offset: 2px;
}
.rc-kbm__optionnr {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rc-primary);
  color: #fff;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-bold);
}
.rc-kbm__optionnr--egal {
  background-color: var(--rc-disabled, #9a938a);
}
.rc-kbm__optiontext {
  min-width: 0;
}
.rc-kbm__optionlabel {
  display: block;
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
}
.rc-kbm__optionunter {
  display: block;
  margin-top: 2px;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
/*
 * Antwort, hinter der kein Modell steht.
 *
 * Die Zahl unter jeder Antwort wird seit dem 26.08.2026 im Browser aus den
 * bisherigen Angaben gerechnet; damit kann sie null werden. Diese Antwort
 * bleibt anklickbar – im Ergebnis steht dann in der Tabelle, woran es liegt,
 * und das ist mehr wert als ein toter Knopf.
 *
 * Was NICHT gedimmt wird, ist die Beschriftung selbst. Bei einer Zielgruppe
 * ab 65 kostet grauer Text auf sandfarbenem Grund Lesbarkeit, und die Antwort
 * muss lesbar bleiben, um sie überhaupt beurteilen zu können. Unterschieden
 * wird über Fläche, Strichart und den Zusatz darunter – drei Merkmale, keines
 * davon allein Farbe (WCAG 1.4.1).
 */
/*
 * Eigener Modifikator statt des vorhandenen `is-leer`: Dieselbe Klasse trägt
 * schon die Ergebnisbilanz, und dort greifen Nachfahrenregeln wie
 * `.is-leer .rc-kbm__bilanzzahl`. Ein zweiter Träger derselben Klasse wäre
 * eine Falle für den nächsten, der hier etwas ändert.
 */
.rc-kbm__option--leer {
  background-color: var(--rc-surface-warm);
  border-style: dashed;
  border-color: var(--rc-border-strong);
}
.rc-kbm__option--leer .rc-kbm__optionnr {
  background-color: var(--rc-disabled);
}
.rc-kbm__optionunter--leer {
  color: var(--rc-red-text);
  font-weight: var(--rc-fw-semibold);
}
.rc-kbm__zurueck {
  margin-top: var(--rc-space-5);
  min-height: 44px;
  padding: var(--rc-space-2) var(--rc-space-4);
  background: none;
  border: 1.5px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-pill);
  font: inherit;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
  cursor: pointer;
}
.rc-kbm__zurueck:hover {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
}
/* ── Ergebnis: Bilanz ─────────────────────────────────────────────────── */
.rc-kbm__bilanz {
  display: flex;
  align-items: center;
  gap: var(--rc-space-5);
  padding: var(--rc-space-5);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
}
.rc-kbm__bilanzzahl {
  flex: none;
  font-size: 44px;
  font-weight: var(--rc-fw-bold);
  line-height: 1;
  color: var(--rc-success);
}
.is-leer .rc-kbm__bilanzzahl {
  color: var(--rc-muted);
}
.rc-kbm__bilanztext {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.rc-kbm__bilanztext strong {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-success);
  letter-spacing: 0.02em;
}
.rc-kbm__bilanztext strong:focus, .rc-kbm__bilanztext strong:focus-visible {
  outline: none;
}
.is-leer .rc-kbm__bilanztext strong {
  color: var(--rc-muted);
}
.rc-kbm__bilanztext span {
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
}
.rc-kbm__bilanztext small, .rc-kbm__bilanztext .small {
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.rc-kbm__bilanzhaken {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rc-success-soft, #e3efe6);
  color: var(--rc-success);
  font-size: 22px;
  font-weight: var(--rc-fw-bold);
}
.is-leer .rc-kbm__bilanzhaken {
  display: none;
}
/* ── Ergebnis: gegebene Angaben ───────────────────────────────────────── */
.rc-kbm__angaben {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
  margin-top: var(--rc-space-4);
  padding: var(--rc-space-3) var(--rc-space-4);
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-card);
}
.rc-kbm__angabensymbol {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--rc-primary);
}
.rc-kbm__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  flex: 1 1 240px;
  min-width: 0;
}
/*
 * Kompakt, weil es viele sein können.
 *
 * Bei Elektromobilen sind es sieben Angaben. Mit 36 px Höhe und 17-px-Text
 * füllten sie vier Zeilen und drängten das Produktraster nach unten – der
 * Beleg für die Auswahl nahm mehr Platz ein als die Auswahl selbst. 32 px und
 * eine Stufe kleinerer Text bringen sie auf zwei Zeilen, bleiben aber über
 * der 44-px-Klickfläche, weil der Umriss über die Schriftfläche hinausreicht.
 */
.rc-kbm__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  min-height: 32px;
  padding: var(--rc-space-1) var(--rc-space-2) var(--rc-space-1) var(--rc-space-3);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-pill);
  font: inherit;
  font-size: var(--rc-fs-xs);
  color: var(--rc-text);
  cursor: pointer;
}
.rc-kbm__chip:hover {
  border-color: var(--rc-primary);
  color: var(--rc-primary);
}
.rc-kbm__chipx {
  font-size: 1.1em;
  line-height: 1;
  color: var(--rc-muted);
}
.rc-kbm__angabenknopf {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  margin-left: auto;
}
.rc-kbm__aendern, .rc-kbm__neu {
  min-height: 40px;
  padding: var(--rc-space-2) var(--rc-space-3);
  background: none;
  font: inherit;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
  cursor: pointer;
}
.rc-kbm__aendern {
  border: 1.5px solid var(--rc-primary);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
}
.rc-kbm__aendern:hover {
  background-color: var(--rc-primary);
  color: #fff;
}
.rc-kbm__neu {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
}
.rc-kbm__neu:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ── Ergebnis: Produktraster ──────────────────────────────────────────── */
/*
 * Alle Produkte der Kategorie, nicht nur die passenden.
 *
 * Der Betreiber: „es soll dort auch die produkte anzeigen die nicht die
 * eigenschaften haben damit man besser vergleichen kann." Die Reihenfolge
 * trägt die Aussage – oben, was am besten passt – und die Tabelle unter jeder
 * Karte sagt Zeile für Zeile, woran es liegt.
 *
 * Drei Spalten wie im Benchmark, nicht vier.
 */
.rc-kbm__karten {
  display: grid;
  gap: var(--rc-space-4);
  margin-top: var(--rc-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .rc-kbm__karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rc-kbm__karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.rc-kbm__karte {
  display: flex;
  flex-direction: column;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  overflow: hidden;
}
.rc-kbm__karte.is-voll {
  border-color: var(--rc-success);
}
.rc-kbm__band {
  margin: 0;
  padding: var(--rc-space-2) var(--rc-space-3);
  background-color: var(--rc-success);
  color: #fff;
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-bold);
  letter-spacing: 0.02em;
}
/*
 * Die echte Shopware-Karte in der Beraterkarte.
 *
 * Sie bringt Bild, Preis, Warenkorb, Vergleich und Merkzettel mit. Hier
 * fallen nur ihr eigener Rahmen und ihre eigene Fläche weg – beides trägt
 * schon die Hülle darum.
 */
.rc-kbm__karteninhalt {
  /*
     * Eckdaten und Verfügbarkeit ausblenden.
     *
     * Beide stünden zusätzlich zur Vergleichstabelle in der Karte – zwei
     * Listen übereinander, die dasselbe sagen. Die Tabelle nennt denselben
     * Wert UND ob er zur Antwort passt; das ist die nützlichere von beiden.
     */
}
.rc-kbm__karteninhalt .card.product-box {
  border: 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
  height: auto;
}
.rc-kbm__karteninhalt .card-body {
  padding: var(--rc-space-3) var(--rc-space-4) var(--rc-space-4);
}
.rc-kbm__karteninhalt .product-badges {
  display: none;
}
.rc-kbm__karteninhalt .product-image-wrapper {
  margin: calc(var(--rc-space-3) * -1) calc(var(--rc-space-4) * -1) var(--rc-space-3);
  aspect-ratio: 1.3333333333;
}
.rc-kbm__karteninhalt .product-name {
  font-size: var(--rc-fs-base);
  min-height: 0;
}
.rc-kbm__karteninhalt .rc-key-facts, .rc-kbm__karteninhalt .rc-availability {
  display: none;
}
/* ── Ergebnis: Vergleichstabelle je Karte ─────────────────────────────── */
/*
 * Jede Karte trägt dieselben Zeilen in derselben Reihenfolge – auch für
 * Fragen, die übersprungen wurden. Nur so kann man von Karte zu Karte
 * vergleichen, statt jede einzeln zu lesen.
 *
 * Die Bedeutung hängt nicht an der Farbe allein: Jede Stufe hat ein eigenes
 * Zeichen, und für Vorlesesoftware steht der Klartext daneben.
 * Farbfehlsichtigkeit ist ab 65 deutlich häufiger.
 */
.rc-kbm__daten {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--rc-fs-sm);
  table-layout: fixed;
}
.rc-kbm__daten th, .rc-kbm__daten td {
  padding: var(--rc-space-2) var(--rc-space-4);
  border-top: 1px solid var(--rc-border);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.rc-kbm__daten th {
  width: 45%;
  text-align: left;
  font-weight: var(--rc-fw-regular);
  color: var(--rc-muted);
}
.rc-kbm__daten td {
  text-align: right;
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-kbm__daten .is-ja {
  background-color: var(--rc-success-soft, #e3efe6);
}
.rc-kbm__daten .is-ja th, .rc-kbm__daten .is-ja td {
  color: var(--rc-success);
}
.rc-kbm__daten .is-nein {
  background-color: #fbf0e2;
}
.rc-kbm__daten .is-nein th, .rc-kbm__daten .is-nein td {
  color: #8a5216;
}
.rc-kbm__daten .is-unbekannt td {
  color: var(--rc-muted);
  font-weight: var(--rc-fw-regular);
}
.rc-kbm__zeichen {
  margin-right: var(--rc-space-1);
  font-weight: var(--rc-fw-bold);
}
.rc-kbm__mehr {
  justify-self: center;
  display: block;
  margin: var(--rc-space-5) auto 0;
  min-height: 56px;
  padding: var(--rc-space-3) var(--rc-space-6);
  background: none;
  border: 1.5px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  font: inherit;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
  cursor: pointer;
}
.rc-kbm__mehr:hover {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
}
.rc-kbm__fussaktion {
  margin-top: var(--rc-space-6);
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-border);
  text-align: center;
  /*
     * Der Knopf darf umbrechen.
     *
     * Seine Beschriftung trägt seit dem 26.08.2026 die geprüfte Zahl und
     * wurde damit länger („Alle 4 Modelle mit diesen Eigenschaften ansehen").
     * Gemessen bei 320 px Fensterbreite: Der Knopf lief einzeilig aus dem
     * Dialog heraus und endete sichtbar bei „mit diesen Eige…". Die Seite
     * scrollte dabei NICHT waagerecht – der Dialog schneidet ab –, der Text
     * war also schlicht weg.
     */
}
.rc-kbm__fussaktion .btn {
  max-width: 100%;
  white-space: normal;
  /*
         * `height: auto` gegen die feste Höhe aus components/_buttons.scss.
         *
         * Dort steht für `.btn-lg` HÖHE und Mindesthöhe auf --rc-control-lg.
         * Sobald die Beschriftung umbricht, ragt der Text oben und unten aus
         * dem Knopf heraus – bei 320 px war von drei Zeilen die erste und die
         * dritte angeschnitten. Die Mindesthöhe bleibt: 56 px Klickfläche
         * sind die Vorgabe, sie ist hier nur nicht mehr die Obergrenze.
         */
  height: auto;
  min-height: var(--rc-control-lg, 56px);
  line-height: var(--rc-lh-heading);
  padding-top: var(--rc-space-3);
  padding-bottom: var(--rc-space-3);
}
/*
 * Der Satz unter dem Knopf zur Trefferliste.
 *
 * Er nennt, wonach die verlinkte Liste gefiltert ist und was sich nicht
 * filtern ließ. Bis zum 26.08.2026 stand dort nichts: Der Knopf versprach
 * „Alle Modelle mit diesen Eigenschaften", und die Zielseite meldete „Keine
 * Treffer für Ihre Suche". Ohne diesen Satz wäre auch die reparierte Fassung
 * schwer zu verstehen – der Kunde sähe in der Liste plötzlich Modelle, die
 * eine seiner Angaben nicht erfüllen.
 *
 * --rc-fs-sm sind 17 px – die Untergrenze für Fließtext, nicht weniger.
 */
.rc-kbm__listenhinweis {
  max-width: 46rem;
  margin: var(--rc-space-3) auto 0;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-muted);
}
/* ── E-Mail-Schritt ───────────────────────────────────────────────────── */
.rc-kbm__mailfeld {
  max-width: 30rem;
  margin-bottom: var(--rc-space-4);
}
.rc-kbm__mailbeschriftung {
  display: block;
  margin-bottom: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-kbm__maileingabe {
  min-height: 56px;
  font-size: var(--rc-fs-base);
}
.rc-kbm__mailfehler {
  margin: var(--rc-space-2) 0 0;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-danger, #b8402f);
}
/*
 * Der Zweckhinweis steht als Satz, nicht als Kästchen.
 *
 * Vorher gab es hier zwei Häkchen. Das erste („Ja, schicken Sie mir diese
 * Auswahl") war gar keine Einwilligung: Wer seine Adresse einträgt und auf
 * „Auswahl schicken" klickt, BITTET um die Zusendung – Rechtsgrundlage ist
 * Art. 6 Abs. 1 lit. b bzw. lit. f, nicht lit. a. Ein Häkchen, das bestätigt,
 * worum der Nutzer gerade gebeten hat, ist überflüssig und kostet einen Klick.
 *
 * Was Art. 13 DSGVO verlangt, ist die Information über den Zweck – und die
 * steht jetzt hier, in einem Satz.
 */
.rc-kbm__zweck {
  max-width: 46rem;
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  line-height: var(--rc-lh-body);
}
/*
 * Ein einziges Kästchen, leer vorbelegt.
 *
 * Ein späteres Anschreiben ist Direktwerbung nach § 7 Abs. 2 Nr. 3 UWG und
 * braucht die ausdrückliche, aktive Einwilligung. Sie mit der Zusendung
 * zusammenzulegen ginge nicht – Erwägungsgrund 43 DSGVO: Eine Einwilligung
 * gilt nicht als freiwillig erteilt, wenn zu verschiedenen
 * Verarbeitungsvorgängen nicht gesondert eingewilligt werden kann.
 *
 * Vorangekreuzt wäre sie nach EuGH C-673/17 („Planet49") unwirksam.
 */
.rc-kbm__einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  max-width: 46rem;
  min-height: 44px;
  margin-bottom: var(--rc-space-5);
  padding: var(--rc-space-2) 0;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-muted);
  cursor: pointer;
}
.rc-kbm__einwilligung input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  accent-color: var(--rc-primary);
  cursor: pointer;
}
.rc-kbm__mailaktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-3);
}
/* ── Fuß ──────────────────────────────────────────────────────────────── */
.rc-kbm__fuss {
  padding: var(--rc-space-3) var(--rc-space-5);
  border-top: 1px solid var(--rc-border);
  background-color: var(--rc-surface-warm);
  text-align: center;
}
.rc-kbm__zurueckuebersicht {
  min-height: 44px;
  padding: var(--rc-space-2) var(--rc-space-4);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
  cursor: pointer;
}
.rc-kbm__zurueckuebersicht:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ── Beraterauswahl auf der Startseite ────────────────────────────────── */
.rc-kb__auswahl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rc-space-3);
}
@media (min-width: 640px) {
  .rc-kb__auswahl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .rc-kb__auswahl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/*
 * Themenkachel – seit dem Umbau ein Knopf, kein Link.
 *
 * Der Betreiber zur alten Sektion: „leitet auch nur weiter – mache es so das
 * man dort direkt alle fragen beantworten kann." Der Klick holt den Bogen
 * nach und öffnet das Dialogfenster; die Startseite bleibt stehen.
 *
 * Die Regel gilt weiterhin auch für Links: Im <noscript>-Teil steht dieselbe
 * Kachel als Verweis auf die Kategorieseite.
 */
.rc-kb__berater {
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
  width: 100%;
  min-height: 92px;
  padding: var(--rc-space-4);
  text-align: left;
  background-color: var(--rc-surface);
  border: 2px solid transparent;
  border-radius: var(--rc-radius-card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-kb__berater:hover {
  border-color: var(--rc-primary);
}
.rc-kb__berater:focus-visible {
  outline: 3px solid var(--rc-primary);
  outline-offset: 2px;
}
.rc-kb__berater.is-laedt {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
}
.rc-kb__beraterpfeil {
  margin-left: auto;
  flex: none;
  font-size: 1.4em;
  line-height: 1;
  color: var(--rc-primary);
}
.rc-kb__auswahl--ersatz {
  margin-top: var(--rc-space-3);
}
/*
 * Ladehinweis im Dialogfenster.
 *
 * Er steht mittig auf der vollen Höhe des Körpers, damit das Fenster beim
 * Öffnen nicht als leerer Kasten erscheint und dann ruckartig gefüllt wird.
 */
.rc-kbm__laedt {
  margin: 0;
  padding: var(--rc-space-8) var(--rc-space-4);
  text-align: center;
  font-size: var(--rc-fs-base);
  color: var(--rc-muted);
}
.rc-kb__symbolfeld {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--rc-primary-soft);
  display: grid;
  place-items: center;
  color: var(--rc-primary);
}
.rc-kb__symbol {
  width: 32px;
  height: 27px;
}
.rc-kb__beratertext {
  min-width: 0;
}
.rc-kb__beratertitel {
  display: block;
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
}
.rc-kb__beraterzahl {
  display: block;
  margin-top: 2px;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
/* ── Bewegung ─────────────────────────────────────────────────────────── */
@keyframes rc-kb-ein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rc-kbm__frage {
    animation: none;
  }
}
/* ── Kennzeichnung passender Produkte in der Trefferliste ─────────────── */
/*
 * rc-kaufberater-treffer.js setzt diese Marke an jede Produktkachel, deren
 * Produkt zu den gemerkten Antworten passt.
 *
 * DIESE REGELN HABEN GEFEHLT. Beim Neuschreiben dieser Datei für das
 * Dialogfenster sind sie verlorengegangen; das Skript setzte weiter sein
 * Markup, nur ohne Formatierung. Ein SVG ohne Größenangabe füllt die volle
 * Breite seines Elternelements – im Screenshot des Betreibers ein Häkchen von
 * rund 200 × 200 px mitten in der Produktkachel, das Bild und Namen verdrängte.
 *
 * Merke für die Zukunft: Markup, das aus JavaScript kommt, taucht bei einer
 * Suche im Twig nicht auf. Wer eine SCSS-Datei neu schreibt, muss die
 * Klassennamen auch im JavaScript suchen.
 */
.rc-passt {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.3;
  color: var(--rc-success);
}
.rc-passt__zeichen {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--rc-success);
}
/*
 * Bewertungen – Sterne, Verteilung, Einzelbewertung.
 *
 * Zwei gemessene Ausgangswerte begründen fast alles hier:
 *
 * 1. Sternfarbe. Der Kern zeichnet mit $icon-review-color #FEDC70. Nachgerechnet
 *    nach WCAG-Formel: 1,34:1 auf Weiß, 1,27:1 auf der Shopfläche #FBF9F6,
 *    1,15:1 auf der Sandfläche #F2EDE5. Ein Stern in dieser Farbe ist für die
 *    Zielgruppe 65–80 schlicht nicht da.
 *
 *    var(--rc-star) #C8871F kommt auf 3,03:1 (Weiß) und 2,60:1 (Sand). Auf
 *    Weiß – also in der Produktkachel und in der einzelnen Bewertung, wo die
 *    Sterne der EINZIGE Träger der Aussage sind – ist damit die 3:1-Grenze für
 *    grafische Bedeutungsträger erfüllt. Im Bewertungskopf auf Sand bleibt es
 *    bei 2,60:1; dort steht die Zahl „4,1" unmittelbar daneben, die Aussage
 *    hängt also nicht am Stern allein. Ein noch dunklerer Wert bräuchte eine
 *    Änderung an --rc-star in abstracts/_tokens.scss – fremde Datei.
 *
 * 2. Sterngröße. Der Kern setzt Größe „xs" – 12px Kantenlänge. Ein Stern ist
 *    kein Text, sondern eine Form mit fünf Zacken; unter 16px ist nicht mehr
 *    zu unterscheiden, ob er halb oder voll ist. Hier: 17px in der Liste,
 *    24px im Kopf.
 *
 *    Eine dritte Stufe steht bewusst NICHT hier: Die Sternereihe neben dem
 *    Hersteller im Kaufbereich der Produktseite steht auf 22px. Der Wert hängt
 *    an der Zeilenhöhe der Herstellerzeile (29px) und damit am Kaufbereich,
 *    nicht an der Bewertungskomponente – er steht in components/_buybox.scss
 *    bei `.rc-buybox__meta .rc-sterne .icon`, zusammen mit der Messung.
 *
 * Flächen statt Linien: Der Kopf steht auf Sand (--rc-surface-warm), die
 * Einzelbewertungen auf Weiß. Der Kern trennte sie über eine 1px-Linie unter
 * jeder Bewertung – bei zwölf Bewertungen zwölf Haarlinien untereinander.
 */
.rc-sterne {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
}
.rc-sterne .product-review-point {
  display: inline-flex;
  margin: 0;
}
.rc-sterne .icon {
  width: 17px;
  height: 17px;
  color: var(--rc-border-strong);
}
.rc-sterne .icon > svg {
  width: 100%;
  height: 100%;
  top: 0;
}
.rc-sterne .icon-review {
  color: var(--rc-star);
}
.rc-sterne .point-blank .icon {
  color: var(--rc-border-strong);
}
.rc-sterne--klein .icon {
  width: 17px;
  height: 17px;
}
.rc-sterne--gross .icon {
  width: 24px;
  height: 24px;
}
.rc-sterne__anzahl {
  margin-left: var(--rc-space-3);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  white-space: nowrap;
}
.product-review-rating {
  margin-right: 0;
}
.rc-reviews {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-6);
}
.rc-reviews__raster {
  row-gap: var(--rc-space-6);
}
.rc-reviews__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-5);
}
.rc-reviews__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--rc-space-5) var(--rc-space-7);
  padding: var(--rc-space-6);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface-warm);
}
/*
 * Bilanz: Zahl links, Sterne und Anzahl rechts.
 *
 * Die 320px Grundbreite sind gemessen, nicht geschätzt: 46px Ziffernblock
 * („4,1" = 55px), 16px Lücke, fünf 24px-Sterne mit 3px Abstand (132px) und die
 * Zeile „8 Bewertungen" untereinander. Bei 240px brach der Durchschnitt am
 * Komma um und stand dreizeilig.
 */
.rc-reviews__bilanz {
  flex: 0 1 320px;
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
}
.rc-reviews__schnitt {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--rc-fs-3xl);
  font-weight: var(--rc-fw-bold);
  line-height: var(--rc-lh-tight);
  color: var(--rc-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rc-reviews__bilanz-text {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-1);
  min-width: 0;
}
.rc-reviews__bilanz-anzahl {
  margin: 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-reviews__balken-titel {
  float: none;
  width: auto;
  margin: 0 0 var(--rc-space-2);
  padding: 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-reviews__balken {
  flex: 1 1 320px;
  max-width: 620px;
  min-width: 0;
}
.rc-reviews__balken fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-3);
}
.rc-reviews__stufe-feld {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rc-reviews__stufe-label {
  display: grid;
  grid-template-columns: 6.5rem 1fr 2.5rem;
  align-items: center;
  gap: var(--rc-space-3);
  min-height: 44px;
  margin: 0;
  padding: 0 var(--rc-space-3);
  border-radius: var(--rc-radius-control);
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
  cursor: pointer;
  transition: background-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-reviews__stufe-label:hover {
  background-color: var(--rc-surface);
}
.rc-reviews__stufe-name {
  white-space: nowrap;
}
.rc-reviews__stufe-spur {
  display: block;
  height: 12px;
  min-width: 0;
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-surface);
}
.rc-reviews__stufe-wert {
  display: block;
  height: 100%;
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-star);
}
.rc-reviews__stufe-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--rc-muted);
}
.rc-reviews__stufe-feld:checked + .rc-reviews__stufe-label {
  background-color: var(--rc-surface);
  font-weight: var(--rc-fw-semibold);
  outline: 2px solid var(--rc-primary);
  outline-offset: -2px;
}
.rc-reviews__stufe-feld:focus-visible + .rc-reviews__stufe-label {
  outline: 3px solid var(--rc-accent);
  outline-offset: 2px;
}
.rc-reviews__stufe--leer .rc-reviews__stufe-label {
  color: var(--rc-muted);
  cursor: default;
}
.rc-reviews__stufe--leer .rc-reviews__stufe-label:hover {
  background-color: transparent;
}
.rc-reviews__leer {
  flex: 1 1 100%;
}
.rc-reviews__leer-titel {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-reviews__leer-text {
  margin: 0;
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
  color: var(--rc-text-soft);
  max-width: var(--rc-measure);
}
/*
 * Beispieldaten statt Durchschnitt.
 *
 * Steht an der Stelle, an der sonst „4,3" mit Sternereihe und
 * Verteilungsbalken stünde, solange ein Beispieldatensatz im Bestand ist
 * (Begründung in component/review/review-widget.html.twig).
 *
 * Warum ein eigener Kasten und nicht der Stil von .rc-reviews__leer: Der
 * Kopf trägt bereits die warme Fläche --rc-surface-warm. Ein Hinweis in
 * derselben Farbe darauf liest sich als Beschriftung des Bereichs, nicht als
 * Einschränkung. Die linke Kante in --rc-red-text (gemessen 4,9:1 gegen die
 * weiche rote Fläche, 7,4:1 gegen Weiß) macht ihn zu dem, was er ist: ein
 * Vorbehalt. Dieselbe Farbe trägt der Hinweis an jeder einzelnen Bewertung,
 * beides gehört zusammen.
 *
 * flex-basis 100 %, damit der Kasten die ganze Kopfzeile einnimmt – der
 * Aufruf „Bewertung schreiben" rutscht dadurch in die nächste Zeile und
 * behält seine 56px.
 */
.rc-reviews__beispiel {
  flex: 1 1 100%;
  padding: var(--rc-space-4) var(--rc-space-5);
  border-left: 4px solid var(--rc-red-text);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-red-soft);
}
.rc-reviews__beispiel-titel {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-red-text);
}
.rc-reviews__beispiel-text {
  margin: 0;
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
  color: var(--rc-text);
  max-width: var(--rc-measure);
}
/*
 * Der Aufruf sitzt am rechten Ende derselben Zeile.
 *
 * Gemessen bei 1440px: Die Fläche ist 1360px breit, Bilanz (320) und
 * Verteilung (620) füllen mit den Lücken rund 1030. Stand der Knopf in einer
 * eigenen Zeile, blieben rechts über 300px leer und unten eine ganze
 * Knopfzeile – die Fläche wirkte unfertig. Auf schmalen Geräten rutscht er
 * durch flex-wrap von allein darunter.
 */
.rc-reviews__aufruf {
  flex: 0 1 auto;
  margin-left: auto;
  align-self: center;
}
.rc-reviews__aufruf-knopf {
  min-height: var(--rc-control-lg);
  padding-inline: var(--rc-space-6);
  font-size: var(--rc-fs-base);
  text-transform: none;
  letter-spacing: normal;
}
.rc-reviews__werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
}
.rc-reviews__werkzeuge:empty {
  display: none;
}
.rc-reviews__sortierung {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  margin-left: auto;
}
.rc-reviews__sortierung .form-label {
  margin: 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  white-space: nowrap;
}
.rc-reviews__sortierung .form-select {
  min-height: var(--rc-control-md);
  font-size: var(--rc-fs-sm);
  width: auto;
}
.rc-reviews__sprache .form-label {
  margin: 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
/*
 * Liste und Einzelbewertung.
 *
 * Die Liste war im Kern ein Bootstrap-Collapse am selben Schalter wie das
 * Formular; gemessen verschwanden beim Klick auf „Bewertung schreiben" alle
 * acht Bewertungen. Seit review.html.twig die Collapse-Klassen weglässt, ist
 * hier kein `.show` mehr nötig – und darf auch keins mehr stehen, sonst bliebe
 * die Liste ohne die Klasse als inline-Block ohne Abstände zurück.
 */
.rc-reviews__liste {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-4);
}
/*
 * Beschriftung des Aufruf-Knopfes.
 *
 * Bootstrap setzt `.collapsed`, solange das Formular zu ist. Die Regel des
 * Kerns ordnet genau diesem Zustand die Beschriftung „Formular schließen" zu –
 * richtig war das nur, solange der Knopf zwei Ziele mit gegenläufigem Zustand
 * hatte. Mit einem Ziel gilt die einfache Zuordnung: zu = „Bewertung
 * schreiben", offen = „Formular schließen".
 */
.rc-reviews__aufruf-schliessen {
  display: none;
}
.rc-reviews__aufruf-knopf:not(.collapsed) .rc-reviews__aufruf-schreiben {
  display: none;
}
.rc-reviews__aufruf-knopf:not(.collapsed) .rc-reviews__aufruf-schliessen {
  display: inline;
}
.rc-review {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-3);
  margin: 0;
  padding: var(--rc-space-5);
  border: 0;
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface);
}
.rc-review__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rc-space-2) var(--rc-space-4);
}
.rc-review__titel {
  margin: 0;
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
}
.rc-review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-2) var(--rc-space-4);
  margin: 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-review__autor {
  font-weight: var(--rc-fw-medium);
  color: var(--rc-text-soft);
}
.rc-review__text {
  margin: 0;
  max-width: var(--rc-measure);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
  color: var(--rc-text);
  word-break: break-word;
}
.rc-review__variante {
  margin: 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-review__foto {
  margin: 0;
}
.rc-review__foto img {
  display: block;
  /*
         * 420px: mehr braucht ein Beleg-Schnappschuss nicht.
         *
         * Bewusst als width/max-width-Paar und nicht als min(100%, 420px):
         * scssphp hält min() für die Sass-Funktion gleichen Namens und bricht
         * bei gemischten Einheiten (Prozent und Pixel) den ganzen Theme-Build
         * ab – mit derselben nichtssagenden Meldung wie die :has()-Falle.
         */
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--rc-radius-control);
}
.rc-review__antwort {
  padding: var(--rc-space-4);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-primary-soft);
}
.rc-review__antwort p {
  margin: 0;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-text);
}
.rc-review__antwort-titel {
  font-weight: var(--rc-fw-semibold);
  margin-bottom: var(--rc-space-1) !important;
}
/*
 * Kennzeichnung von Beispieldatensätzen.
 *
 * Nach Anhang Nr. 23b UWG ist die Behauptung, Bewertungen stammten von
 * Verbrauchern, die das Produkt genutzt haben, ohne Prüfung unzulässig. Solange
 * Beispieldaten im Shop liegen, muss das an der Bewertung selbst stehen – nicht
 * nur in der Datenbank. Deshalb warm, sichtbar und nicht wegzuklicken.
 */
.rc-review--beispiel {
  background-color: var(--rc-warning-soft);
}
/*
 * Nicht --rc-warning: Nachgerechnet kommt #A86512 auf der warmen Fläche
 * #FBF3E6 nur auf 4,20:1. Der Hinweis steht mit 17px halbfett – das ist nach
 * WCAG kein „großer Text" (dafür bräuchte es 18,66px fett), also gilt die
 * 4,5:1-Schwelle. --rc-red-text #9E3527 liegt bei 6,37:1 und liest sich als
 * ernster Hinweis, nicht als Fehlermeldung.
 */
.rc-review__hinweis {
  margin: 0;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-red-text);
}
.rc-reiter-zahl {
  font-weight: var(--rc-fw-regular);
  color: var(--rc-muted);
}
@media (max-width: 575px) {
  .rc-reviews__kopf {
    padding: var(--rc-space-5) var(--rc-space-4);
    gap: var(--rc-space-5);
  }
  .rc-reviews__bilanz {
    flex: 1 1 100%;
  }
  .rc-reviews__balken {
    flex: 1 1 100%;
  }
  .rc-reviews__stufe-label {
    grid-template-columns: 5.5rem 1fr 2rem;
    gap: var(--rc-space-2);
    padding-inline: var(--rc-space-2);
    font-size: var(--rc-fs-xs);
  }
  .rc-review {
    padding: var(--rc-space-4);
  }
  .rc-reviews__aufruf-knopf {
    width: 100%;
  }
}
/*
 * Aktionsleiste mit Countdown (§3: Rot ausschließlich für Sale-Aktionen).
 *
 * HALTUNG DIESER LEISTE
 *
 * Die Zielgruppe ist 65 bis 80 Jahre alt. Zeitdruck führt bei ihr zum Abbruch,
 * nicht zum Kauf: Wer sich gedrängt fühlt, legt das Gerät weg und ruft
 * bestenfalls an. Die Uhr ist deshalb eine Auskunft und kein Druckmittel.
 *
 * Daraus folgt, was hier absichtlich NICHT steht:
 *   - keine Animation, kein Blinken, kein Pulsieren – nirgends in dieser Datei
 *     gibt es transition, animation oder @keyframes
 *   - kein zweites Rot auf Rot; der Zeitchip ist eine dunklere Vertiefung
 *     derselben Fläche, kein eigener Signalton
 *   - die Sekunden sind nicht größer als der Rest, sie erscheinen überhaupt
 *     erst in der letzten Stunde (siehe main.js)
 *   - die Uhr ist nicht fetter oder größer als die Aktionsbotschaft; die
 *     Botschaft ist der Grund für den Besuch, die Restzeit nur ihre Fußnote
 */
.rc-promo-bar {
  background-color: var(--rc-red-deep);
  color: #fff;
  /*
     * 17 px, auch auf dem Telefon.
     *
     * Hier stand für Breiten bis 480 px eine Ausnahme von 15 px, begründet mit
     * der Bauhöhe des mitlaufenden Kopfes. Gemessen am 28.08.2026 bei 390 px:
     * mit 15 px war die Leiste 55,0 px hoch, mit 17 px sind es 61,9 px –
     * knapp sieben Pixel für die Untergrenze, die das Theme sich selbst
     * gegeben hat (_tokens.scss: „17px die Untergrenze"). Eine Restlaufzeit,
     * die die Zielgruppe nicht lesen kann, spart keinen Platz, sie
     * verschwendet ihn.
     */
  font-size: var(--rc-fs-xs);
  line-height: 1.35;
}
.rc-promo-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--rc-space-2) var(--rc-space-4);
  min-height: var(--rc-control-sm);
  padding-block: var(--rc-space-2);
}
.rc-promo-bar__link {
  display: block;
  color: #fff;
  text-decoration: none;
}
.rc-promo-bar__link:hover, .rc-promo-bar__link:focus-visible {
  color: #fff;
}
/*
 * Der Fokusring braucht auf dem Rot eine eigene Farbe.
 *
 * base/_focus.scss setzt global `outline: 2px solid var(--rc-secondary)`
 * (#B4573A). GEMESSEN am 30.08.2026 bei 1440 px: dieser Ring gegen die
 * Aktionsleiste #9E3527 = 1,46:1. WCAG 2.1 SC 1.4.11 verlangt 3:1 für die
 * Anzeige eines Bedienelement-Zustands. Auf weißem Grund stimmt derselbe Ring
 * (4,81:1) – auf zwei roten Braun­tönen übereinander sieht man ihn nicht.
 *
 * Ein weißer Ring kommt auf dieser Fläche auf 7,02:1. Geändert wird nur die
 * Farbe; Stärke, Abstand und Radius bleiben die globalen, damit der Ring im
 * Tabulatorlauf überall gleich aussieht.
 *
 * Die Leiste ist als Ganzes der Link (gemessen 1440 × 43 px) und zugleich die
 * dritte Station im Tabulatorlauf – der Ring liegt also am oberen Fensterrand
 * und wird ohne diese Zeile praktisch nicht wahrgenommen.
 *
 * `outline-offset: -2px` statt der globalen +2px aus demselben Grund: Der Link
 * beginnt bei y = 0 und ist genauso breit wie das Fenster. Ein außen liegender
 * Ring läge oben außerhalb des Bildes und links wie rechts außerhalb des
 * Fensters. Innen liegt er vollständig auf dem Rot.
 */
.rc-promo-bar__link:focus-visible {
  outline-color: #fff;
  outline-offset: -2px;
}
.rc-promo-bar__text {
  font-weight: var(--rc-fw-semibold);
  text-underline-offset: 3px;
  /*
     * Keine automatische Silbentrennung in der Aktionsbotschaft.
     *
     * base/_typography.scss setzt `body { hyphens: auto }`. Im Fließtext ist
     * das richtig, hier nicht: Bei 390 px stand im Screenshot „20 % Rabatt auf
     * das ge-samte Sortiment" – ein Trennstrich mitten im Wort, in einer
     * Zeile, die aus vier Wörtern besteht. Dieselbe Ausnahme steht aus
     * demselben Grund schon in layout/_cart.scss.
     */
  hyphens: manual;
  -webkit-hyphens: manual;
}
.rc-promo-bar__link:hover .rc-promo-bar__text, .rc-promo-bar__link:focus-visible .rc-promo-bar__text {
  text-decoration: underline;
}
/*
 * Der Zeitchip ist eine Vertiefung, keine Aufhellung.
 *
 * Vorher lag hier rgba(255,255,255,0.16) – ein hellerer Fleck auf dem Rot.
 * Gemessen am 28.08.2026 sank der Kontrast des Wertes darauf von 7,02:1 (weiß
 * auf --rc-red-deep #9e3527) auf 5,0:1, und die Beschriftung „Endet in" kam
 * mit ihrer Deckkraft von 0,85 auf 4,1:1 – UNTER der Grenze von 4,5:1 aus
 * WCAG 1.4.3. Mit dieser Vertiefung ist der Chip rgb(123,41,30), und beide
 * kommen auf 9,6:1. Der Chip verbessert die Lesbarkeit jetzt, statt sie zu
 * verschlechtern.
 */
.rc-promo-bar__timer {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rc-space-2);
  background-color: rgba(0, 0, 0, 0.22);
  border-radius: var(--rc-radius-pill);
  padding: 2px var(--rc-space-3);
  text-decoration: none;
  white-space: nowrap;
}
/*
 * „Endet in" – volle Deckkraft, gemessen 9,6:1 gegen die Vertiefung.
 * Die Rangfolge zwischen Beschriftung und Wert kommt aus dem Schriftschnitt,
 * nicht aus halbdurchsichtiger Schrift. Die Deckkraft von 0,85 war hier der
 * eigentliche Grund für den zu geringen Kontrast (4,1:1).
 */
.rc-promo-bar__label {
  font-weight: var(--rc-fw-regular);
}
.rc-promo-bar__value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rc-space-2);
}
/*
 * Eine Zelle je Einheit: Zahl und Wort gehören zusammen und dürfen nie
 * getrennt umbrechen.
 */
.rc-promo-bar__cell {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.rc-promo-bar__cell[hidden] {
  display: none;
}
/*
 * DAS ZAHLENFELD HAT EINE FESTE BREITE.
 *
 * Gemessen am 28.08.2026 bei 1440 px, alle 100 zweistelligen Werte
 * durchgeschaltet:
 *
 *   ohne tabular-nums, ohne feste Breite   Chip schwankt um 8,32 px,
 *                                          die Aktionsbotschaft wandert 4,16 px
 *   mit tabular-nums, ohne feste Breite    Botschaft wandert 0,00 px,
 *                                          ABER Stellenwechsel 10 → 9: 5,48 px
 *   mit tabular-nums und min-width: 2ch    Stellenwechsel 10 → 9: 0,00 px
 *
 * Die erste Zeile ist das Zittern im Sekundentakt: Weil eine „1" schmaler ist
 * als eine „8", rückt die zentrierte Leiste bei jedem Wechsel. Die zweite ist
 * der Sprung einmal am Tag, wenn die Tageszahl einstellig wird.
 *
 * min-width: 2ch fängt beides ab: Eine Ziffer belegt mit tabular-nums exakt
 * 1ch, zwei Stellen passen also immer, und die einstellige Zahl füllt die
 * Fläche rechtsbündig auf. Erst ab 100 Tagen Restlaufzeit wächst das Feld um
 * eine Stelle – einmal je Aktion, nicht einmal je Sekunde.
 */
.rc-promo-bar__zahl {
  font-variant-numeric: tabular-nums;
  font-weight: var(--rc-fw-bold);
  min-width: 2ch;
  text-align: right;
}
.rc-promo-bar__einheit {
  margin-left: 0.3em;
  min-width: 3.5ch;
  font-weight: var(--rc-fw-regular);
}
/*
 * Uhr vor dem ersten Wert: Platz ist reserviert, sichtbar wird sie erst mit
 * Inhalt. Mit `hidden` (display:none) rückte die Aktionsmeldung beim
 * Einblenden zur Seite – eine Layoutverschiebung im laufenden Betrieb.
 */
.rc-promo-bar__timer.is-pending {
  visibility: hidden;
}
/*
 * ── Aktionsleiste auf schmalen Geräten ───────────────────────────────────
 *
 * Die Leiste klebt im Kopf mit und kostet dort echte Bildschirmhöhe:
 * gemessen am 28.08.2026 bei 1440 px 43 px von 227 px Kopfhöhe. Auf dem
 * Telefon wiegt dasselbe Stück schwerer, weil der Kopf dort ohnehin schon
 * Logozeile, Suchfeld und Symbolreihe trägt. Jede zusätzliche Zeile in dieser
 * Leiste fehlt dem Angebot darunter.
 *
 * WAS AUF SCHMALEN GERÄTEN ENTFÄLLT UND WARUM
 *
 * Die zweite Zeiteinheit. Übrig bleibt die größte: „33 Tage", darunter
 * „22 Std.", zuletzt „46 Min.". Wer auf dem Telefon steht, trifft seine
 * Entscheidung nicht an der zweiten Stelle hinter dem Komma – und die
 * Aktionsbotschaft, die den Rabatt nennt, ist die wichtigere Angabe. Sie wird
 * deshalb NICHT gekürzt: Ein abgeschnittenes „Sommerschlussverkauf – …"
 * verschweigt genau das, worum es geht. Stattdessen zwei enge Zeilen.
 *
 * Die vollständige Restlaufzeit geht dabei nicht verloren – der Endzeitpunkt
 * steht im <time>-Element und auf der Angebotsseite.
 */
@media (max-width: 575px) {
  .rc-promo-bar__inner {
    padding-inline: var(--rc-space-3);
    gap: var(--rc-space-2);
    min-height: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .rc-promo-bar__text {
    min-width: 0;
    text-align: left;
  }
  .rc-promo-bar__timer {
    flex-shrink: 0;
    padding: 1px var(--rc-space-2);
  }
  .rc-promo-bar__cell--zwei {
    display: none;
  }
}
/*
 * Unter 360 px entfällt zusätzlich die Beschriftung „Endet in".
 *
 * Gegenprobe am 28.08.2026 bei 320 px, beide Zustände gemessen:
 *   mit „Endet in"   Chip 157 px, Botschaft 131 px über 4 Zeilen, Leiste 107,8 px
 *   ohne             Chip  84 px, Botschaft über 2 Zeilen,        Leiste  61,9 px
 *
 * 46 Pixel Kopfhöhe für zwei Wörter, die nichts Neues sagen: Der Zeitchip
 * steht unmittelbar neben der Aktionsbotschaft, der Zusammenhang ergibt sich
 * daraus. Für Screenreader steht die vollständige Angabe ohnehin im
 * <time>-Element und wird dort in einem ganzen Satz vorgelesen.
 */
@media (max-width: 359px) {
  .rc-promo-bar__label {
    display: none;
  }
}
/*
 * Header: Utility-Bar (dunkelblau) + ruhiger weißer Hauptheader.
 */
.rc-utility-bar {
  background-color: var(--rc-primary);
  color: #fff;
  font-size: var(--rc-fs-xs);
  padding: 0;
}
.rc-utility-bar .container, .rc-utility-bar .cms-section .boxed, .cms-section .rc-utility-bar .boxed {
  padding-top: var(--rc-space-2);
  padding-bottom: var(--rc-space-2);
}
.rc-utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-5);
}
.rc-utility-bar__usps {
  display: flex;
  align-items: center;
  gap: var(--rc-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
@media (max-width: 1399px) {
  .rc-utility-bar__usps .rc-utility-bar__usp:nth-child(3) {
    display: none;
  }
}
@media (max-width: 1199px) {
  .rc-utility-bar__usps .rc-utility-bar__usp:nth-child(2) {
    display: none;
  }
}
.rc-utility-bar__usp {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  /*
     * Auf der dunklen Leiste zählt nur Helligkeit.
     *
     * Vorher stand hier `--rc-secondary`. Solange das ein helles Blau war,
     * ging das auf Dunkelblau gerade so durch. Nach dem Wechsel auf Terrakotta
     * über Salbei-Petrol waren es 1,56:1 – das Häkchen war schlicht nicht mehr
     * zu sehen. WCAG 2.2 verlangt für Nicht-Text 3:1.
     *
     * Größer außerdem: 14 Pixel war unter der Grenze, ab der ein Häkchen als
     * Häkchen erkennbar ist.
     */
}
.rc-utility-bar__usp .icon {
  color: var(--rc-on-dark);
  width: 17px;
  height: 17px;
}
.rc-utility-bar__usp .icon > svg {
  width: 17px;
  height: 17px;
}
.rc-utility-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  color: #fff;
  font-weight: var(--rc-fw-semibold);
  text-decoration: none;
  /*
     * ── Die Rufnummer bleibt weiß, auch wenn man sie ansteuert ──────────────
     *
     * Hier stand `color: var(--rc-secondary)`. GEMESSEN am 30.08.2026 bei
     * 1440 px auf der Servicezeile:
     *
     *   Ruhe    rgb(255,255,255) auf rgb(47,93,80)   7,49:1
     *   Hover   rgb(180,87,58)  auf rgb(47,93,80)    1,56:1
     *
     * Gefordert sind 4,5:1. Die kostenlose Beratungsnummer ist für diese
     * Zielgruppe die wichtigste Handlungsaufforderung des ganzen Kopfes – und
     * sie fiel genau in dem Moment aus, in dem jemand sie ansteuert. Betroffen
     * waren Maus und Tastatur gleichermaßen, weil beide Zustände in derselben
     * Regel standen.
     *
     * --rc-secondary (Terrakotta #B4573A) ist für helle Flächen gebaut: auf
     * Weiß kommt es auf 4,81:1, auf dem Salbei-Petrol dieser Leiste auf 1,56.
     * Eine hellere Tonstufe gibt es im Farbsystem nicht, und eine wird hier
     * nicht erfunden. Die Hervorhebung übernimmt deshalb die Unterstreichung –
     * sie ändert den Kontrast nicht und ist zugleich das Merkmal, das auch
     * ohne Farbunterscheidung ankommt (WCAG 1.4.1).
     */
  /*
     * Der Fokusring braucht auf dieser Fläche eine eigene Farbe.
     *
     * base/_focus.scss setzt global `outline: 2px solid var(--rc-secondary)`.
     * GEMESSEN: dieser Ring gegen rgb(47,93,80) = 1,56:1. WCAG 2.1 SC 1.4.11
     * verlangt 3:1 für Bedienelement-Anzeigen. Ein weißer Ring erreicht auf
     * derselben Fläche 7,49:1. Geändert wird nur die Farbe – Stärke, Abstand
     * und Radius bleiben die globalen, damit der Ring überall gleich aussieht.
     */
}
.rc-utility-bar__phone:hover, .rc-utility-bar__phone:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-utility-bar__phone:focus-visible {
  outline-color: #fff;
}
.rc-utility-bar__phone .icon {
  width: 14px;
  height: 14px;
}
.rc-utility-bar__phone .icon > svg {
  width: 14px;
  height: 14px;
}
.rc-utility-bar__hours {
  font-weight: 400;
  color: var(--rc-on-dark-muted);
}
@media (max-width: 1199px) {
  .rc-utility-bar__hours {
    display: none;
  }
}
.rc-utility-bar__phone {
  white-space: nowrap;
  flex-shrink: 0;
}
.rc-sticky-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--rc-surface);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow var(--rc-dur-dropdown) var(--rc-ease);
  overflow-anchor: none;
}
.rc-sticky-header.is-sticky .rc-utility-bar, .rc-sticky-header.is-sticky .rc-header, .rc-sticky-header.is-sticky .rc-header__phone, .rc-sticky-header.is-sticky .header-logo-main img, .rc-sticky-header.is-sticky .header-logo-main .header-logo-picture, .rc-sticky-header.is-sticky .rc-header__actions .header-actions-btn, .rc-sticky-header.is-sticky .rc-header__search .header-search-input, .rc-sticky-header.is-sticky .rc-header__search .header-search-btn, .rc-sticky-header.is-sticky .nav-main .main-navigation-menu .nav-link, .rc-sticky-header.is-sticky .nav-main .main-navigation-menu .main-navigation-link {
  transition: max-height var(--rc-dur-dropdown) var(--rc-ease), height var(--rc-dur-dropdown) var(--rc-ease), min-height var(--rc-dur-dropdown) var(--rc-ease), padding var(--rc-dur-dropdown) var(--rc-ease), opacity var(--rc-dur-btn) var(--rc-ease), transform var(--rc-dur-dropdown) var(--rc-ease);
}
.rc-sticky-header.is-sticky .rc-utility-bar {
  max-height: 60px;
  opacity: 1;
  overflow: hidden;
}
.rc-sticky-header.is-sticky.is-scrolled {
  box-shadow: var(--rc-shadow-md);
}
.rc-sticky-header.is-sticky.is-scrolled .rc-utility-bar {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
}
.rc-sticky-header.is-sticky.is-scrolled .rc-header {
  padding-top: var(--rc-space-1);
  padding-bottom: var(--rc-space-2);
}
.rc-sticky-header.is-sticky.is-scrolled .header-logo-main img, .rc-sticky-header.is-sticky.is-scrolled .header-logo-main .header-logo-picture {
  height: 40px;
  max-height: 40px;
}
.rc-sticky-header.is-sticky.is-scrolled .nav-main .main-navigation-menu .nav-link, .rc-sticky-header.is-sticky.is-scrolled .nav-main .main-navigation-menu .main-navigation-link {
  padding-top: var(--rc-space-2) !important;
  padding-bottom: var(--rc-space-2) !important;
}
.rc-sticky-header.is-sticky.is-scrolled .rc-header__phone {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.rc-sticky-header.is-sticky.is-scrolled .rc-header__actions .header-actions-btn {
  height: 44px;
  min-height: 44px;
}
.rc-sticky-header.is-sticky.is-scrolled .rc-header__search .header-search-input, .rc-sticky-header.is-sticky.is-scrolled .rc-header__search .header-search-btn {
  height: 38px;
  min-height: 38px;
}
.rc-sticky-header.is-sticky.is-measuring, .rc-sticky-header.is-sticky.is-measuring * {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .rc-sticky-header.is-sticky .rc-utility-bar, .rc-sticky-header.is-sticky .rc-header, .rc-sticky-header.is-sticky .rc-header__phone, .rc-sticky-header.is-sticky .header-logo-main img, .rc-sticky-header.is-sticky .header-logo-main .header-logo-picture, .rc-sticky-header.is-sticky .rc-header__actions .header-actions-btn, .rc-sticky-header.is-sticky .rc-header__search .header-search-input, .rc-sticky-header.is-sticky .rc-header__search .header-search-btn, .rc-sticky-header.is-sticky .nav-main .main-navigation-menu .nav-link, .rc-sticky-header.is-sticky .nav-main .main-navigation-menu .main-navigation-link {
    transition: none;
  }
  .rc-sticky-header.is-sticky, .rc-sticky-header.is-sticky + .rc-sticky-header__spacer {
    transition: none;
  }
}
header.header-main, .header-main {
  background-color: var(--rc-surface);
  border-bottom: 0;
}
/*
 * ── Warum die vier Aktionen unter 992 px eine eigene Zeile haben ───────────
 *
 * GEMESSEN am 26.08.2026 auf der Startseite, Zustand vor dieser Änderung:
 *
 *   Breite   Beratung      Merkzettel    Konto         Warenkorb     Abstände
 *    320     156–194       194–232       232–270       270–308       0 / 0 / 0
 *    390     226–264       264–302       302–340       340–378       0 / 0 / 0
 *    768     562–606       610–654       658–702       706–748       4 / 4 / 4
 *   1440        –          1170–1214     1222–1266     1274–1400     8 / 8
 *
 * Also 38 × 44 px statt 44 × 44 und null bis acht Pixel Luft statt zwölf. Auf
 * einem Telefon liegen damit vier verschiedene Ziele in einem einzigen
 * Daumenbreit nebeneinander. Ein Fehlgriff öffnet statt des Warenkorbs die
 * bildschirmfüllende Kontoschicht (gemessen 390 × 844: 390 × 844 px groß, nur
 * über „Menü schließen" wieder wegzubekommen).
 *
 * In der ersten Zeile ist der Platz dafür nicht da, und zwar nachweislich:
 * Vier Ziele zu 44 px mit drei Lücken zu 12 px sind 212 px. Dazu der Menüknopf
 * (44) und zweimal 12 px Abstand – zusammen 280 px. Innerhalb des Containers
 * stehen bei 320 px Fensterbreite 296 px zur Verfügung, bei 390 px sind es
 * 366 px. Für den Schriftzug blieben 16 bzw. 86 Pixel. Er ist bei 390 px
 * gemessen 166 px breit.
 *
 * Deshalb rutschen die Aktionen unter 992 px in eine dritte Rasterzeile über
 * die volle Breite. Dort sind vier gleich breite Knöpfe zu je 65 px (bei
 * 320 px) bis 173 px (bei 768 px) möglich – mit 12 px Luft dazwischen und
 * ohne den Schriftzug zu quetschen.
 */
.rc-header {
  display: grid;
  align-items: center;
  gap: var(--rc-space-3);
  padding: var(--rc-space-3) 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "burger logo" "search search" "actions actions";
}
@media (min-width: 992px) {
  .rc-header {
    grid-template-columns: auto minmax(320px, 1fr) auto;
    grid-template-areas: "logo search actions";
    gap: var(--rc-space-6);
    padding: var(--rc-space-3) 0;
  }
}
.rc-header__burger {
  grid-area: burger;
}
@media (min-width: 992px) {
  .rc-header__burger {
    display: none;
  }
}
.rc-header__logo {
  grid-area: logo;
  justify-self: center;
  min-width: 0;
}
.rc-header__logo img, .rc-header__logo .header-logo-picture {
  max-width: 44vw;
  object-fit: contain;
}
@media (min-width: 992px) {
  .rc-header__logo {
    justify-self: start;
  }
  .rc-header__logo img, .rc-header__logo .header-logo-picture {
    max-width: none;
  }
}
.rc-header__search {
  grid-area: search;
  min-width: 0;
  justify-self: center;
  width: 100%;
}
.rc-header__search .collapse {
  display: block;
}
.rc-header__search .header-search {
  margin-inline: auto !important;
  max-width: 520px;
}
.rc-header__search .input-group {
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-bg);
  transition: border-color var(--rc-dur-btn) var(--rc-ease), background-color var(--rc-dur-btn) var(--rc-ease);
  /*
         * KEIN overflow: hidden.
         *
         * Es hielt Feld und Lupe sauber in den abgerundeten Ecken – schnitt
         * aber zugleich die Suchvorschläge ab, die Shopware als absolut
         * positioniertes Feld innerhalb dieser Gruppe einhängt. Das Flyout war
         * im Dokument vorhanden, sichtbar und 285 Pixel hoch, nur eben
         * unsichtbar geclippt.
         *
         * Die Ecken übernehmen jetzt die inneren Elemente selbst.
         */
}
.rc-header__search .input-group > .form-control:first-child {
  border-radius: var(--rc-radius-control) 0 0 var(--rc-radius-control);
}
.rc-header__search .input-group > .btn:last-child {
  border-radius: 0 var(--rc-radius-control) var(--rc-radius-control) 0;
}
.rc-header__search .input-group:focus-within {
  border-color: var(--rc-secondary);
  background-color: var(--rc-surface);
  box-shadow: 0 0 0 2px var(--rc-secondary-soft);
}
.rc-header__search .header-search-input {
  min-height: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: var(--rc-fs-sm);
  padding-left: var(--rc-space-4);
}
.rc-header__search .header-search-input::placeholder {
  color: var(--rc-muted);
}
.rc-header__search .header-search-input:focus {
  background-color: transparent;
  box-shadow: none;
}
.rc-header__search .header-search-btn {
  min-height: 42px;
  height: 42px;
  width: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  color: var(--rc-muted);
}
.rc-header__search .header-search-btn .icon {
  color: currentColor;
}
.rc-header__search .header-search-btn .icon {
  width: 18px;
  height: 18px;
}
.rc-header__search .header-search-btn .icon > svg {
  width: 18px;
  height: 18px;
}
.rc-header__search .header-search-btn:hover, .rc-header__search .header-search-btn:focus-visible {
  background-color: transparent;
  color: var(--rc-primary);
}
.rc-header__search .header-close-btn, .rc-header__search .js-search-close-btn {
  display: none !important;
}
@media (max-width: 991px) {
  .rc-header__search .header-search {
    max-width: none;
  }
}
.rc-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  flex-shrink: 0;
  /*
     * Hier stand `width: 44px`. Seit die Knöpfe ab 992 px ihr Wort unter dem
     * Symbol tragen (siehe unten), ist eine feste Breite von 44 px zu schmal:
     * „Merkzettel" braucht gemessen 88 px, „Ihr Konto" 74 px. Eine feste
     * Breite hätte die Wörter abgeschnitten.
     *
     * `min-width` hält weiter die geforderte Untergrenze von 44 px ein, lässt
     * den Knopf aber mitwachsen, wenn ein Wort darin steht.
     */
  /*
     * Kompakte Beratungsnummer nur dort, wo die Nummer sonst nirgends steht.
     *
     * Hier stand `min-width: 1200px`. Das war um 208 Pixel zu spät: Die
     * Servicezeile mit der ausgeschriebenen Rufnummer trägt `d-none d-lg-block`
     * und ist damit ab 992 px sichtbar – GEMESSEN am 30.08.2026 bei 992 px:
     * .rc-utility-bar display block, 992 × 44,9 px, Rufnummer als tel:-Link
     * darin. Zwischen 992 und 1199 px stand dieselbe Nummer also zweimal im
     * Kopf: einmal ausgeschrieben in der Leiste, einmal als Headset-Symbol
     * ohne Wort darunter.
     *
     * Der gewonnene Platz ist nicht nebensächlich: 44 px Knopf plus 12 px
     * Abstand sind genau der Raum, in dem ab 992 px die Beschriftungen
     * „Merkzettel", „Ihr Konto" und „Warenkorb" stehen (siehe unten).
     *
     * Unter 992 px bleibt der Knopf: Dort ist die Servicezeile ausgeblendet
     * und er ist der einzige Weg zur Beratung, der ohne Scrollen erreichbar
     * ist.
     */
  /*
     * ── Eigene Zeile unter 992 px ───────────────────────────────────────────
     *
     * Die vier Knöpfe teilen sich die volle Zeilenbreite zu gleichen Teilen.
     * `flex: 1 1 0` statt `space-between` mit Inhaltsbreite: Bei
     * space-between wären die Ziele unterschiedlich breit (das Herz schmaler
     * als die Tasche mit Zähler) und die Lücken dazwischen ungleich. Gleich
     * breite Kacheln mit 12 px Fuge sind für die Zielgruppe das ruhigere Bild
     * und geben jedem Ziel dieselbe Chance.
     *
     * GEMESSEN je Knopf bei 12 px Fuge: 65 px (320), 82 px (390), 173 px (768)
     * – überall über den geforderten 44 px.
     */
}
.rc-header__actions > .header-wishlist, .rc-header__actions > .account-menu, .rc-header__actions > .header-cart {
  display: flex;
  align-items: center;
}
.rc-header__actions .header-actions-btn {
  height: 44px;
  min-height: var(--rc-control-md);
  aspect-ratio: auto;
  padding: 0 var(--rc-space-2);
  align-items: center;
  gap: var(--rc-space-2);
  border-radius: var(--rc-radius-control);
}
.rc-header__actions .header-actions-btn .icon {
  width: 22px;
  height: 22px;
}
.rc-header__actions .header-actions-btn .icon > svg {
  width: 22px;
  height: 22px;
}
.rc-header__actions .header-wishlist-btn, .rc-header__actions .account-menu-btn, .rc-header__actions .rc-header__phone-compact {
  justify-content: center;
  padding: 0;
}
@media (min-width: 992px) {
  .rc-header__actions .header-wishlist-btn, .rc-header__actions .account-menu-btn, .rc-header__actions .rc-header__phone-compact {
    min-width: 44px;
  }
}
.rc-header__actions .rc-header__phone-compact {
  color: var(--rc-primary);
}
@media (min-width: 992px) {
  .rc-header__actions .rc-header__phone-compact {
    display: none;
  }
}
@media (max-width: 991px) {
  .rc-header__actions .header-cart-total {
    display: none;
  }
  .rc-header__actions > .header-wishlist, .rc-header__actions > .account-menu, .rc-header__actions > .header-cart, .rc-header__actions > .rc-header__phone-compact {
    flex: 1 1 0;
    min-width: 0;
  }
  .rc-header__actions > .account-menu .dropdown {
    width: 100%;
  }
  .rc-header__actions .header-actions-btn {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
  }
}
/*
 * ── Beschriftung der Aktionssymbole ─────────────────────────────────────────
 *
 * Ein Headset-Umriss, ein Herz, ein Kopf-Umriss und eine Tasche sind für die
 * Zielgruppe keine Beschriftung. Die Wörter stehen deshalb unter dem Symbol –
 * überall dort, wo sie in voller Größe hinpassen.
 *
 * GEMESSEN in der Theme-Schrift (Inter, halbfett, 17 px – die Untergrenze aus
 * abstracts/_tokens.scss):
 *   Beratung 75,1 px · Merkzettel 88,0 px · Ihr Konto 74,4 px · Warenkorb 90,3 px
 *
 * ── Warum die Wörter vorher nur zwischen 576 und 991 px standen ─────────────
 *
 * Hier stand `@media (min-width: 576px) and (max-width: 991px)`. GEMESSEN am
 * 30.08.2026 an acht Breiten: Die Beschriftungen waren bei 360, 390, 992,
 * 1024, 1280, 1440 und 1920 px auf `display: none`; übrig blieben 22 × 22 px
 * große Umrisssymbole in 44 × 48 px großen Knöpfen. Ausgerechnet dort, wo der
 * Platz da ist, standen also nackte Zeichen: Bei 1440 px belegten Merkzettel,
 * Konto und Warenkorb zusammen 238 px von 1440 px Fensterbreite.
 *
 * NACHGERECHNET für die obere Grenze, Rasterspalten des Kopfes
 * (Logo 200 | Suche minmax(320, 1fr) | Aktionen, 32 px Fugen):
 *
 *   Breite  Inhalt  Aktionen mit Wörtern  bleibt für die Suche  Mindestmaß
 *    992     952           344,2                 343,8            320  ✓
 *   1024     984           344,2                 375,8            320  ✓
 *   1200    1160           556,5                 339,5            320  ✓
 *   1280    1240           556,5                 419,5            320  ✓
 *   1440    1360           556,5                 520 (gedeckelt)  320  ✓
 *
 * Ab 1200 px kommt die ausgeschriebene Beratungsnummer (188,3 px) hinzu, ab
 * 992 px entfällt dafür der doppelte Headset-Knopf (siehe oben). Die Rechnung
 * geht auf jeder Breite auf – die Wörter kosten nichts, was gebraucht wird.
 *
 * ── Warum die Wörter unter 480 px NICHT stehen ──────────────────────────────
 *
 * Verfügbare Breite je Knopf bei vier Knöpfen und 12 px Fuge:
 *   320 px → 65   360 px → 75   390 px → 82   414 px → 84
 *   480 px → 101  576 px → 125  768 px → 173
 *
 * Das längste Wort braucht 90,3 px. Unter 480 px ist es nicht unterzubringen –
 * auch nicht kleiner: Bei 13 px bräuchte „Warenkorb" noch 70 px, verfügbar
 * sind bei 320 px aber nur 65. Vier beschriftete Aktionen in einer Zeile sind
 * auf einem 320-px-Gerät keine Frage der Schriftgröße, sondern der Geometrie.
 *
 * Die Grenze liegt deshalb bei 480 px und nicht mehr bei 576 px: 480 ist die
 * Breite, ab der die Rechnung aufgeht (101 > 90,3): 25,7 px Reserve. Der
 * Rasterpunkt 576 verschenkte die Breiten dazwischen ohne Grund.
 *
 * Unter 480 px bleiben die Symbole unbeschriftet – der zugängliche Name steht
 * weiterhin in aria-label und title, Vorlesesoftware und langes Antippen
 * kennen ihn also. Ob es dort stattdessen zwei Zeilen zu je zwei beschrifteten
 * Knöpfen sein sollen (kostet gemessen 64 px zusätzliche Kopfhöhe),
 * entscheidet der Betreiber.
 */
.rc-header__action-label {
  display: none;
}
@media (min-width: 480px) {
  /*
     * Auch der kompakte Kopf behält Platz für das Wort.
     *
     * Weiter oben fährt `.is-scrolled` die Aktionsknöpfe auf 44 px zurück.
     * GEMESSEN am 30.08.2026 bei 768 px im gescrollten Zustand: Knöpfe 44 px
     * hoch, Inhalt darin 22 (Symbolrahmen 25) + 2 Fuge + 18,7 Wort + 8
     * Innenmaß = 45,7 px – das Wort stand 1,7 px über der Knopfkante. Mit den
     * Beschriftungen ab 480 px würde dieser Rest auf jeder Breite sichtbar.
     *
     * 52 px deckt den gemessenen Inhalt (45,7 px) mit Reserve ab und bleibt
     * vier Pixel unter der vollen Höhe – der kompakte Eindruck bleibt.
     * Vier Klassen im Selektor, weil die Regel oben ebenso viele hat.
     */
  .rc-header__actions {
    /*
         * Symbol oben, Wort darunter – nebeneinander bräuchte das längste
         * Paar 22 + 8 + 90 = 120 px je Knopf.
         *
         * Im Warenkorbknopf steht neben dem Symbol die Summe; damit sie in
         * derselben Zeile bleibt, fasst die Vorlage beide in
         * `.rc-header__action-top` zusammen (layout/header/header.html.twig).
         * Ohne diese Klammer stünden Symbol, Summe und Wort als drei Zeilen
         * untereinander.
         *
         * NICHT über `flex-wrap` mit `flex-basis: 100%` an der Beschriftung:
         * GEMESSEN am 30.08.2026 mit dieser Fassung wuchsen die Knöpfe auf
         * 120 / 106 / 224 px statt 88 / 74 / 124 px, und bei 1200 und 1280 px
         * brach die Aktionszeile in zwei Zeilen um (Kopfhöhe 117,5 bzw.
         * 96,3 statt 80 px). Ursache: Ein Prozentmaß für die Flexbasis gegen
         * einen Kasten ohne feste Breite ist eine Rundabhängigkeit; der
         * Browser löst sie beim Ermitteln der Inhaltsbreite so auf, als
         * stünden alle Kinder nebeneinander.
         */
  }
  .rc-header__actions .header-actions-btn {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    /*
             * Feste Höhe, keine Inhaltshöhe.
             *
             * GEMESSEN bei 768 px ohne diese Zeile: Beratung und Konto waren
             * 53,00 px hoch, Merkzettel und Warenkorb 55,69 px. Der Kern
             * verpackt deren Symbol in einen eigenen Rahmen (22 × 25 statt
             * 22 × 22) und hängt einen Vorlesetext von 1 px darunter – in
             * einer Spalte zählt beides mit. Vier Kacheln nebeneinander, zwei
             * davon knapp drei Pixel höher: Das sieht man.
             *
             * 56 px deckt den höchsten gemessenen Inhalt (55,69) ab.
             */
    height: 56px;
    min-height: 56px;
    padding-block: var(--rc-space-1);
  }
  .rc-header__actions .rc-header__action-label {
    display: block;
    font-size: var(--rc-fs-xs);
    font-weight: var(--rc-fw-semibold);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }
  .rc-header__actions .rc-header__action-top {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
  }
  .rc-sticky-header.is-sticky.is-scrolled .rc-header__actions .header-actions-btn {
    height: 52px;
    min-height: 52px;
  }
}
.rc-header__phone {
  align-items: center;
  gap: var(--rc-space-2);
  color: var(--rc-primary);
  text-decoration: none;
  margin-right: var(--rc-space-3);
}
.rc-header__phone .icon {
  width: 26px;
  height: 26px;
}
.rc-header__phone .icon > svg {
  width: 26px;
  height: 26px;
}
.rc-header__phone span {
  display: grid;
  line-height: 1.25;
}
.rc-header__phone strong {
  font-size: var(--rc-fs-sm);
}
.rc-header__phone small, .rc-header__phone .small {
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
}
.rc-header__phone:hover {
  color: var(--rc-primary-dark);
}
.header-search-col .header-search-input, .header-search-input {
  min-height: var(--rc-control-md);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
}
.header-search-col .header-search-input:focus, .header-search-input:focus {
  border-color: var(--rc-secondary);
  box-shadow: 0 0 0 2px var(--rc-secondary-soft);
}
.header-search-btn {
  color: var(--rc-primary);
}
.header-actions-btn {
  color: var(--rc-primary);
  min-width: 44px;
  min-height: var(--rc-control-md);
}
.header-actions-btn:hover, .header-actions-btn:focus-visible {
  color: var(--rc-primary-dark);
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-control);
}
.header-cart-badge {
  background-color: var(--rc-red-deep);
}
/*
 * Platzhalter hinter dem klebenden Kopf.
 *
 * Er wächst um genau den Betrag, den der Kopf beim Zusammenfahren verliert.
 * Die Summe aus beidem bleibt konstant – und damit auch die Dokumenthöhe.
 * Ohne ihn korrigiert der Browser beim Umschalten die Scrollposition, und der
 * Kopf springt zwischen groß und kompakt hin und her.
 *
 * Der Betrag steht in --rc-sticky-delta; das Skript misst ihn einmal aus
 * beiden Zuständen, statt ihn hier fest einzutragen: Die Kopfhöhe hängt von
 * Fensterbreite, Schriftgröße und Länge der Navigation ab.
 */
.rc-sticky-header__spacer {
  height: 0;
  overflow-anchor: none;
  transition: height var(--rc-dur-dropdown) var(--rc-ease);
}
.rc-sticky-header.is-scrolled + .rc-sticky-header__spacer {
  height: var(--rc-sticky-delta, 0px);
}
/*
 * Platz für den Tastaturfokus unter den oben klebenden Leisten.
 *
 * WCAG 2.4.11 „Focus Not Obscured (Minimum)": Wer mit der Tabulatortaste
 * weiterspringt, bekommt vom Browser das nächste Bedienelement ins Bild
 * gescrollt – und zwar bis knapp unter den oberen Fensterrand. Über dem
 * Fensterrand liegen hier aber zwei Dinge: dieser Kopf und, auf den
 * Kategorieseiten, die klebende Filterleiste (.rc-filter-bar, definiert in
 * layout/_listing.scss). Das fokussierte Element landet darunter.
 *
 * VORHER gemessen (390 × 844, /Elektromobile/, Tabulatorlauf ab scrollY 1400):
 *   fokussierter Merkzettel-Knopf einer Produktkachel – 0 % seiner Fläche
 *   waren mit elementFromPoint zu erreichen, oberstes Element auf allen 25
 *   Rasterpunkten: div.rc-filter-bar.
 *
 * `scroll-padding-top` am scrollenden Element ist der dafür vorgesehene Weg:
 * Der Browser hält beim Hereinscrollen genau diesen Streifen frei. Die Höhe
 * steht nicht fest – der Kopf ist je nach Breite 70 bis 189 px hoch und die
 * Filterleiste 0 bis 201 px –, deshalb misst rc-umfeld.js sie und legt sie in
 * --rc-klebehoehe-oben ab (Kopfhöhe + Leistenhöhe + 12 px Luft).
 *
 * Gemessen wird die Höhe im geklebten Zustand, nicht der aktuelle Zustand: Der
 * Sprung des Fokus findet statt, BEVOR der neue Scrollstand da ist.
 *
 * Der Gegenwert für den unteren Rand steht in components/_trust.scss.
 *
 * ── ACHTUNG, ZWEITE WIRKUNG DIESER ZEILE ────────────────────────────────────
 *
 * Der freigehaltene Streifen liegt ÜBER dem klebenden Kopf – er überdeckt
 * dessen eigene Bedienelemente. Ruft irgendein Skript an einem davon
 * `focus()` auf, hält Chrome es für verdeckt und zentriert es im
 * verbleibenden Feld: Die Seite springt nach oben.
 *
 * GEMESSEN am 27.08.2026 (1440 × 900), Ursache des Betreiberbefunds „wenn man
 * auf die navigation hovert scrollt man automatisch nach oben ein stueck":
 *   Startseite,  scroll-padding-top 160 px, Menüpunkt bei y 101–148
 *     Überfahren eines Menüpunkts mit Flyout: scrollY 900 → 494  (−406 px)
 *   /Rollatoren/, scroll-padding-top 345 px (Kopf + Filterleiste)
 *     dasselbe Überfahren:                    scrollY 900 → 402  (−498 px)
 *
 * Gegengehalten wird das in main.js (rcInitKopfFokus): Alles im klebenden
 * Kopf bekommt ein `focus()`, das nicht scrollt. `scroll-margin` an diesen
 * Elementen reicht NICHT – gemessen blieben damit 246 px Sprung übrig, weil
 * Chrome anhand des unverschobenen Rechtecks entscheidet, ob zentriert wird.
 *
 * Wer diesen Wert oder --rc-klebehoehe-oben ändert: Der Sprung wächst mit
 * ihm mit. Die Gegenmaßnahme in main.js muss bestehen bleiben.
 */
html {
  scroll-padding-top: var(--rc-klebehoehe-oben, 0px);
}
@media (prefers-reduced-motion: reduce) {
  .rc-sticky-header__spacer {
    transition: none;
  }
}
/*
 * Erreichbarkeitspunkt an der Beratungsnummer.
 *
 * Grün heißt: Es geht gerade jemand ans Telefon. Grau heißt: gerade nicht.
 * Die Farbe allein trägt die Aussage nicht – daneben steht sie im Klartext,
 * und der Punkt führt zusätzlich einen Titel. Wer Farben nicht unterscheidet,
 * verliert dadurch nichts.
 *
 * Das Skript setzt den Punkt erst im Browser ein: Eine zwischengespeicherte
 * Seite wäre nachts genauso grün wie mittags.
 */
.rc-availability-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--rc-space-2);
  border-radius: 50%;
  background-color: var(--rc-disabled);
  vertical-align: 1px;
}
.rc-availability-dot.is-open {
  background-color: var(--rc-success);
  box-shadow: 0 0 0 3px rgba(31, 122, 69, 0.14);
}
.rc-availability-dot.is-closed {
  background-color: var(--rc-muted);
}
.rc-header__phone-hint {
  display: flex;
  align-items: center;
}
/*
 * Zähler an Merkzettel und Warenkorb.
 *
 * Der Kern setzt ein Bootstrap-Abzeichen in Schriftgröße 15 mit 8 Pixeln
 * Innenabstand – 26 Pixel groß auf einem 22 Pixel großen Symbol. Die Zahl lag
 * damit mitten auf dem Herz statt daneben, und das Symbol war nicht mehr zu
 * erkennen.
 *
 * Stattdessen eine kleine Marke in der oberen rechten Ecke, mit einem Ring in
 * der Hintergrundfarbe: Der trennt die Zahl sauber vom Symbol darunter, auch
 * wenn beide sich überlappen.
 */
.header-actions-btn .badge, .header-wishlist .header-wishlist-badge, .header-cart .header-cart-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  left: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px;
  min-width: 0;
  height: 18px;
  padding: 0;
  border: 2px solid var(--rc-surface);
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-primary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--rc-fw-bold);
  line-height: 1;
  z-index: 1;
}
/*
 * Leere Marke ausblenden.
 *
 * Der Kern schreibt den Zähler mit `this.el.innerHTML = counter || ''` in die
 * Marke (wishlist-widget.plugin.js). Bei leerem Merkzettel bleibt also ein
 * inhaltsloses `<span>` stehen – mit den festen 18×18 Pixeln und der
 * Hintergrundfarbe von oben wurde daraus ein grüner Punkt neben dem Herz, der
 * eine Zahl ankündigt, die es nicht gibt.
 *
 * `:empty` greift genau dann, wenn weder Text noch Kindknoten vorhanden sind –
 * also im Ausgangszustand und nach dem Entfernen des letzten Artikels. Sobald
 * der Kern eine Zahl einträgt, ist die Bedingung verletzt und die Marke
 * erscheint wieder. Kein zusätzliches JavaScript nötig.
 */
.header-actions-btn .badge:empty, .header-wishlist .header-wishlist-badge:empty, .header-cart .header-cart-badge:empty {
  display: none;
}
.rc-sticky-header.is-scrolled .header-actions-btn .badge {
  top: 0;
  right: 0;
}
/*
 * Warenkorb-Marke an die Tasche, nicht auf den Preis.
 *
 * Der Betreiber: „mache die 1 vielleicht zur tasche in der navigation und
 * nicht zum €-zeichen."
 *
 * Ursache: Ab 992 px steht neben dem Symbol die Warenkorbsumme, und der Knopf
 * ist damit nicht mehr quadratisch. Die Marke hing an seiner rechten oberen
 * Ecke – also am Ende des Preises.
 *
 * Gemessen auf der Startseite bei 1440 px:
 *   Knopf          x = 1274, Breite 126
 *   Taschensymbol  x = 1283, Breite 22   → rechte Kante 1305
 *   Summe          x = 1321, Breite  70  → rechte Kante 1391
 *   Marke bei `right: 1px` ≈ x 1381 – mitten auf dem €-Zeichen.
 *
 * Statt rechts wird die Marke jetzt von links gesetzt. Beide Werte stammen aus
 * dieser Datei und können nicht auseinanderlaufen: 9 px Innenabstand des
 * Knopfes plus 22 px Symbolbreite (rc-icon-size weiter oben) ergeben die
 * rechte Symbolkante; 10 px Überlappung setzen die Marke auf deren Ecke.
 *
 * Nur ab 992 px: Darunter blendet .header-cart-total aus, der Knopf ist wieder
 * quadratisch, und die Ecke des Knopfes IST die Ecke des Symbols.
 */
@media (min-width: 992px) {
  .header-cart .header-cart-badge, .rc-sticky-header.is-scrolled .header-cart .header-cart-badge {
    right: auto;
    left: 21px;
  }
  .header-cart .header-cart-badge {
    top: 5px;
  }
  .rc-sticky-header.is-scrolled .header-cart .header-cart-badge {
    top: 0;
  }
}
/*
 * ── Kopfbereich auf schmalen Geräten ─────────────────────────────────────
 *
 * Zwei gemessene Probleme, beide nur unter 768 Pixel:
 *
 * 1. Der Schriftzug lag über dem Headset-Symbol.
 *    Gemessen bei 375 Pixel: Rasterspalten 70 / 55 / 186. Die mittlere Spalte
 *    war 55 Pixel breit, das Logo 140 – es lief 31 Pixel in die Symbolspalte
 *    hinein. Ursache ist die feste Breite der Symbolspalte: `1fr` in der Mitte
 *    kann nur verteilen, was übrig bleibt.
 *
 * 2. Der mitlaufende Kopf war 186 Pixel hoch – 23 % eines 812 Pixel hohen
 *    Bildschirms, dauerhaft. Aktionsleiste (50) + Logozeile (92) + Suchzeile
 *    (44). Wer scrollt, braucht davon nur die Logozeile.
 *
 * Die Lösung für 1 ist `minmax(0, 1fr)` plus `max-width: 100%` am Bild: Damit
 * kann die Spalte unter ihre Inhaltsbreite schrumpfen und das Logo folgt.
 */
@media (max-width: 767px) {
  /*
     * Die dritte Spalte von früher ist weg: In ihr standen die Aktionen, und
     * die haben jetzt eine eigene Zeile. `column-gap` kommt aus der Grundregel
     * und beträgt 12 px – gemessen lagen zwischen Menüknopf (x 12–52) und
     * Schriftzug (x 56–222) vorher 4 px, und beide sind Klickziele.
     */
  /*
     * Trefferflächen 44 × 44 – die eigene Untergrenze.
     *
     * Gemessen lagen die vier Aktionsknöpfe bei 38 × 44 und der Menüknopf bei
     * 40 × 48. Die Höhe stimmte, die Breite nicht. Bei einer Zielgruppe, die
     * ungenau trifft, sind vier Pixel kein Rundungsfehler.
     *
     * Der Platz dafür kommt jetzt aus der eigenen Aktionszeile und nicht mehr
     * aus dem Abstand zwischen den Symbolen.
     */
  /*
     * Zwei Klassen im Selektor, weil die Grundregel in _cms-layout.scss steht
     * und diese Datei früher kompiliert wird. Mit gleicher Spezifität gewönne
     * dort `height: 40px` – und genau die 40 Pixel machen das Logo 140 Pixel
     * breit und schieben es über die Symbole.
     */
  /*
     * Hier stand `gap: 0` mit festen 44 px Knopfbreite – der Versuch, vier
     * Ziele in die erste Zeile zu quetschen. Gemessen kam dabei 38 × 44 mit
     * null Pixeln Abstand heraus, weil die Regel für sehr schmale Geräte
     * weiter unten die Breite wieder zurücknahm. Beides ist ersatzlos weg:
     * Breite und Abstand kommen jetzt aus der Aktionszeile weiter oben.
     */
  /*
     * Beim Scrollen bleibt die Logozeile, alles andere fährt ein.
     *
     * Die Aktionsleiste und die Suchzeile sind auf dem Telefon der teuerste
     * Teil des Kopfes. Beide sind einen Wisch entfernt wieder da – man muss
     * nur nach oben.
     */
  .rc-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .rc-header__burger {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }
  .rc-header .header-logo-main {
    min-width: 0;
    width: auto;
    max-width: 100%;
    /*
         * ── Warum das Zeichen am Telefon 38 statt 26 Pixel hoch ist ─────────
         *
         * Hier standen 30 px, unter 400 px sogar 26. GEMESSEN am 30.08.2026:
         *   360 px  Bild 83,8 × 26,0   Link 280 × 26,0   Innenmaß 0
         *   576 px  Bild 96,7 × 30,0   Link 480 × 30,0
         *   768 px  Bild 167,6 × 52,0  Link 200 × 52,0
         *
         * Am Telefon war das Zeichen also halb so groß wie überall sonst, und
         * die Klickfläche 26 px hoch – unter den 44 px, die jedes andere
         * Bedienelement im Kopf einhält (Menüknopf 44 × 48, Aktionsknöpfe
         * 75 × 44, selbst gemessen). Für die Zielgruppe ist das Logo der
         * häufigste Ausweg aus einer verlaufenen Navigation.
         *
         * Der Platz dafür kostet nichts: In derselben Rasterzeile steht der
         * 48 px hohe Menüknopf und bestimmt die Zeilenhöhe. Alles bis 48 px
         * ist geschenkt. 38 px Bildhöhe ergeben bei einem Seitenverhältnis von
         * 2095 : 650 eine Breite von 122 px – bei 320 px Fensterbreite stehen
         * der Logospalte 240 px zur Verfügung und `max-width: 44vw` erlaubt
         * dort 141 px. Beides passt ohne Deckelung.
         *
         * Die frühere Sonderregel unter 400 px (26 px) ist damit hinfällig und
         * weiter unten entfernt: Sie war eine Breitenbegrenzung über die
         * Höhe – und die Breite ist längst über `max-width` gesichert.
         */
  }
  .rc-header .header-logo-main img, .rc-header .header-logo-main .header-logo-picture {
    height: auto;
    max-height: 38px;
    max-width: 100%;
    object-fit: contain;
  }
  .rc-sticky-header.is-scrolled {
    /*
         * Die eingefahrene Suchzeile ist null Pixel hoch – ihre beiden
         * Rasterfugen zählen aber weiter. Gemessen bei 390 px: 128 px
         * Kopfhöhe im kompakten Zustand, davon 24 px für eine Zeile, die
         * niemand sieht.
         *
         * Deshalb hier keine Zeilenfuge, sondern ein Abstand am einzigen
         * Nachbarn, der ihn braucht: zwischen dem Schriftzug (ein Link) und
         * den vier Aktionsknöpfen liegen weiterhin 12 px – die eigene
         * Untergrenze zwischen zwei Klickzielen.
         *
         * NACHHER gemessen: 116 px statt 128 px.
         */
  }
  .rc-sticky-header.is-scrolled .rc-promo-bar, .rc-sticky-header.is-scrolled .rc-header__search {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
  }
  .rc-sticky-header.is-scrolled .rc-header {
    row-gap: 0;
  }
  .rc-sticky-header.is-scrolled .rc-header__actions {
    margin-top: var(--rc-space-3);
  }
  .rc-promo-bar, .rc-header__search {
    transition: max-height var(--rc-dur-dropdown) var(--rc-ease), opacity var(--rc-dur-dropdown) var(--rc-ease);
    max-height: 200px;
  }
}
/*
 * Sehr schmale Geräte (iPhone SE und Ähnliches).
 *
 * Hier stand bisher der Kompromiss, mit dem der Kopf sich selbst im Weg stand:
 * Menüknopf auf 40 px, die vier Symbole auf 38 px, Abstand auf 4 px – und
 * trotzdem blieben für den Schriftzug nur 52 Pixel. Gemessen kamen dabei vier
 * Ziele zu 38 × 44 px mit null Pixeln Luft heraus.
 *
 * Seit die Aktionen eine eigene Zeile haben, ist der Kompromiss unnötig: In
 * der ersten Zeile stehen nur noch Menüknopf und Schriftzug. Bei 320 Pixel
 * sind das 44 + 12 + 240 Pixel – der Schriftzug hat mehr Platz als vorher,
 * und die Trefferflächen halten ihre 44 × 44.
 */
@media (max-width: 400px) {
  /*
     * Hier stand `max-height: 26px` für das Logo. Ersatzlos entfernt: Die
     * Zeile begrenzte in Wahrheit die Breite und tat das über die Höhe. Die
     * Breite ist über `max-width: 100%` an der Hülle und `max-width: 44vw` an
     * der Rasterspalte gesichert; bei 320 px sind das 141 px, das Zeichen ist
     * mit 38 px Höhe 122 px breit. Die 26 px hatten dagegen eine sichtbare
     * Nebenwirkung: eine 26 px hohe Klickfläche neben lauter 44- und
     * 48-px-Zielen.
     */
  .rc-header {
    padding-inline: 0;
  }
  .header-main .container, .header-main .cms-section .boxed, .cms-section .header-main .boxed, .rc-sticky-header .container, .rc-sticky-header .cms-section .boxed, .cms-section .rc-sticky-header .boxed {
    padding-inline: var(--rc-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rc-promo-bar, .rc-header__search {
    transition: none;
  }
}
/*
 * Die Logohülle trägt eine feste Breite von 200 Pixeln aus der Desktopfassung.
 * `max-width: 100%` half nicht: In einem Raster bezieht sich das auf die
 * Spaltenbreite, und die richtet sich wiederum nach dem Inhalt – gemessen bei
 * 320 Pixel Fensterbreite lag die Hülle von 4 bis 204 und damit über
 * Menüknopf und Symbolen.
 *
 * `width: 100%` kehrt die Abhängigkeit um: Die Hülle nimmt, was die Spalte
 * hergibt, und das Bild darin passt sich an.
 */
@media (max-width: 767px) {
  /*
     * Das Rasterkind ist `.rc-header__logo`, nicht `.header-logo-main` – die
     * Regeln oben griffen deshalb am falschen Element. Gemessen: Die Spalte
     * war 151 Pixel breit, das Kind darin 200 und lag damit über den Symbolen.
     *
     * `min-width: 0` hebt die Vorgabe `min-width: auto` für Rasterkinder auf;
     * erst dann darf das Element unter seine Inhaltsbreite schrumpfen.
     */
  /*
     * Alle vier Ebenen, nicht nur zwei.
     *
     * Die Marke besteht aus vier ineinanderliegenden Elementen:
     *   .header-logo-main > a.header-logo-main-link > picture > img
     *
     * Begrenzt waren zuerst nur die Hülle und der Link. Gemessen bei 320 Pixel
     * lag der Link danach korrekt bei 56…152 – das `picture` darin aber bei
     * 56…256, und das Bild darin mittig bei 110…202. Damit lag der Schriftzug
     * über der Telefon- und der Merkzettel-Schaltfläche (156…194 und 194…232).
     *
     * Ein `picture` ist ein gewöhnliches Inline-Element ohne eigene Breite –
     * es übernimmt sie vom Bild, und das Bild hatte seine 200 Pixel aus der
     * Desktopfassung behalten.
     */
  /*
     * Der Link wird zum Flexcontainer mit fester Breite, das `picture` darin
     * zu einem Flexkind, das schrumpfen darf.
     *
     * Ein `width: 100%` am `picture` funktioniert hier NICHT: Der Link ist
     * `inline-flex` und bemisst sich nach seinem Inhalt. Prozent gegen einen
     * Elternteil ohne feste Breite ergibt eine Rundabhängigkeit, die der
     * Browser mit 0 auflöst – gemessen war das Logo danach 0 Pixel breit.
     */
  /*
     * `display: contents` löst die Kette auf.
     *
     * Das `picture` ist reine Verpackung für die Quellenauswahl und hat mit
     * dem Layout nichts zu tun. Solange es aber als eigenes Kästchen im
     * Fluss steht, hängt seine Breite am Bild und die Breite des Bildes über
     * `max-width: 100%` wieder am `picture` – der Browser löst diese
     * Rundabhängigkeit mit 0 auf. Gemessen: Logo 0×0 auf allen Breiten unter
     * 992 Pixel.
     *
     * Mit `contents` verschwindet das Kästchen; das Bild wird direktes
     * Flexkind des Links, und dessen Breite steht fest.
     */
  .rc-header__logo {
    min-width: 0;
    /*
         * `justify-self: center` aus der Grundregel bemisst das Element nach
         * seinem Inhalt statt nach der Spalte. Mit `min-width: 0` allein blieb
         * es deshalb bei 200 Pixeln in einer 151 Pixel breiten Spalte – und
         * ragte, weil zentriert, auf beiden Seiten heraus.
         *
         * `stretch` dreht das um: Das Element nimmt die Spaltenbreite, das
         * Bild darin bleibt über `margin: auto` mittig.
         */
    justify-self: stretch;
    text-align: center;
  }
  .rc-header .header-logo-main {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .rc-header .header-logo-main-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /*
         * 44 px hoch, wie jedes andere Ziel im Kopf.
         *
         * GEMESSEN vorher bei 360 px: a.header-logo-main-link 280 × 26 px,
         * Innenmaß 0. Die Breite stimmte längst, die Höhe nicht. Sie kostet
         * hier nichts: Der Menüknopf in derselben Rasterzeile ist 48 px hoch
         * und bestimmt die Zeilenhöhe – die 44 px liegen darunter.
         */
    min-height: 44px;
  }
  .rc-header .header-logo-picture {
    display: contents;
  }
  .rc-header .header-logo-main img {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 100%;
  }
}
/*
 * ── Kontobox im Kopf ─────────────────────────────────────────────────────
 *
 * Der Betreiber: „die ihr konto box muss hochwertiger gemacht werden und die
 * texte sind direkt am rand."
 *
 * Beides gemessen am 27.08.2026 bei 1440 px: Der Kasten war 200 px breit mit
 * 8 px Innenabstand ringsum; die Einträge trugen `padding: 8px 0`, standen
 * also 8 Pixel von der Kante entfernt. Zum Vergleich: Jede andere Karte
 * dieses Themes hat 24 px (--rc-space-5). Der Kasten hatte weder eine
 * getrennte Kopfzeile noch eine abgesetzte Abmeldung – „Ihr Konto",
 * die vier Ziele und „Abmelden" standen als eine Kette gleich aussehender
 * Zeilen untereinander.
 *
 * Was sich ändert:
 *   Breite       200 → 280 px. Bei 200 px brach „Persönliches Profil" fast um.
 *   Innenabstand 8 → 0 am Kasten, dafür 20 px an jeder Zeile. So reicht die
 *                Überfahrfläche über die volle Kastenbreite, statt als
 *                schmaler Streifen in der Mitte zu schweben.
 *   Kopfzeile    eigener Ton, kleiner, mit Trennlinie darunter.
 *   Abmelden     abgesetzt am Fuß, auf warmem Grund, mit Symbol.
 *
 * Die Klassen stammen aus dem Kern (account-menu, dropdown-header,
 * account-aside-item, account-aside-footer); die Vorlage bleibt unberührt.
 */
.account-menu-dropdown {
  width: 280px;
  min-width: 280px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  box-shadow: var(--rc-shadow-raised);
}
.account-menu-dropdown .card, .account-menu-dropdown .account-menu-inner {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.account-menu-dropdown .list-group, .account-menu-dropdown .list-group-flush {
  border-radius: 0;
}
.account-menu-dropdown .dropdown-header, .account-menu-dropdown .account-menu-header {
  margin: 0;
  padding: var(--rc-space-4) var(--rc-space-5) var(--rc-space-3);
  border-bottom: 1px solid var(--rc-border);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  letter-spacing: 0.02em;
}
.account-menu-dropdown .account-aside-item, .account-menu-dropdown .list-group-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--rc-space-3) var(--rc-space-5);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  text-decoration: none;
  transition: background-color var(--rc-dur-btn) var(--rc-ease), color var(--rc-dur-btn) var(--rc-ease);
}
.account-menu-dropdown .account-aside-item:hover, .account-menu-dropdown .account-aside-item:focus-visible, .account-menu-dropdown .list-group-item:hover, .account-menu-dropdown .list-group-item:focus-visible {
  background-color: var(--rc-surface-warm);
  color: var(--rc-primary);
}
.account-menu-dropdown .account-aside-item.is-active, .account-menu-dropdown .list-group-item.is-active {
  color: var(--rc-primary);
  font-weight: var(--rc-fw-semibold);
  box-shadow: inset 3px 0 0 var(--rc-primary);
}
/*
 * Abmelden sitzt am Fuß und hebt sich ab.
 *
 * Es ist die einzige Handlung im Kasten, die etwas beendet. Stünde sie als
 * fünfte gleich aussehende Zeile in der Kette, wäre sie genauso leicht zu
 * treffen wie „Bestellungen" – auf einem Telefon mit unruhiger Hand ein
 * echter Ärger.
 */
.account-menu-dropdown .account-aside-footer {
  margin: 0;
  padding: var(--rc-space-2) var(--rc-space-3);
  border-top: 1px solid var(--rc-border);
  background-color: var(--rc-surface-warm);
}
.account-menu-dropdown .account-aside-btn {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--rc-space-2) var(--rc-space-3);
  border-radius: var(--rc-radius-control);
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  text-decoration: none;
}
.account-menu-dropdown .account-aside-btn:hover, .account-menu-dropdown .account-aside-btn:focus-visible {
  background-color: var(--rc-surface);
  color: var(--rc-primary);
  text-decoration: none;
}
.account-menu-dropdown .account-aside-btn .icon {
  width: 18px;
  height: 18px;
}
.account-menu-dropdown .account-aside-btn .icon > svg {
  width: 18px;
  height: 18px;
}
/*
 * Abgemeldet: Anmeldeknopf und Registrierungszeile.
 *
 * Hier trug der Kasten dieselben 8 px. Der Anmeldeknopf klebte damit an drei
 * Kanten.
 */
.account-menu-dropdown .account-menu-login {
  padding: var(--rc-space-5);
}
.account-menu-dropdown .account-menu-login .btn {
  width: 100%;
}
/*
 * „oder registrieren" ist ein Klickziel, kein Nachsatz.
 *
 * GEMESSEN am 30.08.2026 bei 1440 px im geöffneten Kontomenü:
 *   „Anmelden"      214 × 48 px, Innenmaß 0 24px
 *   „registrieren"   92 × 20 px, display inline, Innenmaß 0
 *   Auslöser des Menüs selbst 44 × 48 px
 *
 * 20 px war damit das kleinste Ziel im gesamten Kopfbereich – alle übrigen
 * liegen zwischen 44 und 56 px. Für Neukunden ab 65 ist genau dieser Verweis
 * der Einstieg in die Bestellung.
 *
 * Kein zweiter umrandeter Knopf: Der Kern schreibt den Satz „oder
 * <a>registrieren</a>" in ein gemeinsames Element. Ein Knopf allein um den
 * Link ließe das Wort „oder" als Waise darüber stehen. Stattdessen bekommt der
 * Link eine eigene Fläche von 44 px Höhe und eine Unterstreichung – damit ist
 * er als Ziel erkennbar, ohne mit dem Anmeldeknopf um die Aufmerksamkeit zu
 * streiten.
 *
 * Die 12 px Abstand nach oben (--rc-space-3) sind zugleich die eigene
 * Untergrenze zwischen zwei Klickzielen.
 */
.account-menu-dropdown .account-menu-register {
  margin-top: var(--rc-space-3);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  text-align: center;
}
.account-menu-dropdown .account-menu-register a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--rc-space-2);
  border-radius: var(--rc-radius-control);
  color: var(--rc-primary);
  font-weight: var(--rc-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-menu-dropdown .account-menu-register a:hover, .account-menu-dropdown .account-menu-register a:focus-visible {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
}
/*
 * Einheitliches Sektions- und Block-Spacing für alle CMS-Seiten (§4/§8):
 * Abstände kommen aus dem Token-System, nicht aus Einzelwerten.
 */
.cms-section {
  padding-top: calc(var(--rc-section-mobile) / 2);
  padding-bottom: calc(var(--rc-section-mobile) / 2);
}
@media (min-width: 992px) {
  .cms-section {
    padding-top: calc(var(--rc-section-desktop) / 2);
    padding-bottom: calc(var(--rc-section-desktop) / 2);
  }
}
.cms-section.bg-color {
  padding-top: var(--rc-section-mobile);
  padding-bottom: var(--rc-section-mobile);
}
@media (min-width: 992px) {
  .cms-section.bg-color {
    padding-top: var(--rc-section-desktop);
    padding-bottom: var(--rc-section-desktop);
  }
}
.cms-sections > .cms-section:first-child {
  padding-top: var(--rc-space-5);
}
@media (min-width: 992px) {
  .cms-sections > .cms-section:first-child {
    padding-top: var(--rc-space-6);
  }
}
.cms-section .cms-block + .cms-block {
  margin-top: var(--rc-space-7);
}
@media (min-width: 992px) {
  .cms-section .cms-block + .cms-block {
    margin-top: var(--rc-space-8);
  }
}
.cms-element-text h2, .cms-element-text .h2 {
  margin-bottom: var(--rc-space-4);
}
.cms-element-text p:last-child {
  margin-bottom: 0;
}
.cms-element-form {
  max-width: 820px;
  margin-inline: auto;
}
.rc-legal {
  max-width: 820px;
  margin-inline: auto;
  text-align: left;
  /*
     * Tabellen dürfen aus der Lesespalte ausbrechen.
     *
     * Die 820 Pixel sind für Fließtext gedacht – 65 bis 70 Zeichen je Zeile.
     * Eine fünfspaltige Tabelle bekommt darin 164 Pixel je Spalte, und aus
     * „Paketversand" wird „Paketver-sand". Gemessen auf der Versandseite: In
     * jeder der fünf Spalten brach mindestens ein Wort um.
     *
     * Die Tabelle nutzt deshalb die volle Blockbreite und bleibt trotzdem
     * mittig zur Textspalte. Bei zu wenig Platz lässt sie sich seitwärts
     * schieben, statt die Wörter zu zerlegen.
     */
}
.rc-legal h1, .rc-legal .h1 {
  margin-bottom: var(--rc-space-6);
}
.rc-legal h2, .rc-legal .h2 {
  margin-top: var(--rc-space-7);
  font-size: var(--rc-fs-xl);
}
.rc-legal h3, .rc-legal .h3 {
  margin-top: var(--rc-space-5);
  font-size: var(--rc-fs-lg);
}
.rc-legal p, .rc-legal li {
  line-height: 1.7;
  font-size: var(--rc-fs-sm);
}
.rc-legal ul, .rc-legal ol {
  margin-bottom: var(--rc-space-4);
  padding-left: var(--rc-space-5);
}
.rc-legal .rc-tabelle, .rc-legal table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--rc-space-5);
  font-size: var(--rc-fs-sm);
}
.rc-legal .rc-tabelle th, .rc-legal .rc-tabelle td, .rc-legal table th, .rc-legal table td {
  padding: var(--rc-space-3) var(--rc-space-4);
  border-bottom: 1px solid var(--rc-border);
  text-align: left;
  vertical-align: top;
}
.rc-legal .rc-tabelle th, .rc-legal table th {
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-legal .rc-tabelle thead th, .rc-legal table thead th {
  border-bottom: 2px solid var(--rc-border-strong);
}
.rc-legal .rc-tabelle tbody tr:nth-child(even), .rc-legal table tbody tr:nth-child(even) {
  background-color: var(--rc-bg);
}
@media (min-width: 992px) {
  .rc-legal table {
    width: calc(100% + 2 * var(--rc-space-9));
    max-width: calc(100vw - 2 * var(--rc-space-7));
    margin-inline: calc(var(--rc-space-9) * -1);
  }
}
@media (max-width: 991px) {
  .rc-legal table {
    display: block;
    overflow-x: auto;
  }
}
.cms-section.bg-color {
  background-color: var(--rc-bg);
}
.header-main .header-row {
  padding-top: var(--rc-space-3);
  padding-bottom: var(--rc-space-3);
}
.header-logo-main .header-logo-main-link {
  display: inline-flex;
}
.header-logo-main img, .header-logo-main .header-logo-picture {
  height: 52px;
  max-height: 52px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .header-logo-main img, .header-logo-main .header-logo-picture {
    height: 40px;
    max-height: 40px;
  }
}
/*
 * Navigation & Overlay-Flächen.
 * Regel: JEDE schwebende Fläche (Flyout, Dropdown, Suchvorschlag, Offcanvas)
 * nutzt dieselben Tokens – Radius card, Border, shadow-md.
 */
.main-navigation {
  background-color: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border);
}
/*
 * Abstand zwischen zwei Menüpunkten.
 *
 * Der Kern setzt hier 1 rem = 16 px
 * (vendor/shopware/storefront/…/skin/shopware/layout/_main-navigation.scss:15).
 * 12 px ist die im ganzen Theme geltende Untergrenze zwischen zwei
 * Klickzielen; mehr braucht es hier nicht, und die vier gesparten Pixel je
 * Zwischenraum sind 32 px, die über eine zweite Navigationszeile entscheiden.
 */
.main-navigation-menu .nav-item:not(:last-child) {
  padding-right: var(--rc-space-3);
}
.main-navigation-menu {
  padding: 0;
  /*
     * ── Warum die Menüpunkte unterhalb 1440 px enger stehen ─────────────────
     *
     * GEMESSEN am 30.08.2026 auf der Startseite, neun Menüpunkte, Zustand vor
     * dieser Änderung (Zeilenverteilung, Breite des Menübands in Klammern):
     *
     *   1024 px (984)   6 + 3
     *   1100 px (1060)  6 + 3
     *   1200 px (1160)  7 + 2
     *   1280 px (1240)  8 + 1   ← „Ratgeber" allein auf der zweiten Zeile
     *   1360 px (1320)  8 + 1
     *   1440 px (1360)  9       (Summe der Einträge 1338,2 px – 21,8 px Luft)
     *
     * Folge: Der erste Inhaltsabschnitt begann bei 1024 bis 1360 px erst bei
     * y = 310 px, ab 1440 px bei y = 247 px. 63 Pixel Kopfzone – genau eine
     * Navigationszeile – gehen dem Angebot verloren, und zwar ausgerechnet bei
     * 1280 px, der im Designsystem festgelegten Referenzbreite
     * (docs/14-designsystem-2026.md:51).
     *
     * WOHER DIE 1338,2 PIXEL KOMMEN (gemessen, je Eintrag):
     *   reine Textbreite aller neun Punkte           994,2 px
     *   18 × 12 px waagerechtes Innenmaß der Links   216,0 px
     *   8 × 16 px Abstand zwischen den Einträgen     128,0 px
     *
     * Die Textbreite ist gesetzt – das sind die Kategorienamen. Also bleiben
     * Innenmaß und Abstand. Beide werden unterhalb 1440 px verkleinert:
     *   Innenmaß 12 → 8 px  (spart 72 px)
     *   Abstand  16 → 12 px (spart 32 px, siehe Regel oben; die 12 px sind
     *                        zugleich die eigene Untergrenze zwischen zwei
     *                        Klickzielen und werden NICHT unterschritten)
     *
     * NACHGERECHNET mit diesen Werten: 994,2 + 144 + 96 = 1234,2 px.
     *   1280 px (1240 verfügbar)  → eine Zeile, 5,8 px Luft
     *   1360 px (1320)            → eine Zeile, 85,8 px Luft
     *   1200 px (1160)            → 8 + 1, vorher 7 + 2
     *   1024 px (984)             → 6 + 3, unverändert
     *
     * Unter 1200 px ist eine Zeile nicht erreichbar: Schon die nackte
     * Textbreite von 994,2 px passt bei 1024 px nicht in die 984 px des
     * Menübands. Wer dort eine Zeile will, muss einen Menüpunkt weglassen –
     * das ist eine Entscheidung über das Sortiment, keine über CSS.
     *
     * Das Innenmaß läuft über eine eigene Eigenschaft und nicht über eine
     * zweite `!important`-Regel: Die Grundregel unten muss `!important`
     * tragen, um gegen den Kern zu gewinnen, und eine Breitenregel mit
     * `!important` obendrauf wäre der Anfang einer Kette.
     *
     * Die Eigenschaft sitzt hier und nicht an `.main-navigation`: Diese
     * Klasse kommt im Dokument gar nicht vor – der Kern rendert die Hülle als
     * `.nav-main` und die Leiste selbst als `nav.main-navigation-menu`
     * (gemessen im ausgelieferten HTML der Startseite). Nur von hier aus
     * erreicht die Eigenschaft die Menüpunkte.
     */
}
@media (max-width: 1439.98px) {
  .main-navigation-menu {
    --rc-nav-pad-x: var(--rc-space-2);
  }
}
.main-navigation-menu .nav-link, .main-navigation-menu .main-navigation-link {
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
  padding: var(--rc-space-4) var(--rc-nav-pad-x, var(--rc-space-3)) !important;
  border-bottom: 2px solid transparent;
  transition: color var(--rc-dur-btn) var(--rc-ease), border-color var(--rc-dur-btn) var(--rc-ease);
  /*
         * Der Kern unterstreicht zusätzlich den Textknoten selbst
         * (.main-navigation-link-text mit eigener border-bottom). Auf der
         * gerade geöffneten Seite standen dadurch zwei Striche untereinander:
         * einer unter dem Wort, einer über die volle Breite des Eintrags.
         *
         * Wir behalten den breiten – er wirkt wie ein Reiter und markiert den
         * ganzen Menüpunkt, nicht nur seine Buchstaben.
         */
  /*
         * ── Der Fokus braucht einen eigenen Ring ────────────────────────────
         *
         * Hier stand `outline: none !important`. Die Anzeige bestand damit
         * ausschließlich aus den drei Zeilen darüber – und auf dem Menüpunkt
         * der gerade geöffneten Seite liegen zwei davon schon im Ruhezustand
         * an. GEMESSEN am 30.08.2026 bei 1440 px, „Startseite" auf der
         * Startseite, Ruhe- gegen Fokuszustand:
         *
         *   outline        none 0px          →  none 0px        unverändert
         *   box-shadow     none              →  none            unverändert
         *   color          rgb(47,93,80)     →  rgb(47,93,80)   unverändert
         *   border-bottom  rgb(47,93,80)     →  rgb(47,93,80)   unverändert
         *   background     transparent       →  rgb(232,239,233)
         *
         * Eine einzige geänderte Eigenschaft, und die kommt gegen das Weiß der
         * Leiste auf 1,17:1. WCAG 2.1 SC 1.4.11 verlangt 3:1, SC 2.4.7
         * überhaupt eine wahrnehmbare Anzeige. Auf den übrigen Punkten war der
         * Fokus erkennbar (dort ändern sich zusätzlich Schriftfarbe und
         * Unterstrich) – auf jeder Seite genau der eine Punkt nicht, der zu
         * ihr gehört.
         *
         * Der Ring ist derselbe wie im übrigen Shop (base/_focus.scss):
         * 2 px --rc-secondary. NACHGERECHNET gegen beide Untergründe, auf
         * denen er hier liegt:
         *   #B4573A auf #FFFFFF (Leiste)          4,81:1
         *   #B4573A auf #E8EFE9 (Fokusfläche)     4,12:1
         * Beide über den geforderten 3:1.
         *
         * `outline-offset: -2px` statt der globalen +2px: Der Menüpunkt füllt
         * die 63 px hohe Leiste vollständig aus; ein außen liegender Ring
         * würde oben und unten von der Leistenkante beschnitten.
         *
         * Nur `:focus-visible`, nicht `:focus`: Wer mit der Maus klickt, soll
         * keinen Tastaturring bekommen – dieselbe Trennung wie global.
         */
}
.main-navigation-menu .nav-link .main-navigation-link-text, .main-navigation-menu .main-navigation-link .main-navigation-link-text {
  border-bottom: 0;
}
.main-navigation-menu .nav-link:hover, .main-navigation-menu .nav-link.active, .main-navigation-menu .nav-link[aria-expanded="true"], .main-navigation-menu .main-navigation-link:hover, .main-navigation-menu .main-navigation-link.active, .main-navigation-menu .main-navigation-link[aria-expanded="true"] {
  color: var(--rc-primary);
  border-bottom-color: var(--rc-primary);
}
.main-navigation-menu .nav-link:focus, .main-navigation-menu .nav-link:focus-visible, .main-navigation-menu .main-navigation-link:focus, .main-navigation-menu .main-navigation-link:focus-visible {
  box-shadow: none !important;
  color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
  border-bottom-color: var(--rc-primary);
  border-radius: var(--rc-radius-control) var(--rc-radius-control) 0 0;
}
.main-navigation-menu .nav-link:focus-visible, .main-navigation-menu .main-navigation-link:focus-visible {
  outline: 2px solid var(--rc-secondary);
  outline-offset: -2px;
}
.main-navigation-menu .dropdown-toggle::after {
  border: 0;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: var(--rc-space-2);
  vertical-align: middle;
  transition: transform var(--rc-dur-btn) var(--rc-ease);
}
.main-navigation-menu .dropdown-menu {
  border: 1px solid var(--rc-border);
  border-top: 0;
  border-radius: 0 0 var(--rc-radius-visual) var(--rc-radius-visual);
  box-shadow: var(--rc-shadow-md);
  padding: 0 !important;
  margin-top: -1px;
  background-color: var(--rc-surface);
  overflow: hidden;
}
.rc-flyout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 992px) {
  .rc-flyout {
    grid-template-columns: 1fr 340px;
  }
}
.rc-flyout__main {
  padding: var(--rc-space-6);
}
.rc-flyout__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rc-space-4);
  padding-bottom: var(--rc-space-4);
  margin-bottom: var(--rc-space-4);
  border-bottom: 1px solid var(--rc-border);
}
.rc-flyout__headline {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  text-decoration: none;
}
.rc-flyout__headline:hover, .rc-flyout__headline:focus-visible {
  color: var(--rc-primary);
}
.rc-flyout__all {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  flex-shrink: 0;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-primary);
  text-decoration: none;
  white-space: nowrap;
}
.rc-flyout__all::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--rc-dur-btn) var(--rc-ease);
}
.rc-flyout__all:hover, .rc-flyout__all:focus-visible {
  color: var(--rc-primary-dark);
}
.rc-flyout__all:hover::after, .rc-flyout__all:focus-visible::after {
  transform: rotate(45deg) translate(2px, -2px);
}
/*
 * Einträge als Zeilen, nicht als lose Wörter.
 *
 * Vorher standen die Unterkategorien als nackter Text nebeneinander – bei
 * einem einzigen Eintrag wirkte das Menü leer und unfertig. Jetzt trägt jede
 * Zeile einen Chevron und eine Trennlinie: Das Menü sieht auch mit einem
 * Eintrag nach einer Auswahl aus und nicht nach einem Rest.
 *
 * Spaltenzahl nach Menge: bis drei Einträge eine Spalte (sonst reißt die
 * Zeile auseinander), darüber zwei bis drei.
 */
.rc-flyout__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 var(--rc-space-6);
}
.rc-flyout__list > li {
  border-bottom: 1px solid var(--rc-border-subtle, rgba(0, 0, 0, 0.06));
}
.rc-flyout__list > li:last-child {
  border-bottom: 0;
}
.rc-flyout__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-3);
  padding: var(--rc-space-3) var(--rc-space-3);
  margin-inline: calc(-1 * var(--rc-space-3));
  border-radius: var(--rc-radius-control);
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  text-decoration: none;
  transition: background-color var(--rc-dur-btn) var(--rc-ease), color var(--rc-dur-btn) var(--rc-ease);
}
.rc-flyout__list a::after {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--rc-dur-btn) var(--rc-ease), transform var(--rc-dur-btn) var(--rc-ease);
}
.rc-flyout__list a:hover, .rc-flyout__list a:focus-visible {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary);
}
.rc-flyout__list a:hover::after, .rc-flyout__list a:focus-visible::after {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}
/*
 * Dritte Ebene im Flyout.
 *
 * Sie steht eingerückt unter ihrer Unterkategorie und ist ruhiger gesetzt –
 * kleinere Schrift, gedämpfte Farbe, kein Chevron. Sie ergänzt die Auswahl,
 * sie konkurriert nicht mit ihr. Die Trefferfläche bleibt bei 44 px: Ein
 * kleineres Ziel wäre für die Zielgruppe kein Ziel.
 *
 * Der Einzug von 24 px hebt die negative Randverschiebung der Elternregel
 * (`margin-inline: calc(-1 * var(--rc-space-3))`) mit auf; sichtbar bleiben
 * gegenüber der Zeile darüber 12 px Einzug.
 */
.rc-flyout__sublist {
  list-style: none;
  margin: 0 0 var(--rc-space-2);
  padding: 0;
}
.rc-flyout__sublist a {
  min-height: 44px;
  padding-block: var(--rc-space-2);
  padding-inline: var(--rc-space-6) var(--rc-space-3);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.rc-flyout__sublist a::after {
  content: none;
}
.rc-flyout__sublist a:hover, .rc-flyout__sublist a:focus-visible {
  color: var(--rc-primary);
}
.rc-flyout__aside {
  background-color: var(--rc-primary-soft);
  padding: var(--rc-space-6) var(--rc-space-5);
  display: none;
}
@media (min-width: 992px) {
  .rc-flyout__aside {
    display: block;
  }
}
.rc-flyout__aside-title {
  margin: 0 0 var(--rc-space-2);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
}
.rc-flyout__aside-text {
  margin: 0 0 var(--rc-space-4);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  line-height: 1.5;
}
.rc-flyout__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  color: var(--rc-primary);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  text-decoration: none;
}
.rc-flyout__phone:hover {
  color: var(--rc-primary-dark);
}
.rc-flyout__hours {
  margin: var(--rc-space-1) 0 0;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.dropdown-menu {
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  box-shadow: var(--rc-shadow-md);
  padding: var(--rc-space-2);
}
.dropdown-menu .dropdown-item {
  border-radius: var(--rc-radius-control);
  padding: var(--rc-space-2) var(--rc-space-3);
  min-height: var(--rc-control-sm);
  display: flex;
  align-items: center;
  color: var(--rc-text);
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus-visible {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary);
}
.dropdown-menu .dropdown-item.active {
  background-color: var(--rc-primary);
  color: #fff;
}
.rc-header__search .header-search, .header-search {
  position: relative;
}
.rc-header__search .search-suggest, .header-search .search-suggest, .search-suggest {
  position: absolute;
  top: calc(100% + var(--rc-space-2));
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  box-shadow: var(--rc-shadow-md);
  padding: var(--rc-space-2);
  margin: 0;
}
.search-suggest::before, .search-suggest::after, .search-suggest-container::before, .search-suggest-container::after, .header-search-form::before, .header-search-form::after {
  display: none !important;
  content: none !important;
}
.search-suggest-container, ul.search-suggest-container {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none;
  min-width: 0;
  list-style: none;
  box-shadow: none;
  border: 0;
  background: transparent;
}
.search-suggest-container > li, ul.search-suggest-container > li {
  position: static;
  width: auto;
  margin: 0;
}
.search-suggest-product-link {
  text-decoration: none;
}
.search-suggest-product {
  border: 0;
  list-style: none;
}
.rc-suggest__item {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  padding: var(--rc-space-2);
  border-radius: var(--rc-radius-control);
  text-decoration: none;
  color: var(--rc-text);
}
.rc-suggest__item:hover, .rc-suggest__item:focus-visible {
  background-color: var(--rc-primary-soft);
  color: var(--rc-text);
}
.rc-suggest__thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  padding: var(--rc-space-1);
  overflow: hidden;
}
.rc-suggest__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.rc-suggest__text {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  line-height: 1.35;
}
/*
 * ── Der Produktname darf umbrechen ──────────────────────────────────────────
 *
 * Hier stand `white-space: nowrap` mit Auslassungspunkten. GEMESSEN am
 * 30.08.2026 mit der Eingabe „rollator", zehn Produktvorschläge, sichtbare
 * Namensbreite gegen die ohne Umbruch benötigte Breite:
 *
 *                                                          360 px     1440 px
 *   Leichtgewichtrollator – Rollator Vermeiren Quava       152/413    336/436
 *   Leichtgewichtrollator – Rollator Vermeiren Quadri…     149/463    333/489
 *   Schwerlastrollator – Vermeiren Goliat                  151/314    333/314
 *   Schwerlastrollator – Vermeiren Goliat Artro – mit…     147/566    333/566
 *
 * Die ersten beiden Treffer unterscheiden sich erst im letzten Wort. Genau
 * dieses Wort lag hinter dem Abschneidepunkt – am Telefon wie am Rechner. Vier
 * von zehn Treffern waren damit nicht auseinanderzuhalten; eine Vorschlagsliste,
 * aus der man nicht auswählen kann, ist keine.
 *
 * Zwei Zeilen allein genügen nicht: Am Telefon war die Namensspalte 152 px
 * breit, das längste Einzelwort „Leichtgewichtrollator" braucht 178,2 px – es
 * hätte in KEINER Zeile Platz gefunden und wäre stumm abgeschnitten worden.
 * Deshalb ist zusätzlich der Preis in die Textspalte gerückt (siehe
 * layout/header/search-suggest.html.twig); die Namensspalte misst seither
 * 234 px bei 360 px und 420 px bei 1440 px.
 *
 * NACHGERECHNET: 2 × 420 = 840 px am Rechner – das reicht für alle zehn Namen
 * vollständig (längster 566 px). Am Telefon sind es drei Zeilen: 3 × 234 =
 * 702 px, ebenfalls für jeden Namen vollständig. Zwei Zeilen wären dort
 * 468 px – genug, um die beiden Leichtgewichtrollatoren zu unterscheiden
 * (463 px), aber der längste Name bliebe angeschnitten.
 *
 * Die Zeilenhöhe der Vorschlagszeile wächst nur, wenn ein Name wirklich
 * umbricht: `-webkit-line-clamp` ist eine Obergrenze, keine feste Höhe.
 *
 * `hyphens: manual` hebt das `hyphens: auto` aus base/_typography.scss auf.
 * Ein Produktname, der mitten im Wort getrennt wird, ist für die Zielgruppe
 * schwerer zu lesen als ein früher Umbruch – dieselbe Ausnahme steht aus
 * demselben Grund in layout/_promo-bar.scss und layout/_cart.scss.
 */
.rc-suggest__name {
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
@media (max-width: 575px) {
  .rc-suggest__name {
    -webkit-line-clamp: 3;
  }
}
/*
 * Marke und Preis teilen sich eine Zeile unter dem Namen.
 *
 * `margin-left: auto` am Preis statt `justify-content: space-between`: Nicht
 * jedes Produkt hat einen Hersteller. Mit space-between stünde der Preis dann
 * links, wo sonst die Marke steht – mit dem automatischen Rand steht er in
 * beiden Fällen rechts.
 */
.rc-suggest__meta {
  display: flex;
  align-items: baseline;
  gap: var(--rc-space-3);
  /*
     * Ohne diese Zeile schiebt eine lange Marke den Preis aus der Zeile.
     * GEMESSEN bei 360 px am Eintrag „Rollatorhalter Leichtgewicht": Marke
     * „AKTIV DEUTSCHLAND" 172 px, Preis 70 px, Zeile 234 px – der Preis stand
     * als „279,2…" über der rechten Kante. Ursache ist die Vorgabe
     * `min-width: auto` für Rasterkinder: Die Zeile durfte nicht unter ihre
     * Inhaltsbreite schrumpfen, also konnte auch die Marke nicht kürzen.
     */
  min-width: 0;
}
.rc-suggest__mfr {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rc-suggest__price {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--rc-primary-dark);
  font-weight: var(--rc-fw-bold);
  font-size: var(--rc-fs-sm);
  white-space: nowrap;
}
.rc-suggest__price small, .rc-suggest__price .small {
  font-weight: 400;
  color: var(--rc-muted);
}
.rc-suggest__total {
  list-style: none;
  border-top: 1px solid var(--rc-border);
  margin-top: var(--rc-space-2);
  padding-top: var(--rc-space-2);
}
.rc-suggest__total-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-3);
  padding: var(--rc-space-2);
  border-radius: var(--rc-radius-control);
  color: var(--rc-primary);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
  text-decoration: none;
}
.rc-suggest__total-link:hover {
  background-color: var(--rc-primary-soft);
}
.rc-suggest__total-count {
  color: var(--rc-muted);
  font-weight: 400;
}
.search-suggest-no-result {
  list-style: none;
  padding: var(--rc-space-4);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  text-align: center;
}
.offcanvas {
  border: 0;
}
.offcanvas .offcanvas-header {
  background-color: var(--rc-primary);
  border: 0;
  padding: var(--rc-space-3) var(--rc-space-4);
  min-height: 64px;
  align-items: center;
}
.offcanvas .offcanvas-close, .offcanvas .offcanvas-header .btn {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
  padding: var(--rc-space-2) var(--rc-space-2);
  min-height: var(--rc-control-md);
}
.offcanvas .offcanvas-close .icon, .offcanvas .offcanvas-header .btn .icon {
  color: #fff;
}
.offcanvas .offcanvas-close .icon, .offcanvas .offcanvas-header .btn .icon {
  width: 18px;
  height: 18px;
}
.offcanvas .offcanvas-close .icon > svg, .offcanvas .offcanvas-header .btn .icon > svg {
  width: 18px;
  height: 18px;
}
.offcanvas .offcanvas-close:hover, .offcanvas .offcanvas-close:focus-visible, .offcanvas .offcanvas-header .btn:hover, .offcanvas .offcanvas-header .btn:focus-visible {
  color: var(--rc-secondary) !important;
}
.offcanvas .offcanvas-close:hover .icon, .offcanvas .offcanvas-close:focus-visible .icon, .offcanvas .offcanvas-header .btn:hover .icon, .offcanvas .offcanvas-header .btn:focus-visible .icon {
  color: var(--rc-secondary);
}
.offcanvas .offcanvas-body {
  padding: var(--rc-space-5);
}
.offcanvas-body:has(.navigation-offcanvas-container) {
  padding: 0;
}
.navigation-offcanvas-container {
  padding: 0;
}
.offcanvas-cart-header, .offcanvas-cart .offcanvas-title, .offcanvas h2, .offcanvas .h2 {
  font-size: var(--rc-fs-xl);
  margin-bottom: var(--rc-space-4);
}
.offcanvas-cart-actions {
  display: grid;
  gap: var(--rc-space-3);
  margin-top: var(--rc-space-5);
}
.offcanvas-cart-actions .btn {
  min-height: var(--rc-control-md);
  width: 100%;
}
.rc-offcanvas-consult {
  margin: var(--rc-space-4) var(--rc-space-3) var(--rc-space-6);
  padding: var(--rc-space-4);
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-card);
}
.rc-offcanvas-consult__title {
  margin: 0 0 var(--rc-space-2);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
}
/*
 * Die Rufnummer im Handy-Menü ist ein Klickziel wie jedes andere.
 *
 * GEMESSEN am 30.08.2026 bei 360 px im geöffneten Menü: 182 × 34 px – das
 * einzige Element unter 44 px im ganzen Offcanvas (alle Menüzeilen 316 × 56,
 * „Menü schließen" 308 × 48). Die Höhe kam allein aus der Zeilenhöhe, weil
 * hier weder Innenmaß noch Mindesthöhe standen.
 *
 * `min-height` statt fester Höhe: Wer die Schriftgröße im Browser hochsetzt,
 * bekommt ein größeres Ziel, kein abgeschnittenes.
 */
.rc-offcanvas-consult__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  min-height: 44px;
  padding: var(--rc-space-1) var(--rc-space-2);
  margin-inline-start: calc(-1 * var(--rc-space-2));
  color: var(--rc-primary);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  text-decoration: none;
}
.rc-offcanvas-consult__hours {
  margin: var(--rc-space-1) 0 0;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.navigation-offcanvas-headline, .offcanvas .navigation-offcanvas-headline {
  display: block;
  margin: 0;
  padding: var(--rc-space-4) var(--rc-space-5) var(--rc-space-2);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-muted);
  border: 0;
}
.navigation-offcanvas-list {
  padding: 0 var(--rc-space-3) var(--rc-space-5);
}
.navigation-offcanvas-list-item {
  border: 0;
}
.navigation-offcanvas-list-item + .navigation-offcanvas-list-item {
  border-top: 1px solid var(--rc-border);
}
.navigation-offcanvas-link, .offcanvas .navigation-offcanvas-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-3);
  min-height: var(--rc-control-lg);
  padding: var(--rc-space-3) var(--rc-space-3);
  border-radius: var(--rc-radius-control);
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  text-decoration: none;
}
.navigation-offcanvas-link:hover, .navigation-offcanvas-link:focus-visible, .offcanvas .navigation-offcanvas-link:hover, .offcanvas .navigation-offcanvas-link:focus-visible {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary);
}
.navigation-offcanvas-link .icon, .offcanvas .navigation-offcanvas-link .icon {
  color: var(--rc-primary);
}
.navigation-offcanvas-link-icon .icon {
  width: 16px;
  height: 16px;
}
.navigation-offcanvas-link-icon .icon > svg {
  width: 16px;
  height: 16px;
}
.navigation-offcanvas-link.is-back-link, .navigation-offcanvas-link.is-home-link {
  background-color: var(--rc-bg);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
  border-radius: 0;
  border-bottom: 1px solid var(--rc-border);
  margin: 0;
  padding-inline: var(--rc-space-5);
  justify-content: flex-start;
}
.navigation-offcanvas-link.is-current-category {
  color: var(--rc-primary);
  font-weight: var(--rc-fw-bold);
}
.offcanvas-cart .cart-item {
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-3);
  margin-bottom: var(--rc-space-3);
}
.breadcrumb {
  font-size: var(--rc-fs-xs);
  margin-bottom: var(--rc-space-4);
  padding: 0;
  background: transparent;
}
.breadcrumb a {
  color: var(--rc-muted);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--rc-primary);
  text-decoration: underline;
}
.breadcrumb .breadcrumb-item.active, .breadcrumb .breadcrumb-link.is-active {
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
}
/*
 * Das letzte Glied ist der Produktname – teils über achtzig Zeichen lang.
 * Ungekürzt schob er den Pfad in eine zweite Zeile und drückte die Galerie
 * nach unten. Gekürzt bleibt der Pfad einzeilig; der vollständige Name steht
 * ohnehin zwei Zentimeter darunter als Überschrift.
 */
.rc-breadcrumb__current .breadcrumb-title {
  display: inline-block;
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
@media (max-width: 767px) {
  .rc-breadcrumb__current .breadcrumb-title {
    max-width: 20ch;
  }
}
/*
 * Angebote hervorheben.
 *
 * Rot ist im Farbsystem für Aktionen reserviert (§3) – genau ein Punkt in der
 * Navigation trägt es. Wären es mehrere, wäre keiner mehr betont.
 *
 * Das Prozentzeichen steht als eigenes Abzeichen davor, nicht im Linktext:
 * So bleibt der Text für Vorleseprogramme "Angebote" und wird nicht zu
 * "Prozent Angebote".
 */
.main-navigation-menu .rc-nav-sale.main-navigation-link {
  color: var(--rc-red-deep);
  font-weight: var(--rc-fw-semibold);
}
.main-navigation-menu .rc-nav-sale.main-navigation-link .main-navigation-link-text {
  color: inherit;
}
.main-navigation-menu .rc-nav-sale.main-navigation-link:hover, .main-navigation-menu .rc-nav-sale.main-navigation-link:focus-visible, .main-navigation-menu .rc-nav-sale.main-navigation-link.active {
  color: var(--rc-red-deep);
  border-bottom-color: var(--rc-red-deep);
}
.rc-nav-sale__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--rc-space-2);
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-red-deep);
  color: #fff;
  font-size: 11px;
  font-weight: var(--rc-fw-bold);
  line-height: 1;
  padding-top: 1px;
}
/*
 * Kategorie-Listing: großzügiges Grid, ruhige Filterleiste, klare Sortierung.
 */
/*
 * ── Kategoriekopf ────────────────────────────────────────────────────────
 *
 * Markup: storefront/component/rc/kategoriekopf.html.twig, eingehängt über
 * storefront/block/cms-block-text.html.twig.
 *
 * ── Der Befund, der den Umbau ausgelöst hat ─────────────────────────────
 *
 * Gemessen auf /Sessel/Aufstehsessel/ bei 1440 px, Stand vorher:
 *
 *   Brotkrume      y=249  x=40   1400 px breit
 *   Überschrift    y=329  x=40   1360 px breit, 46 px groß, 53 px hoch
 *   Bild           y=482  x=40    660 px breit, 320 px hoch
 *   Beschreibung   y=482  x=740   660 px breit,  97 px hoch
 *
 * Die Überschrift lief also über die volle Breite, darunter begann ein
 * Zweispalter – und dessen rechte Spalte endete nach 97 von 320 Pixeln.
 * 223 px leere Fläche neben dem Bild, und zwischen Überschrift und Text kein
 * erkennbarer Zusammenhang. Solange das Kategoriebild fehlte, stand links
 * sogar nur ein leerer 320-px-Kasten, den Shopware über `min-height` am
 * Bildbehälter reserviert. Genau dieser Zustand steht im Screenshot des
 * Betreibers.
 *
 * Jetzt tragen Überschrift, Beschreibung und Bild EIN Raster mit gemeinsamer
 * Ober- und Unterkante.
 *
 * ── Warum der Kopf kleiner ist als der Kaufberater darunter ─────────────
 *
 * Der Anreißer `.rc-kb` ist gemessen 816 px hoch, über die volle Breite, mit
 * Sandfläche und weißer Karte darin. Bekäme der Kopf dieselbe Wucht, stünden
 * zwei große Bildflächen direkt übereinander und die Seite hätte zwei
 * Anfänge. Der Kopf misst deshalb rund 320 px, steht ohne eigene Fläche auf
 * dem Seitenhintergrund und ordnet sich damit unter – er benennt die Seite,
 * der Anreißer darunter fordert zu etwas auf.
 */
.rc-katkopf {
  display: grid;
  gap: var(--rc-space-6);
  align-items: center;
}
/*
 * Zwei Spalten erst ab 992 px.
 *
 * Bei 768 px blieben für die Textspalte gerechnet 397 px – eine 46 px große
 * Überschrift wie „Aufstehsessel mit Massage & Wärme" bräuchte darin vier
 * Zeilen. Darunter steht das Bild deshalb unter dem Text.
 *
 * 1,3 zu 1 statt halbe-halbe: Die Textspalte trägt Überschrift UND
 * Beschreibung, die Bildspalte nur das Motiv. Gemessen ergibt das bei
 * 1440 px eine 733 px breite Textspalte und ein 563 px breites Bild – bei
 * 16:9 also 317 px Höhe für den ganzen Kopf.
 */
@media (min-width: 992px) {
  .rc-katkopf--mit-bild {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--rc-space-8);
  }
}
/*
 * `min-width: 0` gegen die Vorgabe `auto` von Rasterspalten: Ohne den Wert
 * kann eine lange Modellbezeichnung ohne Trennmöglichkeit die Spalte über
 * ihre Bahn hinaus aufziehen – und damit die Seite waagerecht scrollen
 * lassen.
 *
 * Die Deckelung auf 46rem gilt auch OHNE Bild. Fällt das Motiv aus, läuft
 * der Text sonst über die vollen 1360 px; der Kopf hätte dann je nach
 * Kategorie zwei völlig verschiedene Zeilenlängen.
 */
.rc-katkopf__text {
  min-width: 0;
  max-width: 46rem;
}
.rc-katkopf__inhalt {
  /*
     * Die sechs Hauptkategorien und /Angebote/ bringen einen
     * Einleitungsabsatz im Blockinhalt mit; Unterkategorien nicht. Beide
     * Fälle müssen gleich aussehen, deshalb steht die Absatzformatierung
     * hier UND in `.rc-katkopf__beschreibung`.
     */
}
.rc-katkopf__inhalt h1, .rc-katkopf__inhalt .h1 {
  margin: 0;
  font-size: var(--rc-fs-3xl);
  line-height: var(--rc-lh-heading);
  letter-spacing: 0;
  color: var(--rc-text);
  text-wrap: balance;
}
.rc-katkopf__inhalt p {
  margin: var(--rc-space-4) 0 0;
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-body);
  color: var(--rc-muted);
}
.rc-katkopf__beschreibung {
  margin-top: var(--rc-space-4);
}
.rc-katkopf__beschreibung p {
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-body);
  color: var(--rc-muted);
}
.rc-katkopf__beschreibung p:last-child {
  margin-bottom: 0;
}
/*
 * Bildspalte.
 *
 * Alle Kategoriebilder liegen als 2560 x 1440 vor, also 16:9. Das
 * Seitenverhältnis der Spalte ist deshalb dasselbe: Es wird nichts
 * beschnitten, und der Platz steht schon vor dem Laden fest – ohne
 * `aspect-ratio` springt der Kaufberater darunter beim Nachladen des Bildes
 * um seine ganze Höhe nach unten.
 *
 * Gestapelt, also unter 992 px, steht das Bild über die volle Breite. Bei
 * 728 px ergäbe 16:9 dort 410 px Höhe – mehr als Überschrift und
 * Beschreibung zusammen, und der Kaufberater darunter rutschte aus dem
 * ersten Bildschirm. Der Deckel von 320 px begrenzt genau diesen Fall;
 * gemessen greift er erst ab 569 px Bildbreite, das Telefon behält damit
 * sein unbeschnittenes 16:9 (350 x 197 px bei 390, 280 x 158 px bei 320).
 */
.rc-katkopf__bild {
  margin: 0;
  min-width: 0;
}
.rc-katkopf__bild img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1.7777777778;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--rc-radius-visual);
  box-shadow: var(--rc-shadow);
}
@media (min-width: 992px) {
  .rc-katkopf__bild img {
    max-height: none;
  }
}
/*
 * ── Der Abstand zum Kaufberater ─────────────────────────────────────────
 *
 * Der Betreiber: der Kopf klebt am Kaufberater. Gemessen stimmt das auf den
 * Pixel – auf /Sessel/Aufstehsessel/ und /Sessel/Pflegesessel/ lag die
 * Oberkante von `.rc-kb` bei allen Breiten von 320 bis 1440 px exakt 0 px
 * unter der Unterkante des Kopfblocks.
 *
 * Die Ursache steht weiter unten in dieser Datei: `.cms-block-sidebar-filter`
 * trägt `display: contents`, damit die Filterleiste über die ganze Liste
 * mitlaufen kann. Ein Element ohne eigenen Kasten hat aber auch keine
 * Ränder – der Blockrhythmus aus `layout/_cms-layout.scss` (48 px mobil,
 * 64 px ab 992 px) fällt an dieser einen Stelle ersatzlos aus. Auf den
 * Hauptkategorien, wo derselbe Kaufberater in einem gewöhnlichen Block
 * steckt, greift er und ergibt gemessen genau diese 64 px.
 *
 * Den Abstand trägt deshalb der Kopf. Er ist derselbe wie überall sonst auf
 * der Seite, nicht größer: Zwei benachbarte Ränder fallen in CSS zusammen,
 * der Wert gewinnt also nicht doppelt, wenn darunter ein gewöhnlicher Block
 * folgt.
 */
.cms-block-text:has(.rc-katkopf) {
  margin-bottom: var(--rc-space-7);
}
@media (min-width: 992px) {
  .cms-block-text:has(.rc-katkopf) {
    margin-bottom: var(--rc-space-8);
  }
}
/*
 * Die leere Hülle des alten Bild-Text-Blocks.
 *
 * Die Vorlage `block/cms-block-image-text.html.twig` gibt auf Kategorieseiten
 * nichts mehr aus – Bild und Beschreibung stehen jetzt im Kopf. Der
 * umgebende `div.cms-block` liegt außerhalb des überschriebenen Twig-Blocks
 * und bleibt deshalb im Markup stehen. Ohne diese Regel kostet er gemessen
 * 64 px Blockabstand plus 40 px Innenabstand, die als Loch zwischen
 * Überschrift und Kaufberater sichtbar wären.
 *
 * `:has()` mit einer Klasse darin, ausdrücklich ohne Attributselektor: Ein
 * Attributselektor in `:has()` bricht den Theme-Build ohne Datei- und
 * Zeilenangabe ab. Dieselbe Form steht weiter unten schon einmal
 * (`.cms-section:has(.cms-block-sidebar-filter)`) und übersetzt sich.
 */
.cms-block-text:has(.rc-katkopf) + .cms-block-image-text {
  display: none;
}
.cms-element-product-listing .cms-listing-row {
  row-gap: var(--rc-space-5);
}
/*
 * ── Zweispaltige Listenseite: links filtern, rechts sehen ────────────────
 *
 * Der Betreiber: „wir muessen den filter doch auf die seite machen neben die
 * produkte."
 *
 * Vorher lief eine waagerechte Filterleiste ueber den Produkten mit. Gemessen
 * am 28.08.2026 bei 1440 px war sie 134 px hoch, auf /Angebote/ 194 px – und
 * sie lief beim Scrollen mit, stand also dauerhaft im Bild. Damit sie
 * ueberhaupt in eine Zeile passte, lag der groessere Teil der Gruppen in
 * einer Schublade „Weitere Merkmale": auf /Elektromobile/ 8 von 14, auf
 * /Angebote/ 17 von 23.
 *
 * In der Spalte hat jede Gruppe ihre eigene Zeile.
 *
 * ── Wie breit die Spalte sein darf ──────────────────────────────────────
 *
 * Gemessen am 28.08.2026 auf /Angebote/, je Fensterbreite die Kartenbreite
 * und die Anzeigebreite des Produktbildes bei verschiedenen Spaltenbreiten:
 *
 *   Fenster   Layout   280 px        300 px        320 px        340 px
 *   1200 px   1160     263 / 170     256 / 165     249 / 160     243 / 155
 *   1280 px   1240     289 / 190     283 / 185     276 / 180     269 / 175
 *   1366 px   1326     318 / 212     311 / 207     305 / 202     298 / 197
 *   1440 px   1360     329 / 220     323 / 215     316 / 211     309 / 205
 *   ab 1600   1360     unveraendert – der Container endet bei 1360
 *
 * Die Frage „ab wann faellt das Raster von drei auf zwei Spalten" hat eine
 * gemessene Antwort, und sie lautet: gar nicht. Die Kachelbreite kommt aus
 * `col-lg-4`, also aus einem Drittel der Hauptspalte – ein Prozentwert, der
 * unabhaengig von der Spaltenbreite immer drei Kacheln nebeneinander stellt.
 * Nachgezaehlt bei 280, 300, 320 und 340 px auf allen sechs Fensterbreiten:
 * durchgehend 3 Spalten.
 *
 * ── Was die 40 px kosten und was sie bringen ────────────────────────────
 *
 * Hier stand: „Bei 320 px Spalte laeuft keine einzige Optionsbeschriftung auf
 * zwei Zeilen (0 von 117 auf /Angebote/), bei 280 px sind es drei." Diese
 * Zahlen sind zeichenweise nachgemessen worden und stimmen nicht. Ein
 * Kommentar mit einer erfundenen Zahl ist schlimmer als keiner; hier steht,
 * was tatsaechlich messbar ist.
 *
 * Gemessen am 28.08.2026 bei einer Fensterbreite von 1440 px – also derselben
 * Seite, nur mit anderer Spaltenbreite. Alle Gruppen aufgeklappt, die Kuerzung
 * auf acht Zeilen aufgehoben. Gezaehlt wurden zweizeilige Beschriftungen ueber
 * die Rechtecke des Textknotens (`Range.getClientRects`, mehr als eine
 * Zeilenhoehe = zweizeilig):
 *
 *                    Optionen   320 px   280 px
 *   /Angebote/          279       18       27
 *   /Sessel/             57       12       12
 *   /Elektromobile/     120        1        7
 *
 * Gekostet wird das mit 13 von 359 Kartenpixeln (-3,6 %) und 9 von 220
 * Bildpixeln. Die Bilddateien sind 400 px breit; bei 211 px wie bei 220 px
 * wird verkleinert, nicht hochgerechnet – der Unterschied ist im Bild nicht
 * zu sehen.
 *
 * Zweizeilige Beschriftungen sind kein Schaden: Die Regel weiter unten stellt
 * sich mit 4 px Abstand zwischen den Zeilen ausdruecklich darauf ein. Der
 * Gewinn ist deshalb kein „nie zweizeilig", sondern 15 Zeilenumbrueche weniger
 * auf diesen drei Seiten – und eine Ankreuzzeile, die 40 px mehr Text traegt,
 * bevor sie umbricht.
 *
 * Deshalb zwei Stufen:
 *
 *   ab 1400 px   320 px   Der Container ist dort mit 1360 px am breitesten;
 *                         die Karte bleibt mit 346 px die breiteste, die es
 *                         auf dieser Seite gibt.
 *   1200-1399    Anteil   Siehe die Notiz direkt darunter – die feste Breite
 *                         von 280 px war in diesem Band zu viel.
 *
 * ── Warum die Spalte unter 1400 px mitwaechst statt fest zu stehen ──────
 *
 * Die 280 px waren hier fest, der Container aber nicht: Er reicht von 1160 px
 * (Fenster 1200) bis 1359 px (Fenster 1399). Am unteren Ende nahm die feste
 * Spalte damit fast ein Viertel der Seite, und die Karte wurde schmaler als
 * auf dem Telefon. Gemessen am 30.08.2026 auf /Rollatoren/, Kartenbreite und
 * Hoehe des Bildbehaelters:
 *
 *   Fenster   Spalte   Hauptteil   Karte     Bild
 *    360 px      –        320       320,0    238,5
 *   1024 px      –        984       308,0    229,5
 *   1200 px    280        848       262,7    195,5   <- schmalste Karte
 *   1280 px    280        928       289,3    215,5
 *   1366 px    280       1014       318,0    237,0
 *   1440 px    320       1008       316,0    235,5
 *
 * Auf dem 1200-px-Laptop war das Produktbild also 18 % kleiner als auf einem
 * 360-px-Telefon – und die Karte gleichzeitig die hoechste von allen
 * (804,8 px gegen 768,6 px bei 1440 px), weil der Produktname im schmaleren
 * Kasten zusaetzlich umbrach.
 *
 * `minmax(240px, 20%)`: Die Spalte nimmt ein Fuenftel der Seite, faellt aber
 * nie unter 240 px. Damit waechst sie mit dem Fenster mit, statt der Karte
 * genau dort Platz wegzunehmen, wo sie am wenigsten hat. Nachgemessen am
 * 30.08.2026 mit im Browser nachgestellter Regel
 * (tools/qa/_liste-simulation.mjs), /Rollatoren/:
 *
 *   Fenster   Spalte      Karte             Bild
 *   1200 px   280 -> 240  262,7 -> 276,0    195,5 -> 205,5
 *   1280 px   280 -> 248  289,3 -> 300,0    215,5 -> 223,5
 *   1366 px   280 -> 265  318,0 -> 322,9    237,0 -> 240,7
 *   1440 px   320 (bleibt) 316,0 (bleibt)   235,5 (bleibt)
 *
 * Die Kartenbreite steigt damit im ganzen Band durchgehend an, statt bei
 * 1200 px einzubrechen; die Stufe bei 1400 px auf 320 px Spalte bleibt, wie
 * sie war. Prozentwerte im Raster beziehen sich auf die Innenbreite des
 * Rasterbehaelters, nicht auf das Fenster – deshalb `%` und nicht `vw`.
 * Kein `clamp()`: Es kommt in diesem Theme sonst nirgends vor, und ein
 * Fehlschlag im Theme-Build meldet weder Datei noch Zeile.
 *
 * `.rc-listing-layout--schmal` bleibt ab 1400 px bei seinen festen 280 px
 * (Regel unten) – nachgemessen auf /Sessel/Relaxsofas/ unveraendert
 * 280px 1048px.
 */
.rc-listing-layout {
  display: grid;
  grid-template-columns: minmax(240px, 20%) minmax(0, 1fr);
  gap: var(--rc-space-6);
  align-items: start;
}
@media (min-width: 1400px) {
  /*
     * Ohne Filterspalte bleibt es bei 280 px. Die breitere Spalte ist mit den
     * Optionszeilen begruendet; stehen dort nur Kategorienamen und der
     * Beratungskasten, waeren die 40 px der Karte weggenommen, ohne dass sie
     * jemandem nuetzen.
     */
  .rc-listing-layout {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  }
  .rc-listing-layout--schmal {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
}
.rc-listing-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-5);
  min-width: 0;
}
.rc-listing-sidebar__box {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-5);
  margin: 0;
}
.rc-listing-main {
  min-width: 0;
}
/*
 * ── Kategoriezweig ──────────────────────────────────────────────────────
 *
 * Er beantwortet „wo bin ich", bevor jemand filtert, und muss dafuer kurz
 * sein: Unter ihm steht jetzt das eigentliche Werkzeug.
 *
 * Gemessen am 28.08.2026 bei 1440 px war der alte Kasten 161 px hoch auf
 * /Rollatoren/, 418 auf /Sessel/, 450 auf /Elektromobile/ und 499 auf
 * /Angebote/. Weg sind davon der Rahmen, die weisse Flaeche und der
 * 24-px-Innenabstand ringsum: Der Zweig ist eine Liste von Verweisen, kein
 * Gegenstand. Die Ueberschrift entfaellt zusaetzlich bei bis zu zwei
 * Eintraegen (Bedingung in der Vorlage).
 */
.rc-listing-zweig__titel {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-listing-zweig__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/*
 * 44 px Mindesthoehe je Zeile – die Vorgabe fuer Klickziele. Der alte Link
 * war gemessen 37 px hoch; die Zeile kostet damit 7 px mehr und ist dafuer
 * mit dem Finger zu treffen.
 */
.rc-listing-zweig__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--rc-space-1) 0;
  color: var(--rc-text);
  text-decoration: none;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
}
.rc-listing-zweig__link:hover, .rc-listing-zweig__link:focus-visible {
  color: var(--rc-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-listing-zweig__link.is-active {
  color: var(--rc-primary);
  font-weight: var(--rc-fw-semibold);
}
/*
 * ── Der Kopf der Filterspalte ───────────────────────────────────────────
 *
 * „Filter", daneben die Zahl der gesetzten und – sobald mindestens einer
 * gesetzt ist – der Rueckweg. Beide fuellt `rc-filterspalte.js` aus dem
 * Chip-Streifen ueber dem Raster; ohne Filter sind sie nicht da.
 *
 * Die Spalte traegt eine eigene weisse Flaeche mit Rahmen. Auf dem warmen
 * Seitengrund (--rc-bg) ist sie damit ein Gegenstand und nicht eine
 * Ansammlung – dieselbe Entscheidung, die schon die alte Leiste getragen hat
 * und die der Betreiber dreimal eingefordert hat.
 */
.rc-filterspalte {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-4);
  min-width: 0;
}
.rc-filterspalte__kopf {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin-bottom: var(--rc-space-2);
  padding-bottom: var(--rc-space-2);
  border-bottom: 1px solid var(--rc-border);
}
.rc-filterspalte__titel {
  margin: 0;
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
}
/*
 * Die Zahl als gefuellte Kapsel.
 *
 * Hier stand `--rc-fs-micro` (16 px) mit der Begruendung, das sei laut
 * Tokenliste die Groesse fuer Zaehler. Gemessen war die Kapsel damit 16 px –
 * die Projektvorgabe fuer die Zielgruppe lautet 17 px Untergrenze, und die
 * Ausnahme im Token gilt Zaehlern, die nur schmuecken. Diese hier ist der
 * einzige Ort, an dem steht, wie viele Filter gesetzt sind; sie ist Auskunft,
 * keine Verzierung. Bei 28 px Kapselhoehe kostet der Wechsel auf 17 px
 * nichts.
 *
 * Die eigene Regel fuer `[hidden]` ist noetig: `display: inline-flex` aus
 * dieser Regel schlaegt sonst das `display: none` aus dem Standardblatt des
 * Browsers, und die leere Kapsel bliebe als Punkt stehen.
 */
.rc-filterspalte__zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding-inline: var(--rc-space-2);
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-accent);
  color: #fff;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-bold);
  line-height: 1;
}
.rc-filterspalte__zahl[hidden] {
  display: none;
}
/*
 * Die gespiegelte Trefferzahl unter dem Kopf der Spalte.
 *
 * Sie steht da, seit die Seite nach einem Filterklick nicht mehr an den
 * Rasteranfang springt: Gemessen lag die frisch geschriebene Zahl ueber dem
 * Raster nach einem Klick in der siebten Gruppe von /Angebote/ bei -34 px,
 * also ausserhalb des Fensters. Wer unten in der Spalte klickt, braucht die
 * Rueckmeldung dort, wo er hinsieht.
 *
 * Zurueckhaltend gesetzt: Sie bestaetigt, sie wirbt nicht.
 */
.rc-filterspalte__treffer {
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  hyphens: manual;
  -webkit-hyphens: manual;
}
.rc-filterspalte__treffer[hidden] {
  display: none;
}
.rc-filterspalte__reset {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--rc-space-2);
  border: 0;
  background-color: transparent;
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rc-filterspalte__reset:hover, .rc-filterspalte__reset:focus-visible {
  color: var(--rc-primary-dark);
}
.rc-filterspalte__reset[hidden] {
  display: none;
}
/*
 * ── Die Gruppen als Zeilen untereinander ────────────────────────────────
 *
 * Der Kern gibt in der Spaltenform (`sidebar: true`) bereits die richtige
 * Bauform aus: Bootstrap-Collapse statt schwebendem Dropdown. Was hier
 * zurueckgenommen wird, sind seine Masse aus der waagerechten Leiste.
 */
.filter-panel {
  border: 0;
  padding: 0;
  margin: 0;
}
.filter-panel-items-container {
  margin-bottom: 0;
  gap: 0;
}
.filter-panel-item {
  margin: 0;
  width: 100%;
}
.filter-panel-item + .filter-panel-item {
  border-top: 1px solid var(--rc-border);
}
/*
 * Die Gruppenzeile: Name links, Zaehler und Winkel rechts.
 *
 * Sie ist keine Schaltflaeche mehr, sondern eine Ueberschrift, auf die man
 * tippen kann – deshalb ohne Flaeche und ohne Rahmen. In der Leiste war der
 * Schalter ein Gegenstand unter vielen; in der Spalte ist die Flaeche schon
 * da, und ein Kasten im Kasten waere eine Ebene zu viel.
 */
.filter-panel-item-toggle {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--rc-space-2) 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  text-align: left;
}
.filter-panel-item-toggle:hover, .filter-panel-item-toggle:focus-visible {
  background-color: transparent;
  color: var(--rc-primary);
}
/*
 * Der aufgeklappte Zustand ausdruecklich mit drei Klassen im Selektor.
 *
 * Der Kern setzt in `_filter-panel.scss:113-125` auf
 * `.is--sidebar .filter-panel-item-toggle[aria-expanded='true']` einen
 * Rahmen, eine abgeschnittene Rundung und seine eigene Primaerfarbe
 * (Spezifitaet 0-2-1). Eine Regel mit weniger Gewicht verloere dagegen –
 * und der gruene Rahmen des Kerns saesse mitten in der Spalte.
 */
.filter-panel.is--sidebar .filter-panel-item-toggle[aria-expanded="true"] {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--rc-primary);
}
.filter-panel.is--sidebar .filter-panel-item-toggle[aria-expanded="true"] .icon.icon-filter-panel-item-toggle, .filter-panel.is--sidebar .filter-panel-item-toggle[aria-expanded="true"] .icon.icon-filter-panel-item-toggle svg {
  color: var(--rc-primary);
}
.rc-filterknopf__name {
  margin-right: auto;
}
.filter-panel-item-toggle .icon.icon-filter-panel-item-toggle {
  margin-left: 0;
  color: var(--rc-muted);
}
/*
 * ── Die Zahl am zugeklappten Schalter ───────────────────────────────────
 *
 * Befund: Ob in „Farbe" zwei Werte gewaehlt sind, war am zugeklappten
 * Schalter nicht zu sehen. Der Kern legt die Zahl zwar an
 * (`filter-multi-select.plugin.js:250` schreibt `(2)` in
 * `.filter-multi-select-count`), gestaltet sie aber nicht.
 *
 * `:not(:empty)` statt einer Zustandsklasse am Schalter: Der Kern setzt
 * keine, und `:has()` mit Attributselektor sprengt in diesem Projekt den
 * Theme-Build.
 *
 * KEINE gefuellte Kapsel wie im Kopf der Spalte. Der Kern schreibt die Zahl
 * einschliesslich Klammern: `counter.textContent = '(' + n + ')'`
 * (filter-multi-select.plugin.js:250). In einer runden Kapsel sah „(1)" im
 * Bild aus wie ein Versehen; als farbiger, halbfetter Zusatz hinter dem
 * Gruppennamen liest es sich als das, was es ist. Den Text zu aendern hiesse,
 * das Kern-Plugin zu ueberschreiben – fuer eine Klammer zu viel Aufwand und
 * eine Bruchstelle beim naechsten Shopware-Update.
 */
.filter-multi-select-count:not(:empty) {
  display: inline-flex;
  align-items: center;
  color: var(--rc-secondary);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-bold);
  line-height: 1.2;
}
/*
 * ── Das aufgeklappte Optionsfeld ────────────────────────────────────────
 *
 * Der Kern deckelt es auf `max-height: 200px` mit eigener Bildlaufleiste
 * (`_filter-panel.scss:56-58`) und legt in der Spaltenform einen gruenen
 * Rahmen darum (`:104-108`). Beides gehoert zur waagerechten Leiste, in der
 * das Feld schwebte.
 *
 * Hier steht es im Fluss unter seiner Ueberschrift und darf so hoch werden,
 * wie es ist – die Laenge begrenzt stattdessen die Kuerzung auf acht Zeilen
 * weiter unten. Ein Deckel mit zweiter Bildlaufleiste in einer Seite, die
 * ohnehin scrollt, ist fuer diese Zielgruppe eine Falle.
 */
.filter-panel-item-dropdown {
  min-width: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0 0 var(--rc-space-2);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.filter-panel.is--sidebar .filter-panel-item-dropdown {
  min-width: 0;
  border: 0;
  border-radius: 0;
}
/*
 * Die Ueberschrift IM Feld gibt es nur noch in der schwebenden Bauform, die
 * dieses Theme nirgends mehr aufruft. Die Regel bleibt, damit eine fremde
 * Vorlage, die `sidebar: false` durchreicht, nicht ohne Gestalt dasteht.
 */
.rc-filterblatt__titel {
  margin: 0 0 var(--rc-space-3);
  padding-bottom: var(--rc-space-2);
  border-bottom: 1px solid var(--rc-border);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
}
/*
 * Die Optionen stehen untereinander, eine Zeile je Wahl.
 *
 * In der waagerechten Leiste war das Feld 838 px breit und die Liste ein
 * Umbruch ueber drei bis vier Spalten. In einer 320 px schmalen Spalte gibt
 * es keine zweite Spalte: „Golden Integral Sesselschutz fuer XXXL Sessel"
 * ist bei 17 px gemessen 368 px breit und passt schon einspaltig nicht in
 * eine Zeile.
 */
.filter-multi-select-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  /*
     * 4 px zwischen zwei Zeilen.
     *
     * Bei einzeiligen Optionen genuegt die Zeilenhoehe: 44 px Klickflaeche um
     * 29 px Text lassen von selbst Luft. Zweizeilige Optionen fuellen ihren
     * Kasten dagegen aus – gemessen auf /Sessel/ stehen „2-Motorig (keine
     * Aufstehfunktion)" und „2-Motorig mit Aufstehfunktion" untereinander
     * ohne einen Pixel dazwischen und lesen sich als ein Block.
     */
}
.filter-multi-select-list > li {
  min-width: 0;
}
.filter-multi-select-list > li + li {
  margin-top: var(--rc-space-1);
}
/*
 * ── Hoechstens acht Optionen, dann „Alle N anzeigen" ────────────────────
 *
 * Gemessen am 28.08.2026 auf /Angebote/: „Gewicht (kg)" hat 65 Optionen,
 * „Farbe" 46, „Ausfuehrung" 30, „Sitzbreite (cm)" 22, „Reichweite (km)" 19,
 * „Belastbarkeit (kg)" 16. Bei 44 px je Zeile waere „Gewicht (kg)" allein
 * 2.860 px hoch – laenger als das Produktraster daneben.
 *
 * Acht Zeilen sind 352 px und damit auf einem 768 px hohen Fenster am Stueck
 * zu sehen. `nth-child(n+9)` und nicht `nth-child(n+9):not([hidden])`: Die
 * Suche im Feld darueber setzt `hidden` an den Zeilen, und beide Wege duerfen
 * sich nicht ins Gehege kommen – deshalb nimmt das Skript beim Suchen die
 * Kuerzungsklasse ganz weg.
 */
.rc-filterliste--gekuerzt > li:nth-child(n+9) {
  display: none;
}
.rc-filterblatt__mehr {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--rc-space-2);
  border: 0;
  background-color: transparent;
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rc-filterblatt__mehr:hover, .rc-filterblatt__mehr:focus-visible {
  color: var(--rc-primary-dark);
}
.rc-filterblatt__mehr[hidden] {
  display: none;
}
/*
 * ── Das Suchfeld in langen Gruppen ──────────────────────────────────────
 *
 * Ab zwoelf Optionen. Acht sichtbare von neun ist eine Kleinigkeit, acht von
 * 65 ist eine Suche.
 */
.rc-filtersuche {
  margin-bottom: var(--rc-space-2);
}
.rc-filtersuche__feld {
  min-height: var(--rc-control-md);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  font-size: var(--rc-fs-sm);
}
.rc-filterblatt__leer {
  margin: 0 0 var(--rc-space-2);
  padding-inline: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-filterblatt__leer[hidden] {
  display: none;
}
/*
 * Keine Silbentrennung in Optionen.
 *
 * `body { hyphens: auto }` aus `_typography.scss:24` ist im Fliesstext
 * richtig und in einer schmalen Auswahlliste falsch: Gemessen entstanden
 * daraus „Inkontinenzaufl-age in Blau" und „2-Sitzer elekt-risch" – keine
 * Woerter, nach denen jemand sucht. In der 320-px-Spalte greift die Trennung
 * oefter als in der 838 px breiten Leiste, die Regel ist hier also wichtiger
 * als vorher. `manual` laesst nur Trennungen zu, die im Text selbst stehen;
 * `overflow-wrap: normal` verhindert zusaetzlich den harten Bruch mitten im
 * Wort.
 */
.filter-multi-select-list-item .filter-multi-select-item-label, .filter-multi-select-list-item label, .filter-property-select-list-item .filter-multi-select-item-label, .filter-property-select-list-item label, .filter-rating-select-list-item .filter-multi-select-item-label, .filter-rating-select-list-item label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  border-radius: var(--rc-radius-control);
  padding-inline: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-heading);
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}
.filter-multi-select-list-item .filter-multi-select-item-label:hover, .filter-multi-select-list-item label:hover, .filter-property-select-list-item .filter-multi-select-item-label:hover, .filter-property-select-list-item label:hover, .filter-rating-select-list-item .filter-multi-select-item-label:hover, .filter-rating-select-list-item label:hover {
  background-color: var(--rc-primary-soft);
}
.filter-multi-select-list-item .form-check, .filter-property-select-list-item .form-check, .filter-rating-select-list-item .form-check {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: 0;
  padding: 0;
  min-height: 44px;
}
.filter-multi-select-list-item .form-check-input, .filter-property-select-list-item .form-check-input, .filter-rating-select-list-item .form-check-input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
}
.filter-multi-select-list-item .form-check-label, .filter-property-select-list-item .form-check-label, .filter-rating-select-list-item .form-check-label {
  flex: 1 1 auto;
}
/*
 * ── Die Fokusmarke am Ankreuzfeld ───────────────────────────────────────
 *
 * Befund vom 28.08.2026, mit der Tabulatortaste ertastet: Das Kaestchen
 * zeigte nur einen Ring in rgb(247, 235, 229) – Kontrast 1,17:1 gegen Weiss,
 * also praktisch unsichtbar. Zum Vergleich im selben Durchlauf:
 * Gruppenschalter 7,49:1, „Alle N anzeigen" 4,81:1, Chips 7,49:1. Die
 * Projektvorgabe fuer Bedienelemente lautet 3:1.
 *
 * Die Ursache liegt NICHT in der Kern- oder Bootstrap-Formatierung, wie
 * zunaechst vermutet, sondern in einer eigenen Regel dieses Themes:
 * `components/_forms.scss:114` setzt an `.form-check .form-check-input` ein
 * `&:focus { box-shadow: 0 0 0 3px var(--rc-secondary-soft) }` – der weiche
 * Terrakotta-Ton, gedacht als Fuellung, nicht als Marke. Mit drei Klassen im
 * Selektor schlaegt diese Regel die allgemeine `input:focus-visible` aus
 * `base/_focus.scss`.
 *
 * Hier wird die Fokusform des Themes fuer die Filter zurueckgeholt: dieselben
 * 2 px in `--rc-secondary` mit 2 px Abstand wie in `base/_focus.scss`, nichts
 * Eigenes. Gemessen 4,81:1 gegen Weiss.
 *
 * Die Regel steht nicht in `_forms.scss`, obwohl der Ring von dort kommt:
 * Diese Datei gehoert einem anderen Arbeitsbereich. `.filter-panel` als
 * Anker greift ueberall, wo Filter stehen – in der Spalte, in der Schublade
 * (dorthin wird das Panel als Zeichenkette kopiert) und in der Suche.
 * Gleiche Spezifitaet wie die Regel in `_forms.scss` (0-3-0); den Ausschlag
 * gibt die Reihenfolge in `base.scss`, in der `layout/listing` nach
 * `components/forms` steht.
 *
 * `:focus` UND `:focus-visible`: Chrome setzt `:focus-visible` an einem mit
 * der Maus angeklickten Ankreuzfeld nicht – ohne den ersten Zweig bliebe der
 * weiche Ring dort stehen.
 */
.filter-panel .form-check-input:focus, .filter-panel .form-check-input:focus-visible {
  outline: 2px solid var(--rc-secondary);
  outline-offset: 2px;
  box-shadow: none;
  border-color: var(--rc-primary);
}
/*
 * ── Preisspanne ─────────────────────────────────────────────────────────
 *
 * Zwei benannte Felder mit Platzhaltern aus der echten Aggregation, darueber
 * ein Satz mit der tatsaechlichen Spanne.
 */
.rc-filterblatt__spanne {
  margin: 0 0 var(--rc-space-3);
  padding-inline: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-spanne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
  padding-inline: var(--rc-space-2);
  max-width: 460px;
}
/*
 * 100 px Grundbreite, nicht 160.
 *
 * Gerechnet und nachgemessen fuer die schmalste Stelle. Bei 280 px
 * Spaltenbreite bleiben nach Rahmen (2), Innenabstand der Spalte (32) und
 * Innenabstand der Zeile (16) noch 230 px. Zwei Felder zu 160 px brauchen mit
 * 12 px Abstand 332 px – sie brachen um, der Preisfilter war zwei Zeilen hoch.
 *
 * Der erste Versuch stand auf 110 px: 2 x 110 + 12 = 232 px, also zwei Pixel
 * zu viel. Gemessen am 28.08.2026 auf /Sessel/ und /Angebote/ bei 1280 px
 * standen die Felder deshalb weiterhin untereinander, bei 1440 px (320 px
 * Spalte) nebeneinander. Mit 100 px sind es 212 px und beide Stufen tragen
 * „von" und „bis" nebeneinander wie auf einem Fahrplan.
 */
.rc-spanne__feld {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-1);
  margin: 0;
  min-width: 0;
}
.rc-spanne__marke {
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-spanne__eingabe {
  display: flex;
  align-items: center;
  gap: var(--rc-space-1);
  padding-right: var(--rc-space-2);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  /*
     * ── Der Rahmen traegt die Fokusmarke, nicht das Feld ────────────────
     *
     * Das Eingabefeld selbst ist rahmenlos und liegt IN diesem Kasten; eine
     * Marke an ihm saesse innerhalb der sichtbaren Umrandung. Deshalb
     * `:focus-within` am Kasten.
     *
     * Befund vom 28.08.2026, mit der Tabulatortaste ertastet: Die Regel
     * `&:focus { box-shadow: none }` weiter unten nahm den einzigen Marker
     * weg, ohne einen zu setzen – die Preisfelder „von" und „bis" zeigten
     * gemessen weder `outline` (0px none) noch `box-shadow` (none), also gar
     * nichts.
     *
     * Werte aus `base/_focus.scss`, nicht neu erfunden: 2 px in
     * `--rc-secondary`, 2 px Abstand. Der Ton misst 4,81:1 gegen Weiss und
     * liegt damit ueber der Projektvorgabe von 3:1 fuer Bedienelemente.
     */
  /*
     * Das Waehrungszeichen steht IN der Zeile, nicht davorgeklebt.
     *
     * Der Kern haengt es absolut an die untere rechte Ecke des Feldes
     * (`_filter-range.scss:47-56`: `position: absolute; bottom: 1px; right:
     * 1px`) – gedacht fuer ein 28 px hohes Eingabefeld. Bei 48 px Hoehe und
     * einer Beschriftung darueber landete das „€" dadurch unterhalb der
     * Grundlinie der Zahl.
     */
}
.rc-spanne__eingabe:focus-within {
  outline: 2px solid var(--rc-secondary);
  outline-offset: 2px;
}
.rc-spanne__eingabe .form-control {
  min-height: var(--rc-control-md);
  border: 0;
  background-color: transparent;
  font-size: var(--rc-fs-base);
  min-width: 0;
}
.rc-spanne__eingabe .form-control:focus, .rc-spanne__eingabe .form-control:focus-visible {
  box-shadow: none;
  outline: none;
}
.rc-spanne__eingabe .filter-range-unit {
  position: static;
  flex: 0 0 auto;
  height: auto;
  padding: 0;
  background-color: transparent;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1;
}
.filter-boolean .form-check {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  min-height: 48px;
  margin: 0;
  padding: 0;
}
.filter-boolean .form-check-input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
}
.filter-boolean .filter-boolean-label {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
}
/*
 * ── Der Beratungskasten laeuft mit – aber nur, wenn er ganz hineinpasst ──
 *
 * Der Betreiber: „mache das unsicher wir beraten sie gerne sticky aber nur
 * wenn es nicht abschneidet."
 *
 * Ein klebendes Element, das hoeher ist als der Platz unter dem Kopf, klemmt
 * seine Oberkante fest und seine Unterkante bleibt unerreichbar – hier waere
 * das die Telefonnummer, also genau das, wofuer der Kasten da ist. Deshalb
 * zwei Bedingungen:
 *
 *   min-width  1200px   darunter ist die Seite einspaltig; dort gibt es
 *                       nichts zum Mitlaufen.
 *   min-height  760px   gerechnet: klebender Kopf 354 px (hoechster Wert,
 *                       gemessen auf /Angebote/ mit Aktionsleiste) + 16 px
 *                       Abstand + 261 px Kastenhoehe + 16 px unten = 647 px.
 *
 * Der Kasten steht am ENDE der Spalte. Das ist keine Kosmetik: Ein klebendes
 * Element verlaesst den Fluss, seine Geschwister ruecken nicht nach und
 * verschwinden unter ihm. Genau das ist am 24.08.2026 schon einmal passiert,
 * damals mit dem Kategoriezweig. Als letztes Kind kann er nichts verdecken.
 *
 * `align-items: stretch` am Raster ist die Voraussetzung: Mit `start` ist die
 * Spalte so hoch wie ihr Inhalt, und ein klebendes letztes Kind hat null Weg.
 *
 * Seit die Filter in der Spalte stehen, ist sie oft laenger als das
 * Produktraster. Dann bestimmt sie selbst die Zeilenhoehe, es gibt keinen Weg
 * zum Mitlaufen mehr, und der Kasten steht einfach am Ende der Spalte. Das
 * ist kein Fehler, sondern der Normalfall bei vielen Filtergruppen – und
 * abschneiden kann er dabei nichts.
 */
/*
 * ── Warum `position: sticky` bis zum 28.08.2026 wirkungslos war ─────────
 *
 * Der Shopware-Kern setzt `.cms-section { overflow: hidden }`
 * (component/_cms-sections.scss:8). Damit ist die Sektion ein
 * Scrollbehaelter, und ein klebendes Element darin bezieht sich auf diesen
 * Behaelter statt auf das Fenster. Da der Behaelter selbst nie scrollt,
 * klebte nichts: Gemessen auf /Rollatoren/ bei 1440 x 900 lief der
 * Beratungskasten mit dem Fluss aus dem Bild (scrollY 2400 -> Oberkante
 * 378 px, 3200 -> -422, 4000 -> -1222).
 *
 * `clip` schneidet genauso ab wie `hidden`, erzeugt aber keinen
 * Scrollbehaelter. Dieselbe Ausnahme steht bereits auf der Produktseite
 * (`layout/_pdp.scss`, `.is-ctl-product .cms-section`) und traegt dort die
 * mitlaufende Ueberschrift des Angabenbereichs.
 *
 * Ueber die Controller-Klassen am `<body>` und NICHT ueber `:has()`: Ein
 * `:has()` mit Attributselektor sprengt in diesem Projekt den Theme-Build
 * ohne Datei- und Zeilenangabe. `:has(.rc-listing-layout)` waere zwar
 * uebersetzbar, traefe aber dieselbe Menge Sektionen – ohne den Grund zu
 * nennen.
 *
 * BEIDE Klassen, nicht nur `.is-ctl-navigation`: Die Startseite laeuft ueber
 * denselben Controller und traegt gemessen `is-ctl-navigation is-act-home`,
 * die Kategorieseiten `is-ctl-navigation is-act-index`. Die Startseite mit
 * ihren dreizehn Vollbild-Sektionen bleibt damit unberuehrt. (Gegengeprueft
 * waere sie es auch verkraftet: `clip` aenderte dort weder Seitenhoehe
 * (10.740 px) noch Querlauf, und ein klebendes Element gibt es in keiner
 * ihrer Sektionen. Die engere Regel ist trotzdem die ehrlichere – sie gilt
 * genau dort, wo sie begruendet ist.)
 *
 * Nur ab 1200 px, also nur dort, wo die Seite ueberhaupt zwei Spalten hat.
 * Darunter bleibt die Sektion unveraendert im Kernzustand.
 *
 * Gegenprobe zum Beschneiden, gemessen auf /Rollatoren/, /Sessel/,
 * /Angebote/ und /Elektromobile/ bei 1440 x 900: Ein absichtlich 4000 px
 * breites Kind in der Sektion erzeugte weder vorher noch nachher Querlauf
 * (scrollWidth 1440 = innerWidth 1440). Was `hidden` abschnitt, schneidet
 * `clip` ebenso ab.
 */
@media (min-width: 1200px) {
  /*
     * Die Trefferzahl laeuft in der Spalte mit.
     *
     * Erst damit taugt sie als Rueckmeldung: Gemessen nach einem Filterklick
     * in der siebten Gruppe von /Angebote/ stand der Kopf der Spalte bei
     * -1057 px, also weit ueber dem Fensterrand – dieselbe Lage wie die Zahl
     * ueber dem Raster, wegen der die Zeile ueberhaupt entstanden ist.
     *
     * Sie laeuft nur so weit mit, wie die Filterkarte reicht: Wer an den
     * Filtern vorbei ist, hat nichts mehr zu bedienen, dem muss auch nichts
     * mehr gemeldet werden.
     *
     * ── Warum `--rc-kopf-kompakt` und nicht `--rc-klebehoehe-oben` ──────
     *
     * Gemessen am 28.08.2026 auf /Angebote/ bei 1440 x 900, scrollY 2000:
     * Die Unterkante des klebenden Kopfes liegt bei 146 px, und genau das
     * steht auch in `--rc-kopf-kompakt` (von `rcInitStickyHeader` an einer
     * unsichtbaren Kopie gemessen). `--rc-klebehoehe-oben` stand dagegen auf
     * 239 px – es ist der Streifen fuer den TASTATURFOKUS (Kopf + Leiste +
     * 12 px Luft, `layout/_header.scss`) und mit Absicht grosszuegiger. Als
     * Klebeabstand benutzt liesse er 93 px leeren Raum unter dem Kopf.
     *
     * Eigene Flaeche, weil die Optionszeilen sonst darunter durchlaufen; die
     * warme Tonung unterscheidet die Zeile von einer Gruppenzeile, ueber der
     * sie steht.
     */
  /*
     * Angesprungene Filtergruppen landen nicht unter der Kapsel.
     *
     * `scroll-margin-top` war gemessen 0 px. Wer per Tastatur in eine Gruppe
     * springt oder wer nach dem Aufklappen dorthin gerollt wird, landete
     * deshalb hinter Kopfleiste und Kapsel. Der Wert ist die Summe aus beidem:
     * Unterkante der klebenden Kopfleiste (--rc-kopf-kompakt, gemessen
     * 146 px), 8 px Luft und die 74 px hohe Kapsel.
     */
  .is-ctl-navigation.is-act-index .cms-section {
    overflow: clip;
  }
  .rc-filterspalte__treffer {
    position: sticky;
    top: calc(var(--rc-kopf-kompakt, 146px) + var(--rc-space-2));
    z-index: 1;
    margin-inline: calc(var(--rc-space-4) * -1);
    padding: var(--rc-space-2) var(--rc-space-4);
    background-color: var(--rc-primary-soft);
    color: var(--rc-text);
    font-weight: var(--rc-fw-semibold);
    /*
         * Eine Kante nach unten, damit die Kapsel als DAVOR liegend zu lesen
         * ist.
         *
         * Sie ist 73,8 px hoch und deckend; eine zugeklappte Filtergruppe ist
         * 49 px hoch. Beim Scrollen verschwindet deshalb regelmaessig eine
         * ganze Gruppe darunter. Gemessen am 30.08.2026 auf /Angebote/ bei
         * 1440 x 900, scrollY 700 bis 2600 in Schritten von 8 px: An 28 von
         * 199 Stellen (14 %) lag mindestens eine Gruppe VOLLSTAENDIG im Band
         * der Kapsel – betroffen waren Belastbarkeit, Bereifung, Bremse,
         * Faltbar / Zerlegbar, Farbe, Geschwindigkeit, Gewicht und Groesse.
         * Dazwischen liegen die Stellen, an denen ein Gruppenname waagerecht
         * halbiert erscheint.
         *
         * Das Verdecken selbst laesst sich nicht wegnehmen – das ist die Natur
         * eines klebenden Elements, und nach 8 bis 24 px Weiterscrollen ist
         * die Gruppe wieder da. Was sich wegnehmen laesst, ist der Eindruck
         * eines Anzeigefehlers: Gemessen standen `box-shadow: none` und
         * `border-bottom: 0px none`, die Kapsel hatte also keinerlei Kante,
         * und ein angeschnittener Gruppenname sah nach kaputtem Bild aus.
         */
    border-bottom: 1px solid var(--rc-border);
    box-shadow: var(--rc-shadow-sm);
  }
  .rc-filterspalte .filter-panel-item {
    scroll-margin-top: calc(var(--rc-kopf-kompakt, 146px) + var(--rc-space-2) + 74px);
  }
}
@media (min-width: 1200px) and (min-height: 760px) {
  /*
     * `--rc-kopf-kompakt` statt `--rc-klebehoehe-oben`, aus demselben Grund
     * wie bei der Trefferzeile eine Regel weiter oben: Gemessen liegt die
     * Unterkante des klebenden Kopfes bei 146 px, `--rc-klebehoehe-oben`
     * stand auf 239 px. Der Kasten klebte damit bei 255 statt bei 162 px –
     * 93 px leerer Raum ueber ihm, an der Stelle, an der die Spalte am
     * knappsten ist.
     */
  .rc-listing-layout {
    align-items: stretch;
  }
  .rc-listing-consult {
    position: sticky;
    top: calc(var(--rc-kopf-kompakt, 146px) + var(--rc-space-4));
  }
}
.rc-listing-consult {
  background-color: var(--rc-primary-soft);
  border-color: transparent;
}
.rc-listing-consult__title {
  margin: 0 0 var(--rc-space-1);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
}
.rc-listing-consult__text {
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  line-height: var(--rc-lh-body);
}
/*
 * Die Telefonnummer ist auf dieser Seite das wichtigste Klickziel und war das
 * kleinste: gemessen am 26.08.2026 34 Pixel hoch bei 320 und 390 px, 37 bei
 * 768 und 1440 px. Die Vorgabe fuer die Zielgruppe lautet 44 x 44.
 */
.rc-listing-consult__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--rc-space-2);
  color: var(--rc-primary);
  text-decoration: none;
  font-size: var(--rc-fs-lg);
}
.rc-listing-consult__phone:hover, .rc-listing-consult__phone:focus-visible {
  color: var(--rc-primary-dark);
  text-decoration: underline;
}
.rc-listing-consult__phone .icon {
  width: 20px;
  height: 20px;
}
.rc-listing-consult__phone .icon > svg {
  width: 20px;
  height: 20px;
}
/*
 * ── Kopfzeile ueber dem Raster ──────────────────────────────────────────
 *
 * Links die Trefferzahl, rechts die Sortierung – und auf schmalen Fenstern
 * dazwischen der Knopf zur Filter-Schublade.
 *
 * Die Trefferzahl bleibt in Fliesstextgroesse (19 px) und halbfett: Sie ist
 * die Orientierung, wie lang die Liste ist, kein Kleingedrucktes. Sie steht
 * jetzt links statt rechts – in der zweispaltigen Seite ist die linke Kante
 * der Hauptspalte die Kante, an der das Auge ohnehin steht.
 */
.rc-listing-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-3);
  margin-bottom: var(--rc-space-3);
}
.rc-listing-count {
  margin: 0;
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  color: var(--rc-text);
}
.rc-listing-kopf__werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-3);
}
/*
 * ── Sortierung als eigenes Geraet ───────────────────────────────────────
 *
 * Gemessener Ausgangspunkt: ein Auswahlfeld 260 x 48 px, ohne Beschriftung,
 * ohne Symbol, in derselben Form wie die Filterschalter daneben. Der
 * Betreiber: „bei der sortierung weiss man gar nicht das es sortiert".
 *
 * Drei Unterschiede, jeder einzeln lesbar:
 *   1. ein Symbol (Pfeile auf und ab) – die Filter tragen keines
 *   2. das Wort „Sortierung:" davor
 *   3. ein Gehaeuse, in dem Marke und Feld zusammen sitzen
 */
.rc-sortierung {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  min-height: var(--rc-control-md);
  padding-left: var(--rc-space-3);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
}
.rc-sortierung__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: 0;
  white-space: nowrap;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-muted);
  cursor: pointer;
}
.rc-sortierung__marke .icon {
  color: var(--rc-primary);
}
.rc-sortierung__feld {
  margin: 0;
}
.rc-sortierung__feld .form-select {
  min-height: var(--rc-control-md);
  padding-left: 0;
  border: 0;
  background-color: transparent;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-sortierung__feld .form-select:focus {
  box-shadow: none;
  outline: 2px solid var(--rc-primary);
  outline-offset: 2px;
}
/*
 * ── Die gesetzten Filter als Chips ueber dem Raster ─────────────────────
 *
 * Ohne Chips keine Zeile: `ListingPlugin._buildLabels()` setzt bei null
 * Filtern `innerHTML = ''`, die Vorlage gibt den Behaelter ohne Leerzeichen
 * aus – `:empty` trifft also in beiden Zustaenden und die Zeile kostet
 * nichts.
 *
 * Die Beschriftung „Ihre Auswahl:" kommt aus einer CSS-Variablen, die die
 * Vorlage setzt. Ein Kind darin wuerde `:empty` brechen, ein Geschwister
 * daneben waere ohne `:has()` nicht mitzuverstecken – und `:has()` mit
 * Attributselektor sprengt hier den Theme-Build. Erzeugte Inhalte zaehlen
 * fuer `:empty` nicht mit.
 */
.rc-listing-chips {
  align-items: center;
  row-gap: var(--rc-space-2);
  margin-bottom: var(--rc-space-4);
}
.rc-listing-chips::before {
  content: var(--rc-auswahl-text, "") ":";
  align-self: center;
  margin-right: var(--rc-space-1);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-muted);
}
.filter-panel-active-container:empty {
  display: none;
}
/*
 * ── Unter 1200 px: die Filter hinter einen Knopf ────────────────────────
 *
 * Dort ist die Seite einspaltig. Die Filterspalte gehoert dann NICHT als
 * langer Block ueber oder unter die Produkte – auf /Angebote/ waeren das 23
 * Gruppen –, sondern hinter den Knopf neben der Sortierung, der sie als
 * Seitenpanel oeffnet. Shopware bringt dafuer `offcanvas-filter` mit.
 *
 * Der Kern zieht seine Grenze bei 992 px (`_filter-panel.scss:196-202`).
 * Hier liegt sie bei 1200 px, weil die zweite Spalte genau dort endet;
 * zwischen 992 und 1199 px stuende die Spalte sonst als langer Block in der
 * einspaltigen Seite.
 *
 * ── Warum auch der Rest der Seitenleiste nach unten wandert ─────────────
 *
 * Gemessen am 26.08.2026 als Abstand vom Seitenanfang bis zur ersten
 * Produktkachel, 390 x 844:
 *
 *   /Sessel/                 2755 px vorher   1834 px nachher   -921 px
 *   /Elektromobile/          2817 px          1833 px           -984 px
 *   /Sessel/Aufstehsessel/   2655 px          1750 px           -905 px
 *
 * Verloren geht dabei nichts: Die Kopfzeile klebt, und ihr Menueknopf oeffnet
 * die Kategorie, in der man gerade steht – derselbe Zweig, einen Tipp
 * entfernt, an jeder Stelle der Seite.
 */
@media (max-width: 1199.98px) {
  /*
     * Beide Reihenfolgen stehen ausdruecklich da. Ein Rasterkind ohne `order`
     * liegt auf 0; die 2 allein auf der Leiste ergaebe dasselbe Bild, aber
     * die Absicht waere nur halb aufgeschrieben.
     */
  /*
     * Der Knopf ist hier der EINZIGE Weg zu den Filtern. Gemessen war er beim
     * Kern 48 px hoch – die Benchmark verlangt fuer Hauptknoepfe 56.
     * `width: auto` nimmt die Vollbreite des Kerns zurueck: Er steht neben
     * der Sortierung, nicht ueber ihr.
     */
  .rc-listing-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rc-space-5);
  }
  .rc-listing-main {
    order: 1;
  }
  .rc-listing-sidebar {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rc-listing-sidebar > * {
    flex: 1 1 260px;
  }
  .rc-filterspalte {
    display: none;
  }
  .btn.filter-panel-wrapper-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
    width: auto;
    min-height: var(--rc-control-lg);
    padding-inline: var(--rc-space-4);
  }
}
@media (min-width: 1200px) {
  .btn.filter-panel-wrapper-toggle {
    display: none;
  }
}
/*
 * Unter 768 px ist fuer Filterknopf und Sortierung nebeneinander kein Platz:
 * 350 px Inhaltsbreite gegen 452 px, die die beiden dort belegen. Beide
 * bekommen deshalb je eine volle Zeile mit grosser Klickflaeche.
 */
@media (max-width: 767.98px) {
  .rc-listing-kopf {
    align-items: stretch;
    gap: var(--rc-space-2);
  }
  .rc-listing-kopf__werkzeuge {
    width: 100%;
    gap: var(--rc-space-2);
  }
  .btn.filter-panel-wrapper-toggle, .rc-sortierung {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .rc-sortierung {
    justify-content: flex-start;
    min-height: var(--rc-control-lg);
  }
  .rc-sortierung__feld {
    flex: 1 1 auto;
    min-width: 0;
  }
  .rc-listing-chips {
    margin-bottom: var(--rc-space-3);
  }
}
/*
 * ── Die Filter-Schublade auf schmalen Geraeten ──────────────────────────
 *
 * `offcanvas-filter.plugin.js` kopiert den Inhalt von
 * `#filter-panel-wrapper` als Zeichenkette hinein. Kopiert wird also die
 * ganze Spalte mit `.filter-panel.is--sidebar` – alle Regeln oben greifen
 * dort unveraendert.
 *
 * Der Kopf der Spalte („Filter", Zahl, Zuruecksetzen) steht ausdruecklich
 * AUSSERHALB des Wrappers und wird deshalb nicht mitkopiert: Die Schublade
 * bringt mit `.filter-panel-offcanvas-header` bereits eine eigene
 * Ueberschrift mit.
 */
.offcanvas-filter .filter-panel {
  padding: 0 var(--rc-space-5) var(--rc-space-5);
}
.offcanvas-filter .filter-panel-offcanvas-title {
  font-size: var(--rc-fs-xl);
  color: var(--rc-text);
}
/*
 * ── Der Schliessknopf der Schublade ─────────────────────────────────────
 *
 * Gemessen am 28.08.2026: 27 x 27 px bei 390 px Fensterbreite, 29 x 29 bei
 * 768 und 1024. Die Projektvorgabe fuer Klickziele lautet 44 x 44 – und
 * dieser Knopf ist der einzige Weg aus der Schublade heraus.
 *
 * `.btn-close` von Bootstrap traegt sein Kreuz als Hintergrundbild in fester
 * Groesse; die Flaeche waechst darum herum, das Zeichen bleibt gleich gross
 * und sitzt mittig.
 */
.offcanvas-filter .btn-close.filter-panel-offcanvas-close {
  width: 44px;
  height: 44px;
  background-position: center;
  flex: 0 0 auto;
}
/*
 * ── Der Fuss der Filter-Schublade ───────────────────────────────────────
 *
 * Gemessen am 28.08.2026 bei 390 px auf /Sessel/: In der Schublade stand nach
 * dem Setzen eines Filters ein Haken, aber weder die Zahl der gesetzten
 * Filter noch ein „Zuruecksetzen" – beides liegt im Kopf der Spalte, und der
 * steht ausserhalb von `#filter-panel-wrapper` und wird deshalb nicht
 * mitkopiert. Der Kunde musste die Schublade schliessen und den Chip-Streifen
 * finden. Auf dem Telefon ist die Schublade der EINZIGE Filterweg; ein
 * fehlender Rueckweg wiegt dort schwerer als am Schreibtisch.
 *
 * Der Fuss steht deshalb IM Wrapper und wird mitkopiert. In der offenen
 * Spalte am Schreibtisch ist er unsichtbar – dort stehen Zahl und Rueckweg
 * schon im Kopf, eine Zeile hoeher. Sichtbar wird er allein innerhalb von
 * `.offcanvas-filter`.
 */
.rc-filterschub__fuss {
  display: none;
}
.offcanvas-filter .rc-filterschub__fuss {
  display: block;
  position: sticky;
  bottom: 0;
  margin-top: var(--rc-space-4);
  padding: var(--rc-space-3) var(--rc-space-5);
  background-color: var(--rc-surface);
  border-top: 1px solid var(--rc-border);
}
.offcanvas-filter .rc-filterschub__treffer {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.offcanvas-filter .rc-filterschub__treffer[hidden] {
  display: none;
}
.offcanvas-filter .rc-filterschub__zeile {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  min-height: 44px;
}
.offcanvas-filter .rc-filterschub__zahl {
  margin: 0;
  margin-inline-end: auto;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.offcanvas-filter .rc-filterschub__zahl[hidden] {
  display: none;
}
/*
 * ── Suchergebnisse: dieselbe Spalte ─────────────────────────────────────
 *
 * `page/search/search-pagelet.html.twig` gibt zwei Geschwister aus – erst das
 * Filter-Element, dann das Produktlisting. Ein Umbau der Vorlage kaeme dieser
 * Datei nicht zu; das Raster auf `.search-page` stellt beide trotzdem
 * nebeneinander.
 *
 * Die Ueberschrift der Suche spannt ueber beide Spalten. Unter 1200 px bleibt
 * alles einspaltig, und die Spalte selbst ist ohnehin ausgeblendet – dort
 * fuehrt derselbe Knopf in dieselbe Schublade wie auf der Kategorieseite.
 *
 * `minmax(240px, 20%)` wie bei `.rc-listing-layout` weiter oben, aus demselben
 * Grund und mit derselben Messung: Gemessen am 30.08.2026 auf
 * /search?search=rollator ergibt die feste 280-px-Spalte dieselben Karten wie
 * auf der Kategorieseite – 262,7 px bei 1200 px Fenster (Bild 195,5 px),
 * 289,3 px bei 1280 px, 318,0 px bei 1366 px, 316,0 px bei 1440 px, gegen
 * 308,0 px bei 1024 px ganz ohne Spalte. Die Suche zeigt dieselben Karten wie
 * eine Kategorie; ein anderes Mass an derselben Fensterbreite waere ein
 * Unterschied ohne Grund.
 */
@media (min-width: 1200px) {
  .search-page {
    display: grid;
    grid-template-columns: minmax(240px, 20%) minmax(0, 1fr);
    gap: var(--rc-space-6);
    align-items: start;
  }
  .search-page > .search-headline {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1400px) {
  .search-page {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  }
}
/*
 * ── Ohne Filterspalte gehoert dem Listing die ganze Breite ──────────────
 *
 * `element/cms-element-sidebar-filter.html.twig` gibt `.rc-suche-filter` nur
 * aus, wenn es etwas zu filtern gibt (Aggregationen vorhanden UND Treffer
 * oder gesetzter Filter). Eine Suche ohne Treffer hat keine Aggregationen –
 * dann steht in `.search-page` nur die Ueberschrift und das Listing.
 *
 * Das Raster oben bleibt aber zweispaltig, und das Listing rutschte damit in
 * die SCHMALE erste Spalte, die eigentlich fuer die Filter gedacht ist.
 * Gemessen am 30.08.2026 auf /search?search=xyzq, Breite und linke Kante von
 * `.rc-empty`:
 *
 *   1024 px   620 px bei x=202   (einspaltig, mittig – so soll es sein)
 *   1200 px   280 px bei x=20    Raster 280px 848px, rechte Spalte leer
 *   1366 px   280 px bei x=20    Raster 280px 1014px
 *   1440 px   320 px bei x=40    Raster 320px 1008px
 *   1920 px   320 px bei x=280
 *
 * 848 bis 1014 px – 73 % der Seitenbreite – blieben rechts leer, waehrend der
 * Kasten mit Ueberschrift, Absatz und zwei Knoepfen mit weniger als der
 * halben vorgesehenen Breite auskommen musste. Die H1 darueber spannt ueber
 * beide Spalten und stand deshalb woanders als der Kasten unter ihr.
 *
 * Andersherum aufgeschrieben statt mit `:has()`: Die Vollbreite ist der
 * Normalfall, die zweite Spalte die Ausnahme – und die Ausnahme ist genau
 * dann da, wenn `.rc-suche-filter` als Geschwister davorsteht. Ein
 * `:has(.rc-suche-filter)` am Elternteil traefe dieselbe Menge und waere
 * uebersetzbar (die Falle in diesem Projekt ist `:has()` MIT einem
 * Attributselektor darin), nennt den Grund aber nicht: Es geht nicht um das
 * Vorhandensein irgendwo, sondern darum, ob die Spalte NEBEN dem Listing
 * steht. Der Geschwisterselektor sagt genau das.
 *
 * Nachgemessen am 30.08.2026 mit im Browser nachgestellter Regel
 * (tools/qa/_liste-simulation.mjs): /search?search=xyzq bei 1200 px –
 * `.rc-empty` 280 -> 620 px, x 20 -> 290 (mittig); bei 1440 px – 320 -> 620 px,
 * x 40 -> 410. /search?search=rollator behaelt bei 1440 px sein Raster
 * 320px 1008px und die 1008 px breite Trefferspalte.
 */
@media (min-width: 1200px) {
  .search-page > .cms-element-product-listing-wrapper {
    grid-column: 1 / -1;
  }
  .search-page > .rc-suche-filter ~ .cms-element-product-listing-wrapper {
    grid-column: auto;
  }
}
.rc-suche-filter {
  min-width: 0;
}
/*
 * ── Aktive Filter-Chips ──────────────────────────────────────
 *
 * Vorher trugen sie nur Farbe. Höhe und Innenabstand kamen aus dem Kern
 * (`--bs-btn-padding-y: 0.125rem`, Zeilenhöhe 1.625rem) – zusammen rund 34 px
 * und damit unter der 44-px-Vorgabe. Das „x" zum Entfernen war entsprechend
 * klein.
 */
.filter-active {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--rc-space-3);
  /*
     * Ein Chip darf seinen Behaelter nicht sprengen.
     *
     * Ueber dem Raster der Kategorieseite ist der Streifen 1.000 px breit und
     * es fiel nie auf. In der 320 px schmalen Filterspalte der SUCHSEITE
     * schon: Gemessen am 28.08.2026 auf /search?search=rollator lief der Chip
     * „fuer Modell Eris - Ceres SE - Mercurius - Carpo" auf beiden Seiten aus
     * der Spalte heraus und war vorn wie hinten angeschnitten – anzuklicken
     * war das Kreuz zum Entfernen damit nicht mehr sicher.
     *
     * Umbrechen statt abschneiden: Ein gekuerzter Filtername sagt nicht mehr,
     * was gesetzt ist, und genau dafuer steht der Chip da.
     */
  max-width: 100%;
  white-space: normal;
  text-align: start;
  background-color: var(--rc-secondary-soft);
  color: var(--rc-primary);
  border: 1px solid var(--rc-secondary);
  border-radius: var(--rc-radius-pill);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
}
.filter-active:hover, .filter-active:focus-visible {
  background-color: var(--rc-primary-soft);
  border-color: var(--rc-primary);
  color: var(--rc-primary-dark);
}
/*
 * „Alle zurücksetzen" trug `btn-outline-danger` – Rot ist im Shop die Farbe
 * für Fehler und Warnungen, nicht für einen normalen Rückweg. Gleiche Gestalt
 * wie die Chips, nur ohne Füllung, damit die Reihe als eine Gruppe liest.
 */
.btn.filter-reset-all {
  --bs-btn-color: var(--rc-primary);
  --bs-btn-border-color: var(--rc-border-strong);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--rc-primary-dark);
  --bs-btn-hover-border-color: var(--rc-primary);
  --bs-btn-hover-bg: var(--rc-primary-soft);
  --bs-btn-active-color: var(--rc-primary-dark);
  --bs-btn-active-border-color: var(--rc-primary);
  --bs-btn-active-bg: var(--rc-primary-soft);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--rc-space-4);
  border-radius: var(--rc-radius-pill);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-medium);
  /*
     * Rahmen und Fläche ausdrücklich, nicht nur über die Bootstrap-Variablen.
     *
     * Gemessen am 27.08.2026: `--bs-btn-border-color` stand korrekt auf
     * #cfc6b9, die tatsächliche `border-color` war aber
     * `rgba(0, 0, 0, 0)` – irgendwo weiter oben in der Kaskade wird
     * `border-color` direkt gesetzt und schlägt damit die Variable, die
     * Bootstrap nur in der `border`-Kurzform benutzt. Der Knopf sah dadurch
     * aus wie ein Textlink zwischen den Chips.
     *
     * Auf der sandfarbenen Leiste braucht er eine eigene Fläche, sonst
     * verschwimmt er mit ihr.
     */
  border-color: var(--rc-border-strong);
  background-color: var(--rc-surface);
}
.btn.filter-reset-all:hover, .btn.filter-reset-all:focus-visible {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
}
.sorting .form-select {
  min-height: var(--rc-control-md);
  font-weight: var(--rc-fw-semibold);
}
.pagination .page-link {
  color: var(--rc-primary);
  border-color: var(--rc-border);
  min-width: 44px;
  min-height: var(--rc-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination .page-item.active .page-link {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}
.cms-element-category-navigation, .category-headline {
  color: var(--rc-text);
}
/*
 * Blätterleiste: umbrechen statt abschneiden.
 *
 * Gemessen bei 375 Pixel auf /Angebote/ (18 Seiten): Die Liste ist 335 Pixel
 * breit, die neun Einträge belegen 396. `flex-wrap: nowrap` ließ die letzten
 * Einträge außerhalb des Fensters enden – und weil ein Vorfahre waagerecht
 * beschneidet, gab es auch kein Querscrollen. Der Sprung auf die letzte Seite
 * war schlicht nicht erreichbar.
 */
@media (max-width: 767px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--rc-space-2);
  }
}
/*
 * ════════════════════════════════════════════════════════════════════════
 * FREMDKÖRPER – gehört nach layout/_pdp.scss
 * ════════════════════════════════════════════════════════════════════════
 *
 * Diese drei Regeln betreffen die PRODUKTSEITE, nicht die Listenseite. Sie
 * stehen hier, weil `layout/_pdp.scss` in der Nacht vom 26.08.2026 von einer
 * anderen Hand bearbeitet wurde und ein zweiter Schreiber darin einen
 * Zusammenstoß erzeugt hätte. Sie sind so geschrieben, dass sie sich
 * unverändert nach `layout/_pdp.scss` verschieben lassen: Der Selektor wiegt
 * zwei Klassen und gewinnt gegen die Kernregel unabhängig davon, in welcher
 * Reihenfolge die Dateien übersetzt werden. (`base.scss` bindet `listing` VOR
 * `pdp` ein – bei gleicher Spezifität würde `pdp` sonst gewinnen.)
 *
 * ── Der Befund ──────────────────────────────────────────────────────────
 *
 * `vendor/shopware/storefront/…/scss/page/product-detail/_tabs.scss:1-2`
 * setzt `.product-detail-tabs-content { display: none }` und nimmt es erst ab
 * `sm` (576 px) zurück. Unterhalb davon ist der gesamte Angabenbereich weg –
 * Beschreibung, technische Daten, Maße, Lieferung, Fragen, Herstellerangaben.
 * Der Kern reicht ihn dort über `data-off-canvas-tabs` in einer Schublade
 * nach (`offcanvas-tabs.plugin.js`, greift nur im Viewport XS).
 *
 * Gemessen am 26.08.2026 auf /Schwerlastrollator-Vermeiren-Goliat/8002783,
 * gezählt als sichtbare Überschriften von 21 im Dokument:
 *
 *   Breite    vorher        nachher       Seitenhöhe vorher → nachher
 *   320 px     2 / 21       19 / 21        6.153 →  16.036 px
 *   390 px     2 / 21       19 / 21        5.643 →  14.308 px
 *   575 px     2 / 21       19 / 21        5.279 →  12.369 px
 *   576 px    19 / 21       19 / 21       11.730 → unverändert
 *   768 px    19 / 21       19 / 21       11.220 → unverändert
 *
 * Ebenso die technischen Daten: 0 von 11 Zeilen sichtbar, danach 11 von 11.
 * Kein Querscrollen bei 320 und 390 px, vorher wie nachher.
 *
 * Die beiden verbleibenden unsichtbaren Überschriften sind auf jeder Breite
 * dieselben: die vom Theme absichtlich ausgeblendete H1-Dopplung im
 * Beschreibungstext und die Überschrift „Anmelden" im Bewertungsformular,
 * das hinter dem zweiten Reiter liegt.
 *
 * Eine Schublade ist für diese Zielgruppe der falsche Ort: Sie ist 370 px
 * breit, scrollt in sich selbst, hat keine Sprungmarken und keinen Weg
 * zurück außer dem Schließkreuz. Wer 8.800 Pixel Angaben darin lesen soll,
 * liest sie nicht.
 *
 * ── Warum der Beschreibungsreiter verschwindet ──────────────────────────
 *
 * Steht der Inhalt in der Seite, ist der Reiter darüber eine Falle: Ein Tipp
 * darauf öffnet weiterhin die Schublade des Kerns – gemessen mit demselben
 * Text, 4.040 Zeichen doppelt. Der Reiter kann nicht entschärft werden, ohne
 * `element/cms-element-product-description-reviews.html.twig` anzufassen
 * (fremde Datei), also wird er auf schmalen Geräten ausgeblendet.
 *
 * Verloren geht dabei nichts: Der Angabenbereich trägt seine eigene
 * Überschrift („Angaben zu diesem Produkt") und darunter vier Sprungmarken.
 * Der Reiter „Bewertung schreiben" bleibt stehen – dahinter liegt das
 * Formular, das auf schmalen Geräten nur über die Schublade erreichbar ist,
 * und dort ist die Schublade richtig: kurzer Inhalt, eine Handlung.
 *
 * Zurück bleibt das leere <li> des Beschreibungsreiters. Es ist 0 px hoch;
 * über den Abstand der Reiterliste kostet es 24 px. Das Element ganz zu
 * entfernen ginge nur über `:nth-child` – ein Selektor, der an der Stelle
 * eines Reiters hängt statt an seiner Bedeutung, und der beim Abschalten der
 * Bewertungen die ganze Reiterzeile leerräumen würde.
 */
@media (max-width: 575.98px) {
  /*
     * Der Kopf der Schublade darf nicht mit in die Seite.
     *
     * `component/product/description.html.twig` und `component/review/
     * review.html.twig` erweitern beide `utilities/offcanvas.html.twig`. Jede
     * Reiterseite bringt deshalb einen `.offcanvas-header` mit einem Knopf
     * „Menü schließen" mit – gedacht für den Moment, in dem der Kern ihren
     * Inhalt in die Schublade kopiert.
     *
     * Der Kern blendet ihn ab 576 px aus (`page/product-detail/_tabs.scss:
     * 16-17`), darunter nicht: Dort ist der Inhalt normalerweise gar nicht in
     * der Seite. Jetzt ist er es – und ohne diese Regel steht bei 390 px ein
     * Knopf „Menü schließen" (209 x 48 px, gemessen bei y = 2551) mitten
     * zwischen den Sprungmarken und dem Beschreibungstext, der nichts
     * schließt, weil nichts offen ist.
     *
     * Der Selektor greift ausdrücklich nur innerhalb von
     * `.product-detail-tabs`. Die Kopie, die der Kern beim Tippen auf
     * „Bewertung schreiben" in die Schublade legt, hängt an <body> und behält
     * ihren Schließknopf – ohne ihn käme man aus der Schublade nicht heraus.
     */
  .product-detail-tabs .product-detail-tabs-content {
    display: block;
  }
  .product-detail-tabs .product-detail-tab-navigation-link.description-tab {
    display: none;
  }
  .product-detail-tabs .offcanvas-header {
    display: none;
  }
}
/*
 * Produktdetailseite (§22) – hochwertig, ruhig, klare Entscheidungshilfe.
 * Galerie links (~58 %), Buybox rechts (~42 %, sticky).
 */
/*
 * Kein eigenes Spaltenverhältnis mehr.
 *
 * Hier stand eine Regel auf `.cms-block-gallery-buybox .col-lg-6`. Der Kern
 * rendert in diesem Block aber col-lg-7 (Galerie) und col-lg-5 (Buybox) – die
 * Regel hat nie gegriffen. Gemessen: Galeriespalte 817px, flex-basis auto,
 * max-width 100 %, also reine Bootstrap-Standardwerte. 7/12 sind 58,3 %, damit
 * praktisch das angestrebte Verhältnis; die Regel behauptete eine Steuerung,
 * die es nicht gab, und wäre beim nächsten Feinjustieren angefasst worden.
 */
/*
 * ── Galerie ──────────────────────────────────────────────────────────────
 *
 * Alles zur Galerie steht in DIESEM Block. Früher gab es zwei Abschnitte mit
 * denselben Selektoren (hier und am Dateiende); pro Eigenschaft gewann die
 * spätere Regel, und welcher Wert am Ende galt, war nur noch über
 * document.styleSheets zu ermitteln. Genau daraus entstand der 454px-Fehler.
 */
.cms-element-image-gallery {
  /*
     * Höhenobergrenze zwischen Telefon und Zweispalter.
     *
     * Unter 992px steht die Galerie über die volle Breite, und die Bühne ist
     * quadratisch (aspect-ratio weiter unten). Aus der Breite wird damit
     * Höhe – und zwar die ganze. Gemessen am 30.08.2026 am Island bei
     * 768 x 1024 (Tablet hochkant):
     *
     *     Bühne          y = 364,  727 x 727 px
     *     Vorschaureihe  y = 1107, 134 px
     *     Hersteller     y = 1307
     *     Produktname    y = 1344
     *     Preis          y = 1687
     *     Faltlinie      y = 1024
     *
     * Im ersten Bildschirm standen damit Aktionsleiste, Kopfzeile, Brotkrume
     * und ein angeschnittenes Foto – kein Name, kein Preis. Bei 991 x 900 war
     * es schlimmer: 950 px Bühne in einem 900 px hohen Fenster, das Foto ist
     * dort nicht einmal ganz zu sehen.
     *
     * Die Grenze hängt an der FENSTERHÖHE, nicht an einer festen Pixelzahl:
     * Was in den ersten Bildschirm passt, entscheidet die Höhe. 42vh ist
     * nachgemessen der Wert, bei dem Hersteller UND Produktname über die
     * Faltlinie rutschen (768 x 1024: Hersteller y = 950, Name y = 986; vorher
     * 1307 und 1344). Der Preis bleibt darunter – einspaltig steht der
     * Kaufbereich hinter der ganzen Galerie, das ist ohne Umbau des
     * CMS-Blocks nicht zu ändern.
     *
     * Begrenzt wird die GALERIE, nicht die Bühne: An der Bühne hängt der
     * Bildlauf von tiny-slider (die Bahn rechnet in Prozent der Spurbreite),
     * und die Vorschaureihe ist ein Geschwister der Bühne – sie würde sonst
     * breiter stehen als das Bild darüber. object-fit steht auf contain, es
     * geht also kein Bildinhalt verloren, das Foto wird nur kleiner.
     *
     * Unter 576px bleibt alles wie es war: Dort ist die Bühne gemessen nur
     * 320 px hoch, und eine Grenze würde das Foto auf dem Telefon ohne Not
     * verkleinern. `min-width` fängt sehr flache Fenster ab (Querformat).
     */
  /*
     * Die Bühne ist quadratisch – und zwar innen.
     *
     * Bei einem einzigen Bild rendert der Kern gar keinen Slider, sondern nur
     * `.gallery-slider-single-image`. Der früher hier gepflegte Selektor
     * `.gallery-slider-single-image-container` existiert im Markup nicht;
     * Produkte mit einem Bild standen deshalb ganz ohne Rahmen da
     * (gemessen 726x520 statt 726x726).
     */
  /*
     * Sicherung gegen "Pfeile außerhalb".
     *
     * Die Pfeile stehen in diesem Theme im Bildrahmen (siehe unten), deshalb
     * steht die Slot-Konfiguration auf navigationArrows:'inside'. Stellt sie
     * jemand im Adminbereich zurück auf 'außerhalb', legt der Kern 25px
     * Innenabstand links und rechts auf Slider UND Bühnenrahmen. Gemessen
     * kostete das 50px Bühnenbreite (726 statt 776 bei 1440px, 285 statt 335
     * bei 375px) und machte die Bildfläche 50px schmaler als hoch – bei
     * aspect-ratio auf dem Rahmenmaß fällt der Innenabstand innen an.
     * Eine Klasse mehr Gewicht als die Kern-Regel, damit kein !important
     * nötig ist.
     */
  /*
     * Grundregel für ALLE Galeriebilder – auch die im Zoom-Modal.
     *
     * Das Modalbild liegt in `.image-zoom-container` als Flex-Element. Ohne
     * `width/height: auto` bleibt seine Breite auf der Eigengröße stehen,
     * während max-height es in der Höhe kappt: gemessen 1440x800 bei einem
     * quadratischen Bild, also verzerrt. Diese Regel hält es bei 800x800.
     * Die Bühne bekommt gleich darunter ihre eigene, spezifischere Regel.
     */
  /*
     * Das Hauptbild füllt die Bühne.
     *
     * Vorher: width/height:auto plus max-width/max-height:100 %. Ein ersetztes
     * Element mit auto-Maßen rendert in seiner Eigengröße, und die kommt bei
     * srcset+sizes aus dem sizes-Attribut – gemessen 454x454 in einer
     * 674x724-Fläche, also 42 % Ausnutzung. max-* kann verkleinern, nie
     * vergrößern. Mit width/height:100 % gibt das Layout die Größe vor.
     *
     * Der Innenabstand sitzt am Bild selbst, nicht am Rahmen: object-fit
     * rechnet gegen die Inhaltsfläche, und der Kern positioniert das Bild bei
     * is-contain absolut mit inset:0 – ein Innenabstand am Rahmen würde von
     * einem absolut positionierten Kind schlicht überlaufen.
     *
     * KEIN mix-blend-mode: verfälscht Infografiken und Bilder mit Hintergrund.
     */
  /*
     * Bei `is-contain` – der Darstellungsart dieses Shops – wird aus dem
     * Innenabstand ein Positionsabstand.
     *
     * Optisch ist das dasselbe: Der Kern positioniert das Bild hier absolut
     * mit inset:0 (component/_gallery-slider.scss). Ob die 24 px innen am
     * Bild abgezogen werden oder außen von seiner Position, ergibt in beiden
     * Fällen die gemessenen 726 px sichtbare Aufnahme in einer 774 px großen
     * Bühne.
     *
     * Der Unterschied liegt in dem, was die Lupe misst. Sie rechnet mit
     * `image.getBoundingClientRect()` (magnifier.plugin.js, `_getImageSize`).
     * Mit Innenabstand war dieses Rechteck 774 px breit, die sichtbare
     * Aufnahme darin aber nur 726 px – die Lupe rechnete die Zeigerposition
     * gegen einen Rahmen, der 48 px größer ist als das Bild. Gemessen am
     * Aufstehsessel Grandano bei 1440 px: Steht der Zeiger auf 20 % der
     * Bildbreite, liegt er in Wahrheit über 18,0 % der Aufnahme; der
     * Ausschnitt war um 2 % der Bildbreite (14,5 px Aufnahme, bei
     * dreifacher Vergrößerung 44 px auf dem Schirm) daneben. In der Mitte
     * stimmte es, zu den Rändern hin lief es auseinander – genau das Gefühl
     * von „der Ausschnitt passt nicht zum Zeiger".
     *
     * NICHT über einen Innenabstand am Rahmen: Der Bezugsrahmen eines
     * absolut positionierten Kindes ist die Polsterkante des Elternteils,
     * die Polsterung selbst gehört noch dazu. Gemessen blieb das Bild dabei
     * bei 774 px – ein Innenabstand am Rahmen wirkt hier nicht.
     *
     * Die Regel wiegt drei Klassen und steht damit über der Grundregel
     * darüber; die Darstellungsarten `cover` und `standard` behalten ihren
     * Innenabstand, dort positioniert der Kern anders.
     *
     * Was sich am Ruhebild ändert, nachgemessen über einen Pixelvergleich
     * der Bühne (776 × 776, Kontrollaufnahme ohne Änderung: 0 abweichende
     * Pixel): Das Inhaltsrechteck bleibt exakt gleich (1,1 bis 774,774), die
     * Abweichung liegt ausschließlich auf den Kanten und der mittlere
     * Kantenbetrag sinkt von 8,326 auf 8,122 – 2,4 %. Das ist eine andere
     * Rasterungsphase, keine Verschiebung: Chrome zeichnet das Bild jetzt in
     * eine 725,88 px große Ebene statt in eine 773,88 px große mit
     * Innenabstand.
     */
  /*
     * ── Das Zoomfenster füllt die Bühne ──────────────────────────────────
     *
     * Der Betreiber: „überarbeite auch den bild zoom er ist etwas komisch."
     *
     * Gemessen am 28.08.2026 am Aufstehsessel Grandano, 1440 px:
     *
     *   Bühne              776 × 776 px
     *   Zoomfenster        776 × 450 px   (bei 900 px Fensterhöhe)
     *                      776 × 550 px   (bei 1100 px Fensterhöhe)
     *
     * Das Zoomfenster liegt oben in der Bühne. Unter ihm blieben 326 px, in
     * denen weiter das unvergrößerte Bild stand – eine harte waagerechte
     * Kante quer durch das Produktfoto. Und weil das Plugin den
     * Hintergrundversatz aus der Bühnenbreite rechnet (gemessen: höchstens
     * 1551,75 px bei einem 2327,62 px hohen Hintergrund), waren die unteren
     * 226 px der Aufnahme – 9,7 % ihrer Höhe – im Zoom überhaupt nicht
     * erreichbar. Dazu kam der senkrechte Versatz: Bei einem Zeiger auf 5 %
     * der Bildhöhe zeigte das Fenster die Stelle bei 11,8 %, waagerecht an
     * derselben Stelle dagegen 16,7 %. Waagerecht und senkrecht liefen
     * auseinander.
     *
     * Ursache ist `_setZoomImageSize`: Es deckelt die Höhe auf
     * `window.innerHeight / 2`. Das ist sinnvoll, wenn das Zoombild NEBEN
     * der Galerie in einem eigenen Feld steht; hier liegt es über der
     * Galerie und muss so groß sein wie sie.
     *
     * `!important` ist nötig, weil das Plugin die Höhe bei jeder
     * Mausbewegung als Inline-Stil neu setzt. Nachgemessen mit der Regel:
     * Fenster 776 × 776, größter Versatz 1551,75 + 776 = 2327,62 – also
     * genau die volle Aufnahme, und beide Achsen bilden dieselbe Stelle ab.
     */
  /*
     * Die Blätterpfeile bleiben über dem Zoomfenster sichtbar.
     *
     * Gemessen am 28.08.2026, 1440 px: Die Pfeile stehen mit 44 × 44 px auf
     * halber Höhe im Bild (x 52–96 und 760–804 bei einem Bild von 41–815).
     * Das Zoombild liegt auf z-index 1100 und verdeckte sie – anfassbar
     * blieben sie trotzdem. Führt man den Zeiger dorthin, meldet der Browser
     * `mouseout` am Bildrahmen, und das Plugin beendet den Zoom
     * (`_stopMagnify`). Gemessen: Zeiger auf x = 776, Zoomfenster weg, ohne
     * dass an dieser Stelle etwas zu sehen gewesen wäre.
     *
     * Verhindern lässt sich das Abschalten nur im Plugin. Sichtbar machen
     * lässt sich der Grund hier: Wer den Pfeil sieht, bevor er ihn trifft,
     * erlebt das Ende des Zooms als Folge seiner Bewegung und nicht als
     * Aussetzer. 1101 ist genau eine Stufe über dem Zoombild.
     */
}
@media (min-width: 576px) and (max-width: 991px) {
  .cms-element-image-gallery {
    max-width: 42vh;
    min-width: 320px;
    margin-inline: auto;
  }
}
.cms-element-image-gallery .tns-outer, .cms-element-image-gallery .tns-ovh, .cms-element-image-gallery .tns-inner {
  overflow: hidden;
  border-radius: var(--rc-radius-visual);
}
.cms-element-image-gallery .gallery-slider-item-container, .cms-element-image-gallery .gallery-slider-single-image {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-visual);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-element-image-gallery .base-slider.has-nav-outside {
  padding-left: 0;
  padding-right: 0;
}
.cms-element-image-gallery .gallery-slider.has-nav-outside .gallery-slider-item-container {
  padding: 0;
}
.cms-element-image-gallery .gallery-slider-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cms-element-image-gallery .gallery-slider-item-container .gallery-slider-image, .cms-element-image-gallery .gallery-slider-single-image .gallery-slider-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: var(--rc-space-5);
  object-fit: contain;
}
@media (max-width: 767px) {
  .cms-element-image-gallery .gallery-slider-item-container .gallery-slider-image, .cms-element-image-gallery .gallery-slider-single-image .gallery-slider-image {
    padding: var(--rc-space-3);
  }
}
.cms-element-image-gallery .gallery-slider-item.is-contain .gallery-slider-image, .cms-element-image-gallery .gallery-slider-single-image.is-contain .gallery-slider-image {
  padding: 0;
  inset: var(--rc-space-5);
  width: calc(100% - 2 * var(--rc-space-5));
  height: calc(100% - 2 * var(--rc-space-5));
}
@media (max-width: 767px) {
  .cms-element-image-gallery .gallery-slider-item.is-contain .gallery-slider-image, .cms-element-image-gallery .gallery-slider-single-image.is-contain .gallery-slider-image {
    inset: var(--rc-space-3);
    width: calc(100% - 2 * var(--rc-space-3));
    height: calc(100% - 2 * var(--rc-space-3));
  }
}
.cms-element-image-gallery .magnifier-zoom-image {
  height: 100% !important;
  min-height: 100% !important;
}
.cms-element-image-gallery .base-slider-controls-prev, .cms-element-image-gallery .base-slider-controls-next {
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--rc-border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: var(--rc-shadow-sm);
  color: var(--rc-primary);
  opacity: 1;
}
.cms-element-image-gallery .base-slider-controls-prev:hover, .cms-element-image-gallery .base-slider-controls-next:hover {
  background-color: var(--rc-primary-soft);
  border-color: var(--rc-primary);
}
.cms-element-image-gallery .base-slider-controls-prev {
  left: var(--rc-space-3);
}
.cms-element-image-gallery .base-slider-controls-next {
  right: var(--rc-space-3);
}
.cms-element-image-gallery .base-slider-controls-prev, .cms-element-image-gallery .base-slider-controls-next {
  z-index: 1101;
}
/*
 * ── Vorschaubilder ───────────────────────────────────────────────────────
 *
 * Hier stand kurzzeitig ein CSS-Raster, das dem tiny-slider seine Spur
 * überschrieb. Das Ergebnis waren 17 Pixel breite Kacheln mit 0×0 großen
 * Bildern – der Slider setzt die Breite seiner Elemente selbst, und ein Raster
 * darüber rechnet mit Werten, die er im nächsten Moment wieder überschreibt.
 *
 * Deshalb gilt hier: die BREITE gehört dem Slider (sie kommt aus
 * thumbnailSlider.items, gesetzt in der Twig-Überschreibung), die HÖHE gehört
 * dem Theme. Das ist die einzige Stellschraube, die der Slider nicht anfasst.
 */
.gallery-slider-thumbnails-container {
  margin-top: var(--rc-space-4);
  padding-inline: var(--rc-space-7);
  position: relative;
  /*
     * Die Pfeile gehören IN den Innenabstand, nicht daneben.
     *
     * Hier stand `left: 0` / `right: 0` auf `.base-slider-controls-prev`
     * bzw. `-next` – zwei Klassen. Der Kern setzt dieselbe Eigenschaft mit
     * DREI Klassen (`.gallery-slider-thumbnails-col.is-underneath
     * .gallery-slider-thumbnails-controls-prev { left: -25px }`,
     * component/_gallery-slider.scss:165 ff.) und gewann deshalb jedes Mal.
     * Die Regel hier behauptete eine Steuerung, die es nicht gab.
     *
     * Gemessen am 30.08.2026 am Island (Pfeile 44 x 44 px, aria-label
     * „Vorheriges" / „Nächstes"), Fensterkanten in Klammern:
     *
     *     768 px  – links  -5 bis  39 (aussen), rechts 729 bis 773 (aussen)
     *    1024 px  – links  -5 bis  39 (aussen), rechts 558 bis 602
     *    1440 px  – links  15 bis  59,          rechts 798 bis 842
     *
     * Bei 768 und 1024 px ist der linke Pfeil also nicht anklickbar, bei
     * 768 px auch der rechte nicht – und die Reihe zeigt dort nur fünf von
     * neun Bildern.
     *
     * Jetzt vier Klassen, damit der Wert dieses Themes gilt. `left: 0`
     * setzt den Pfeil an die Innenkante des Behälters; die 48px
     * `padding-inline` darüber sind genau dafür reserviert, die Kacheln
     * werden also nicht verdeckt. Rechnerisch danach: 768 px → 20 bis 64
     * und 704 bis 748, 1024 px → 20 bis 64 und 533 bis 577, 1440 px →
     * 40 bis 84 und 773 bis 817. Nachmessen erst nach dem Theme-Bau.
     */
  /*
     * Der Kern hält die Reihe zusätzlich mit `margin: 0 30px` auf Abstand,
     * damit seine 65px breiten Pfeile daneben passen. Die Pfeile dieses
     * Themes sind 44px breit und sitzen bereits im padding-inline von 48px –
     * die 60px kommen der Reihe zugute (Spur 631 → 691px bei 1440px).
     */
  /*
     * Unter 768px blendet der Kern die Pfeile aus, gewischt wird stattdessen.
     * Der Platz dafür ist dort teuer: 48px Innenabstand und 30px Kern-Rand je
     * Seite waren gemessen 156 von 375 Pixeln, also 42 % der Fensterbreite.
     * Die Kacheln blieben dadurch bei 54px, jetzt sind es 76px.
     */
}
.gallery-slider-thumbnails-container .base-slider-controls-prev, .gallery-slider-thumbnails-container .base-slider-controls-next {
  width: 44px;
  height: 44px;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: 50%;
  box-shadow: none;
  color: var(--rc-primary);
}
.gallery-slider-thumbnails-container.is-underneath .base-slider-controls-prev.gallery-slider-thumbnails-controls-prev {
  left: 0;
}
.gallery-slider-thumbnails-container.is-underneath .base-slider-controls-next.gallery-slider-thumbnails-controls-next {
  right: 0;
}
.gallery-slider-thumbnails-container.is-underneath .tns-outer {
  margin: 0;
}
@media (max-width: 767px) {
  .gallery-slider-thumbnails-container {
    padding-inline: 0;
  }
}
/*
 * Kein eigener Innenabstand für die Spalte der Vorschaureihe.
 *
 * Hier stand `padding: 0 var(--rc-space-3) 0 0`, also 12px nur rechts. Die
 * Bühne darüber steht in `.gallery-slider-col` mit den 20px von Bootstrap.
 * Die Reihe lief dadurch links 20px zu weit hinaus und rechts 8px zu weit
 * hinein: gemessen bei 375px begann sie bei x=0, die Bühne bei x=20, und die
 * vierte Kachel wurde am Fensterrand angeschnitten. Ohne die Regel gilt für
 * beide Spalten derselbe Bootstrap-Wert und die Kanten fluchten.
 */
/*
 * Das äussere Element trägt KEINEN Rahmen.
 *
 * Der Slider legt hier den Abstand zwischen den Kacheln als padding-right ab
 * (gemessen `#tns2 > .tns-item { width: calc(10%); padding-right: 10px }`).
 * Ein Rahmen an dieser Stelle schlösse diese 10px mit ein: die Rahmen stießen
 * aneinander und das Bild säße 5px links aus der Mitte. Hier steht deshalb
 * nur, was der Kern falsch vorgibt – seine feste Höhe von 75px.
 */
.gallery-slider-thumbnails-item {
  height: auto;
}
/*
 * Quadratische Kachel – auf dem inneren Element.
 *
 * Das aspect-ratio stand vorher hier, blieb aber wirkungslos, weil der Kern
 * auf demselben Element height:100% setzt und eine explizite Höhe
 * aspect-ratio immer schlägt. Mit height:auto greift es: gemessen bei 1440px
 * eine 128x128-Kachel statt 110x75, das Bild darin 118x118 statt 55x55 – von
 * 37 % auf 85 % der Kachelfläche.
 */
.gallery-slider-thumbnails-item-inner {
  height: auto;
  aspect-ratio: 1;
  /*
     * Obergrenze für die Kachel.
     *
     * Die Twig-Überschreibung gibt dem Slider so viele Plätze, wie es Bilder
     * gibt, damit die Reihe rechts nicht offen bleibt. Bei zwei Bildern wären
     * das sonst 390px pro Kachel – halb so groß wie das Hauptbild. Mit der
     * Grenze bleibt die Kachel bei höchstens 160px und sitzt mittig in ihrem
     * Platz; bei fünf und mehr Bildern greift sie nie (gemessen 128px bei
     * 1440px Fensterbreite).
     */
  max-width: 160px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rc-space-1);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  overflow: hidden;
  background-color: var(--rc-surface);
  transition: border-color var(--rc-dur-btn) var(--rc-ease), box-shadow var(--rc-dur-btn) var(--rc-ease);
}
/*
 * Hervorhebung ohne Layoutkosten.
 *
 * Vorher wurde der Rahmen im Aktiv- und Hover-Zustand von 1px auf 2px
 * verstärkt. Weil das Bild per max-height am Innenmaß der Kachel hängt,
 * schrumpfte es dabei um 2px – beim Überstreichen der Reihe zappelte gemessen
 * jedes Bild einmal (55 → 53 → 55). Ein Innenschatten verbraucht kein Layout.
 */
.gallery-slider-thumbnails-item.is-active .gallery-slider-thumbnails-item-inner, .gallery-slider-thumbnails-item.tns-nav-active .gallery-slider-thumbnails-item-inner, .gallery-slider-thumbnails-item:hover .gallery-slider-thumbnails-item-inner {
  border-color: var(--rc-primary);
  box-shadow: inset 0 0 0 2px var(--rc-primary);
}
.gallery-slider-thumbnails-image {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
@media (min-width: 992px) {
  .cms-element-buy-box {
    position: sticky;
    top: var(--rc-space-5);
  }
}
.product-detail-buy {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-visual);
  padding: var(--rc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-5);
}
@media (max-width: 991px) {
  .product-detail-buy {
    padding: var(--rc-space-5) var(--rc-space-4);
    margin-top: var(--rc-space-5);
  }
}
.product-detail-buy > [itemprop="offers"] {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-6);
}
.rc-buybox__head {
  display: grid;
  gap: var(--rc-space-2);
}
.rc-buybox__manufacturer {
  margin: 0;
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-buybox__title {
  margin: 0;
  font-size: var(--rc-fs-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rc-text);
  /*
     * Produktnamen werden nicht mitten im Wort getrennt.
     *
     * base/_typography.scss schaltet unter 400 px `hyphens: auto` für alle
     * Überschriften ein, gegen Überlauf. Gemessen am 30.08.2026 bei 360 px
     * (Schriftgrad 23 px): die H1 stand als „Varomed Verbandschuh Dub-" /
     * „lin XXL" – getrennt wird ausgerechnet der Markenbestandteil „Dublin".
     * Bei 1440 px steht dieselbe H1 auf `manual` und bleibt ganz.
     *
     * Der Überlaufschutz braucht die Trennung hier nicht: Auf derselben H1
     * ist `overflow-wrap: break-word` gemessen bereits aktiv, und der ist
     * die härtere Sicherung – er greift genau dann, wenn ein Wort allein
     * breiter ist als die Spalte. Gegengemessen mit `hyphens: manual` an den
     * drei längsten Produktnamen des Sortiments bei 320 UND 360 px
     * Fensterbreite (Dublin XXL, Elektromobil Island, „RehaComfort
     * Aufstehsessel Grandano mit Massage"): waagerechter Überlauf der
     * Überschrift 0 px, der ganzen Seite 0 px.
     *
     * Nur die Produkt-H1, nicht die globale Regel: Die steht in einer Datei,
     * an der gerade eine andere Hand arbeitet, und gilt für alle
     * Überschriften des Shops. Fällt sie dort weg, sagt diese Regel dasselbe
     * noch einmal – sie widerspricht ihr nicht.
     */
}
@media (max-width: 767px) {
  .rc-buybox__title {
    font-size: var(--rc-fs-xl);
  }
}
@media (max-width: 400px) {
  .rc-buybox__title {
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}
.rc-buybox__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
}
.rc-buybox__meta .product-review-rating, .rc-buybox__meta .product-detail-review-rating {
  margin: 0;
}
.rc-buybox__price {
  display: grid;
  gap: var(--rc-space-1);
  padding-bottom: var(--rc-space-4);
  border-bottom: 1px solid var(--rc-border);
}
.product-detail-price, .product-detail-price.with-list-price {
  color: var(--rc-text);
  font-size: var(--rc-fs-3xl);
  font-weight: var(--rc-fw-bold);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}
.product-detail-list-price-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  margin: 0;
  position: static;
}
.product-detail-list-price-wrapper .list-price-price {
  text-decoration: line-through;
}
.product-detail-list-price-wrapper .list-price-percentage {
  display: none;
}
.product-detail-price-container .list-price-badge, .list-price-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: auto;
  white-space: nowrap;
  background-color: var(--rc-red-soft);
  background-image: none;
  color: var(--rc-red-text);
  border-radius: var(--rc-radius-pill);
  padding: 3px var(--rc-space-3);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-bold);
  line-height: 1.4;
  text-indent: 0;
}
.product-detail-tax, .product-detail-tax-link {
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rc-buybox__availability .delivery-information, .product-detail-delivery-information .delivery-information {
  font-size: var(--rc-fs-sm);
  margin: 0;
}
.rc-buybox__availability .delivery-status-indicator, .product-detail-delivery-information .delivery-status-indicator {
  width: 9px;
  height: 9px;
}
.rc-buybox__availability .delivery-available, .product-detail-delivery-information .delivery-available {
  color: var(--rc-success);
}
.product-detail-buy .rc-key-facts {
  margin: var(--rc-space-4) 0 var(--rc-space-5);
}
.rc-buybox__suitable {
  margin: var(--rc-space-4) 0 0;
}
.product-detail-configurator-container {
  margin-top: var(--rc-space-3);
}
.rc-buybox__form {
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-border);
}
.product-detail-buy .rc-key-facts {
  display: grid;
  gap: 0;
  font-size: var(--rc-fs-sm);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  overflow: hidden;
  /*
     * Zwei Blickachsen, nicht drei.
     *
     * `justify-content: space-between` verteilte drei Dinge über 515 Pixel:
     * Häkchen ganz links, Bezeichnung in der Mitte, Wert rechts. Gemessen
     * begann „Belastbarkeit" bei 1048, das Häkchen saß bei 885 – dazwischen
     * ein Loch von 160 Pixeln, und der Blick musste je Zeile zweimal springen.
     *
     * Als Raster bilden Häkchen und Bezeichnung eine linksbündige Einheit,
     * der Wert steht rechts. Die mittlere Spalte nimmt den Rest.
     */
}
.product-detail-buy .rc-key-facts .rc-key-facts__item {
  display: grid;
  /*
         * Die Wertespalte nimmt den Rest, nicht die Bezeichnungsspalte.
         *
         * Mit `auto minmax(0, 1fr) auto` und einem nicht umbrechenden Wert
         * beanspruchte die dritte Spalte die ganze Breite und die mittlere
         * fiel auf null zusammen: Beim AKS Einlegerahmen B4 Compact
         * („Liegefläche 90 × 200 bis 100 × 200 cm") war die Bezeichnung
         * gemessen 0 × 318 Pixel – ein Buchstabe je Zeile.
         *
         * Die Bezeichnung ist kurz und bekommt `auto`, der Wert den Rest und
         * darf umbrechen.
         */
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--rc-space-3);
  padding: var(--rc-space-4) var(--rc-space-5);
  white-space: normal;
}
.product-detail-buy .rc-key-facts .rc-key-facts__item + .rc-key-facts__item {
  border-top: 1px solid var(--rc-border);
}
.product-detail-buy .rc-key-facts .rc-key-facts__item .icon {
  display: none;
}
.product-detail-buy .rc-key-facts .rc-key-facts__item::before {
  margin-right: 0;
  width: 9px;
  height: 15px;
}
.product-detail-buy .rc-key-facts .rc-key-facts__label {
  color: var(--rc-muted);
  text-align: left;
  font-size: var(--rc-fs-sm);
}
.product-detail-buy .rc-key-facts .rc-key-facts__value {
  text-align: right;
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-base);
  white-space: normal;
}
.rc-buybox__suitable {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: 0;
  color: var(--rc-success);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
}
.rc-buybox__suitable .icon {
  color: var(--rc-success);
}
/*
 * Zweite Lieferart unter der Verfügbarkeitszeile.
 *
 * Gebaut wie `.rc-buybox__suitable` daneben – gleicher Rhythmus, gleiche
 * Symbolgröße, gleicher Schriftgrad (17px, die dokumentierte Untergrenze für
 * Metatext). Nicht grün: Das Grün daneben ist die Zusage „passt", diese Zeile
 * ist eine Einschränkung und liest sich in derselben Farbe wie eine zweite
 * Zusage.
 *
 * Der Sprung ins Ziel ist ein Textlink, kein Knopf – er steht in einer Zeile
 * Fließtext. Die 12px oben und unten heben die anklickbare Fläche auf rund
 * 44px Höhe, ohne dass die Zeile schwerer aussieht.
 */
.rc-buybox__delivery-alt {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: var(--rc-space-2) 0 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
}
.rc-buybox__delivery-alt .icon {
  color: var(--rc-muted);
}
.rc-buybox__delivery-alt a {
  display: inline-flex;
  align-items: center;
  padding-block: var(--rc-space-3);
  color: var(--rc-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rc-buybox__delivery-alt a:hover, .rc-buybox__delivery-alt a:focus-visible {
  color: var(--rc-primary);
}
.product-detail-configurator-container {
  display: grid;
  gap: var(--rc-space-4);
}
.product-detail-configurator-group {
  margin: 0;
}
.product-detail-configurator-group-title {
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
  margin-bottom: var(--rc-space-2);
  display: block;
}
.product-detail-configurator-option-label {
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  min-height: var(--rc-control-md);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--rc-space-4);
  margin: 0 var(--rc-space-2) var(--rc-space-2) 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
  background-color: var(--rc-surface);
  transition: border-color var(--rc-dur-btn) var(--rc-ease), box-shadow var(--rc-dur-btn) var(--rc-ease);
}
.product-detail-configurator-option-label:hover {
  border-color: var(--rc-primary);
}
.product-detail-configurator-option-input:checked + .product-detail-configurator-option-label {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
  font-weight: var(--rc-fw-semibold);
}
.rc-buybox__form {
  display: grid;
  gap: var(--rc-space-3);
}
.product-detail-form-container .btn-buy {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
  min-height: var(--rc-control-lg);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  border-radius: var(--rc-radius-control);
  width: 100%;
}
.product-detail-form-container .btn-buy:hover, .product-detail-form-container .btn-buy:focus-visible {
  background-color: var(--rc-primary-dark);
  border-color: var(--rc-primary-dark);
  color: #fff;
}
.product-detail-quantity-container .form-control, .product-detail-quantity-container .btn, .product-detail-quantity-group .form-control, .product-detail-quantity-group .btn {
  min-height: var(--rc-control-lg);
  border-color: var(--rc-border);
}
.rc-buybox__consult {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-4);
  text-decoration: none;
  color: var(--rc-text);
  transition: background-color var(--rc-dur-btn) var(--rc-ease);
}
.rc-buybox__consult:hover {
  background-color: var(--rc-secondary-soft);
  color: var(--rc-text);
}
.rc-buybox__consult > .icon {
  color: var(--rc-primary);
  width: 30px;
  height: 30px;
}
.rc-buybox__consult > .icon > svg {
  width: 30px;
  height: 30px;
}
.rc-buybox__consult span {
  display: grid;
  line-height: 1.35;
}
.rc-buybox__consult strong {
  font-size: var(--rc-fs-sm);
}
.rc-buybox__consult small, .rc-buybox__consult .small {
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
}
.rc-buybox__consult-number {
  color: var(--rc-primary);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
}
/*
 * Merken und Vergleichen unter dem Kaufknopf.
 *
 * Zwei gleichrangige Nebenwege, deshalb nebeneinander und beide ohne Fläche:
 * Eine gefüllte Schaltfläche neben dem Kaufknopf würde um dieselbe
 * Aufmerksamkeit konkurrieren.
 */
.rc-buybox__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-5);
  padding-top: var(--rc-space-4);
}
.rc-buybox__secondary .product-wishlist {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
}
.rc-buybox__secondary .product-wishlist-action, .rc-buybox__secondary .product-wishlist-action-circle {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: var(--rc-control-md);
  padding: 0;
  gap: var(--rc-space-2);
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
}
.rc-buybox__secondary .product-wishlist-action:hover, .rc-buybox__secondary .product-wishlist-action:focus-visible, .rc-buybox__secondary .product-wishlist-action-circle:hover, .rc-buybox__secondary .product-wishlist-action-circle:focus-visible {
  background: none;
  color: var(--rc-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-buybox__secondary .product-wishlist-action .icon, .rc-buybox__secondary .product-wishlist-action-circle .icon {
  width: 20px;
  height: 20px;
}
.rc-buybox__secondary .product-wishlist-action .icon > svg, .rc-buybox__secondary .product-wishlist-action-circle .icon > svg {
  width: 20px;
  height: 20px;
}
.rc-buybox__secondary .rc-compare-toggle {
  min-height: var(--rc-control-md);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
}
.rc-buybox__trust {
  list-style: none;
  margin: 0;
  padding: var(--rc-space-4) 0 0;
  border-top: 1px solid var(--rc-border);
  display: grid;
  gap: var(--rc-space-2);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.rc-buybox__trust li {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
}
.rc-buybox__trust .icon {
  color: var(--rc-secondary);
  width: 15px;
  height: 15px;
}
.rc-buybox__trust .icon > svg {
  width: 15px;
  height: 15px;
}
.rc-buybox__payment {
  border-top: 1px solid var(--rc-border);
  padding-top: var(--rc-space-4);
}
.rc-buybox__payment-label {
  margin: 0 0 var(--rc-space-2);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.rc-buybox__payment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-1);
}
.rc-buybox__payment-list li {
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  background-color: var(--rc-bg);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  padding: 3px var(--rc-space-2);
  white-space: nowrap;
}
.rc-measure {
  margin-top: var(--rc-space-8);
  max-width: 820px;
}
.rc-measure__title {
  margin-bottom: var(--rc-space-2);
}
.rc-measure__intro {
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  margin-bottom: var(--rc-space-5);
}
.rc-measure__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-space-2);
}
.rc-measure__item {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: center;
  gap: var(--rc-space-3);
  background-color: var(--rc-bg);
  border-radius: var(--rc-radius-control);
  padding: var(--rc-space-3) var(--rc-space-4);
}
.rc-measure__bar {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background-color: var(--rc-secondary);
}
.rc-measure__label {
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-measure__value {
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
}
.rc-measure__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-2);
  margin-top: var(--rc-space-3);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.rc-measure__hint .icon {
  color: var(--rc-secondary);
  flex-shrink: 0;
}
/*
 * ── Eignungsprüfung („Passt dieses Modell zu Ihnen?") ────────────────────
 *
 * Der Betreiber: „die sektionen sind eine gute idee, müssen aber optisch
 * nochmal hochwertiger, moderner und professioneller gestaltet werden."
 *
 * Zwei Befunde aus seinem Screenshot:
 *
 * 1. Die Beschriftungen brachen dreizeilig um („Welches Körperge-wicht muss
 *    getragen werden?"). Ursache waren feste Spaltenzahlen: Ab 1200 px
 *    Fensterbreite teilte sich das Formular in VIER Spalten – die
 *    Beschreibungsspalte der Produktseite ist aber nur rund 740 px breit,
 *    jede Spalte damit 170 px. Die Fensterbreite sagt hier nichts über den
 *    Platz aus, der tatsächlich zur Verfügung steht.
 * 2. Ein einzelner grüner Kasten mit Text und Feldern darin wirkt wie ein
 *    Hinweiskasten, nicht wie ein Werkzeug.
 *
 * Beides löst dieselbe Struktur: links die Erklärung, rechts das Werkzeug auf
 * eigener heller Fläche – und beide Raster teilen sich über
 * `repeat(auto-fit, minmax(...))` selbst auf, gemessen am vorhandenen Platz.
 * Zwei Spalten entstehen ab 2 × 20 rem + 32 px ≈ 672 px; darunter steht alles
 * untereinander, und die Beschriftungen haben die volle Breite.
 */
.rc-fitcheck {
  margin-top: var(--rc-space-8);
  max-width: 820px;
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-visual);
  padding: var(--rc-space-7);
  display: grid;
  gap: var(--rc-space-6);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
@media (max-width: 767px) {
  .rc-fitcheck {
    padding: var(--rc-space-5) var(--rc-space-4);
  }
}
.rc-fitcheck__head h2, .rc-fitcheck__head .h2 {
  margin-bottom: var(--rc-space-3);
}
.rc-fitcheck__head p {
  margin: 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
}
.rc-fitcheck__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--rc-space-3);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
}
.rc-fitcheck__zeichen .icon {
  color: var(--rc-primary);
  width: 22px;
  height: 22px;
}
.rc-fitcheck__zeichen .icon > svg {
  width: 22px;
  height: 22px;
}
/*
 * Das Formular steht auf eigener heller Fläche.
 *
 * Auf dem gedeckten Grün der Sektion waren weiße Eingabefelder die einzigen
 * hellen Flecken und wirkten wie hineingefallen. Als geschlossene Karte
 * gelesen ist erkennbar: Hier wird etwas eingegeben und etwas kommt heraus.
 */
.rc-fitcheck__form {
  display: grid;
  gap: var(--rc-space-4);
  align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  background-color: var(--rc-surface);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-5);
}
.rc-fitcheck__form > .btn {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: var(--rc-space-1);
}
.rc-fitcheck__field .form-label {
  display: block;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.4;
  color: var(--rc-text);
  /*
     * Zwei Zeilen fest reservieren.
     *
     * „Körpergewicht" braucht eine Zeile, „Schmalste Türöffnung" zwei. Ohne
     * die reservierte Höhe standen die Felder daneben zwar auf einer Linie
     * (align-items: end), die Beschriftungen darüber aber versetzt – im
     * Screenshot sichtbar als schiefe Kopfzeile über einem sauberen
     * Feldpaar.
     */
  min-height: calc(2 * 1.4em);
}
.rc-fitcheck__input {
  position: relative;
}
.rc-fitcheck__input .form-control {
  background-color: var(--rc-surface);
  padding-right: 44px;
}
.rc-fitcheck__unit {
  position: absolute;
  right: var(--rc-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  pointer-events: none;
}
.rc-fitcheck__result {
  display: block;
  margin-top: var(--rc-space-5);
  background-color: var(--rc-surface);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-4) var(--rc-space-5);
}
.rc-fitcheck__result[hidden] {
  display: none;
}
.rc-fitcheck__verdict {
  margin: 0 0 var(--rc-space-3);
  font-weight: var(--rc-fw-semibold);
}
.rc-fitcheck__verdict.is-ok {
  color: var(--rc-success);
}
.rc-fitcheck__verdict.is-warn {
  color: var(--rc-red);
}
.rc-fitcheck__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-space-2);
}
.rc-fitcheck__list li {
  display: flex;
  gap: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  line-height: 1.55;
}
.rc-fitcheck__list .is-ok strong {
  color: var(--rc-success);
}
.rc-fitcheck__list .is-warn strong {
  color: var(--rc-red);
}
.rc-fitcheck__help {
  margin: var(--rc-space-4) 0 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.rc-fitcheck__help a {
  font-weight: var(--rc-fw-bold);
}
.rc-product-faq {
  margin-top: var(--rc-space-8);
  max-width: 820px;
}
.rc-product-faq h2, .rc-product-faq .h2 {
  margin-bottom: var(--rc-space-4);
}
.rc-delivery {
  margin-top: var(--rc-space-8);
  max-width: 820px;
}
.rc-delivery__title {
  margin-bottom: var(--rc-space-5);
}
/*
 * ── Lieferoptionen ───────────────────────────────────────────────────────
 *
 * Der Betreiber: „die lieferoptionen muessen hochwertiger gestaltet werden
 * das sieht sehr billig aus."
 *
 * Gemessen am 27.08.2026 am Aufstehsessel Grandano (Lieferprofil
 * spedition_aufbau), drei Ursachen:
 *
 * 1. Bezeichnung und Wert lagen als `grid-template-columns: auto 1fr`
 *    nebeneinander. Bei 390 px blieben dem Wert 164 px. Die drei Werte
 *    brauchten 4, 4 und 4 Zeilen und wurden mitten im Wort getrennt
 *    („Verpa-ckung", „Pa-lette", „Ter-min"). Ein Angebot, das seine eigenen
 *    Wörter zerbricht, liest sich billig.
 *
 * 2. Die beiden Karten standen in einem grün gefüllten Kasten
 *    (--rc-primary-soft) und trugen selbst unterschiedliche Rahmen und
 *    Füllungen: weiß/grau gegen grün/grün. Drei Grüntöne übereinander, und
 *    die hervorgehobene Karte war ausgerechnet die, die sich nicht online
 *    buchen lässt.
 *
 * 3. Die Überschrift war ein <h3 class="h4">, also 19 px fett – kleiner als
 *    der Fließtext daneben.
 *
 * Jetzt: kein Rahmenkasten mehr, zwei gleich aussehende Karten auf Weiß,
 * Bezeichnung über dem Wert, Überschrift auf der regulären h3-Stufe.
 */
.rc-delivery__options {
  /*
     * „mach etwas abstand nach unten" (Betreiber, zur Zeitleiste darüber).
     *
     * Hier standen 24 px – exakt der Rasterabstand ZWISCHEN den Schritten
     * (`gap: var(--rc-space-5)`). Der Optionsblock schloss damit so eng an
     * wie ein vierter Schritt.
     *
     * Der gemessene Rhythmus der Produktseite: 64 px zwischen Abschnitten
     * (padding-top an `.rc-pdp-details__main > *`), 32 px vor einer h3.
     * 48 px liegt dazwischen und ist von beidem unterscheidbar – der Block
     * gehört sichtbar noch zur Lieferung, ist aber nicht Teil des Ablaufs.
     */
  margin-top: var(--rc-space-7);
}
.rc-delivery__options > .rc-delivery__options-title {
  margin: 0 0 var(--rc-space-4);
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-delivery__compare {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-space-4);
}
/*
 * Zwei Spalten ab 768 statt erst ab 992 px.
 *
 * Die Klasse `.rc-grid--cols-2` aus dem CMS-Plugin greift erst ab 992 px;
 * bei 768 px standen die beiden Karten deshalb untereinander und waren
 * 680 px breit – eine Gegenüberstellung, die man scrollen muss, ist keine.
 * Nebeneinander sind es gemessen 352 px je Karte, innen 304 px Textbreite;
 * der längste Wert („Zustellung auf Palette, Verpackung verbleibt bei
 * Ihnen") braucht darin zwei Zeilen.
 *
 * Zwei Klassen im Selektor: Die Regel des Plugins wiegt eine und wird vor
 * dieser Datei kompiliert – ohne die zweite Klasse gewänne sie ab 992 px.
 */
@media (min-width: 768px) {
  .rc-delivery__compare.rc-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rc-delivery__option {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--rc-space-5);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
}
@media (min-width: 768px) {
  .rc-delivery__option {
    padding: var(--rc-space-6);
  }
}
.rc-delivery__option-name {
  margin: 0;
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  hyphens: manual;
}
.rc-delivery__option-price {
  margin: var(--rc-space-2) 0 0;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
  hyphens: manual;
}
/*
 * Stehen ZWEI Karten nebeneinander, bricht „Versandkostenfrei, ohne
 * Mindestbestellwert" auf zwei Zeilen, „Aufpreis – wir nennen ihn Ihnen
 * vorab" bei 1440 px auf eine. Ohne Mindesthöhe begannen die beiden
 * Faktenlisten gemessen 6,8 px versetzt, und die Trennlinien darüber liefen
 * nicht auf einer Höhe.
 *
 * Zwei Zeilen, gerechnet aus der Zeilenhöhe des Fließtexts – als
 * em-Vielfaches, damit das Maß auch dann noch stimmt, wenn jemand die
 * Schrift des Browsers vergrößert. Gemessen 57,8 px bei 17 px Schrift.
 *
 * Nur bei zwei Karten: Steht eine allein, gibt es nichts auszurichten, und
 * die Mindesthöhe hinterließe gemessen 29 px leere Fläche unter der Zeile.
 */
@media (min-width: 768px) {
  /*
     * Eine einzelne Karte ist so breit wie die Spalte – bei 1440 px gemessen
     * 820 px. Untereinander stehende Angaben ließen darin rechts über 400 px
     * leer, und „Bis Bordsteinkante" stand allein in einer Zeile von 754 px.
     * Nebeneinander füllen die drei Angaben die Breite; die Bezeichnung
     * bleibt über dem Wert.
     */
  .rc-delivery__compare.rc-grid--cols-2 .rc-delivery__option-price {
    min-height: calc(2em * var(--rc-lh-body));
  }
  .rc-delivery__compare.rc-grid--cols-1 .rc-delivery__fakten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rc-space-5);
  }
}
/*
 * Bezeichnung ÜBER dem Wert.
 *
 * Das ist dieselbe Entscheidung wie bei den technischen Daten weiter oben
 * und aus demselben Grund: In zwei Spalten bleibt dem Wert auf einem Telefon
 * zu wenig Breite. Gemessen 164 px vorher gegen 302 px jetzt – die drei
 * Werte brauchen damit 1, 2 und 2 Zeilen statt 4, 4 und 4, und keiner wird
 * mehr getrennt.
 */
.rc-delivery__fakten {
  margin: var(--rc-space-5) 0 0;
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-border);
  display: grid;
  gap: var(--rc-space-4);
}
.rc-delivery__fakt {
  display: grid;
  gap: var(--rc-space-1);
  align-content: start;
}
.rc-delivery__fakt-label {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: 0;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-muted);
  hyphens: manual;
}
.rc-delivery__fakt-symbol {
  display: inline-flex;
  flex: 0 0 auto;
}
.rc-delivery__fakt-symbol .icon {
  color: var(--rc-primary);
  width: 20px;
  height: 20px;
}
.rc-delivery__fakt-symbol .icon > svg {
  width: 20px;
  height: 20px;
}
.rc-delivery__fakt-wert {
  margin: 0;
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
  color: var(--rc-text);
  hyphens: manual;
  overflow-wrap: break-word;
}
/*
 * Der Satz zur telefonischen Vereinbarung.
 *
 * Er stand als graue Fußzeile unter beiden Karten – die wichtigste
 * Einschränkung der Seite in der schwächsten Auszeichnung (gemessen
 * 6,4:1 auf grünem Grund, 17 px, --rc-muted). Jetzt steht er im Fuß
 * der Karte, für die er gilt, auf eigener Fläche und mit wählbarer Nummer.
 */
.rc-delivery__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  margin: var(--rc-space-5) calc(-1 * var(--rc-space-5)) calc(-1 * var(--rc-space-5));
  padding: var(--rc-space-4) var(--rc-space-5);
  background-color: var(--rc-surface-warm);
  border-top: 1px solid var(--rc-border);
  border-radius: 0 0 calc(var(--rc-radius-card) - 1px) calc(var(--rc-radius-card) - 1px);
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-text-soft);
  hyphens: manual;
}
@media (min-width: 768px) {
  .rc-delivery__hint {
    margin-left: calc(-1 * var(--rc-space-6));
    margin-right: calc(-1 * var(--rc-space-6));
    margin-bottom: calc(-1 * var(--rc-space-6));
    padding: var(--rc-space-4) var(--rc-space-6);
  }
}
.rc-delivery__hint a {
  color: var(--rc-primary);
  font-weight: var(--rc-fw-semibold);
  white-space: nowrap;
}
.rc-delivery__hint-symbol {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-start;
}
.rc-delivery__hint-symbol .icon {
  align-self: flex-start;
  margin-top: calc((1em * var(--rc-lh-body) - 20px) / 2);
  color: var(--rc-primary);
  width: 20px;
  height: 20px;
}
.rc-delivery__hint-symbol .icon > svg {
  width: 20px;
  height: 20px;
}
.rc-delivery__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .rc-delivery__steps.rc-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .rc-delivery__steps.rc-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .rc-delivery__steps.rc-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/*
 * Ablauf als Prozesslinie, nicht als Kartenreihe.
 *
 * Der Betreiber: „arbeite hier auch mehr mit icons und gestalte es ebenso"
 * – gemeint ist dieselbe Aufwertung wie bei den anderen Sektionen.
 *
 * Drei umrandete Kästchen nebeneinander sagen nicht, dass es sich um einen
 * Ablauf handelt; sie sehen aus wie drei beliebige Hinweise. Ohne Rahmen und
 * mit einer durchgehenden Linie zwischen den Symbolen liest man von links nach
 * rechts, was nacheinander passiert. Das ist die Darstellung, die
 * Versanddienstleister für ihre Sendungsverfolgung benutzen.
 */
.rc-delivery__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  background: none;
  border: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .rc-delivery__step {
    flex-direction: column;
    gap: var(--rc-space-3);
  }
}
.rc-delivery__marke {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--rc-primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.rc-delivery__marke .icon {
  color: var(--rc-primary);
  width: 24px;
  height: 24px;
}
.rc-delivery__marke .icon > svg {
  width: 24px;
  height: 24px;
}
/*
 * ── Verbindungslinie mit laufendem Punkt ─────────────────────────────────
 *
 * Der Betreiber: „baue hier vielleicht in den linien zwischen den icons eine
 * punkt animation die durchlaeuft".
 *
 * Die Linie war ein `::after` am Schritt. Ein Pseudoelement kann kein
 * eigenes Pseudoelement tragen – für Linie UND Punkt braucht es zwei
 * Ebenen. Die Linie ist deshalb jetzt ein eigenes Element
 * (`.rc-delivery__spur`, gesetzt vom Template für jeden Schritt außer dem
 * letzten), der Punkt sein `::after`.
 *
 * Der Punkt ist nicht der Punkt: Bewegt wird ein Träger, der so breit ist
 * wie die ganze Linie und den Punkt als Farbverlauf an seinem linken Rand
 * trägt. Nur so lässt sich eine unbekannte Streckenlänge mit `transform`
 * abfahren – `translateX(100%)` bezieht sich auf die eigene Breite des
 * bewegten Elements, und die ist hier genau die Streckenlänge. Eine
 * Animation auf `left` oder `width` täte dasselbe, würde aber bei jedem
 * Einzelbild neu umbrechen (siehe base/_motion.scss).
 *
 * Waagerecht, sobald die drei Schritte in EINER Reihe stehen (ab 768 px);
 * darunter senkrecht, weil sie dort untereinander stehen. Nach dem letzten
 * Schritt gibt es keine Linie – sie liefe ins Leere.
 */
.rc-delivery__spur {
  position: absolute;
  background-color: var(--rc-border);
  left: 25px;
  top: 60px;
  bottom: calc(-1 * var(--rc-space-5));
  width: 2px;
  /*
     * ── Eine durchlaufende Punktreihe, kein einzelner Punkt ──────────────
     *
     * Der Betreiber nach dem ersten Versuch: „ich dachte hier an durchlaufende
     * punkte .................." – also eine gepunktete Strecke, die wandert,
     * nicht ein Läufer auf einer durchgezogenen Linie.
     *
     * Der Unterschied ist inhaltlich, nicht nur optisch: Ein einzelner Punkt
     * erzählt „hier ist gerade jemand unterwegs" und lenkt den Blick auf sich.
     * Eine wandernde Punktreihe erzählt „von hier nach dort" und bleibt Weg –
     * genau das, was die drei Schritte darüber sagen sollen.
     *
     * WIE ES GEBAUT IST
     *
     * Die Strecke bekommt ein Muster aus Punkten im Abstand von 12 px. Bewegt
     * wird nicht das Muster selbst, sondern ein Träger, der doppelt so lang
     * ist wie die Strecke – verschoben um GENAU eine Musterlänge. Damit sieht
     * das Ende des Umlaufs aus wie sein Anfang und es gibt keinen Sprung.
     *
     * `transform` statt `background-position`: Beides bewegt hier nichts im
     * Layout, aber nur `transform` zeichnet der Browser auf einer eigenen
     * Ebene. Bei drei gleichzeitig laufenden Strecken auf einer Produktseite
     * ist das der Unterschied zwischen einer ruhigen und einer flackernden
     * Anzeige auf älteren Geräten.
     *
     * Die Strecke selbst ist jetzt UNSICHTBAR (kein durchgezogener Strich
     * mehr) – die Punkte sind die Linie. Ein Strich UND Punkte darauf wären
     * zwei Aussagen übereinander.
     *
     * DAUER: 2,4 s für 12 px, also 5 px in der Sekunde. Sehr langsam, und das
     * mit Absicht. Zum Vergleich aus base/_motion.scss: Das Anheben einer
     * Kachel dauert 200 ms, der Puls am Merkzettel 600 ms – beides
     * Rückmeldungen auf einen Klick. Diese Bewegung hat niemand ausgelöst.
     * Sie muss langsamer sein als der Blick, der die drei Schritttexte liest,
     * sonst zieht sie ihn von genau diesen Texten weg. Bei einer Zielgruppe
     * von 65 bis 80 Jahren ist das der Unterschied zwischen einem Hinweis und
     * einem Blinklicht.
     *
     * `linear`: Eine beschleunigende Bewegung liest sich als Schwung.
     * Gleichmäßig liest sie sich als Weg.
     */
  background-color: transparent;
  overflow: hidden;
  /*
     * ── Punktfarbe: --rc-muted statt --rc-border-strong ──────────────────
     *
     * Hier stand --rc-border-strong (#cfc6b9). Gemessen am 30.08.2026 am
     * Island, 1440 px: Punktfarbe rgb(207, 198, 185) auf dem Kartengrund
     * rgb(251, 249, 246) ergibt 1,61:1. Der Schritttext daneben liegt bei
     * 13,87:1. Die Strecke selbst ist absichtlich unsichtbar
     * (background-color: transparent) – die Punkte sind das Einzige, was die
     * Verbindung zeigt, und genau die sieht die Zielgruppe nicht. Für
     * grafische Objekte verlangt WCAG 1.4.11 mindestens 3:1.
     *
     * --rc-border-strong ist eine RAHMEN-Farbe: Ein Rahmen umschließt eine
     * Fläche und wird über seine Länge gelesen, ein 3,2 px großer Punkt über
     * seine Fläche. Für dieselbe Sichtbarkeit braucht der Punkt mehr Kontrast
     * als die Linie, aus der er hervorgegangen ist.
     *
     * --rc-muted (#5a544c) erreicht auf demselben Grund 7,1:1 (Wert aus
     * abstracts/_tokens.scss, an anderer Stelle dieser Seite mit 7,48:1
     * nachgemessen). Nicht --rc-primary: Das Grün gehört den Symbolscheiben,
     * die die Schritte markieren. Der Weg dazwischen ist keine dritte Marke,
     * sondern die Verbindung – ein warmes Dunkelgrau ordnet sich den
     * Scheiben unter und bleibt trotzdem sichtbar.
     *
     * Der Lauf selbst bleibt unverändert; er ist nachgemessen sprungfrei
     * (Umlauf bei 1921 ms von translateX(-11,748) auf -0,331, also genau eine
     * Musterlänge) und wird von prefers-reduced-motion vollständig
     * zurückgenommen.
     */
}
@media (min-width: 768px) {
  .rc-delivery__spur {
    left: 60px;
    right: calc(-1 * var(--rc-space-3));
    top: 25px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}
.rc-delivery__spur::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 200%;
  background-image: radial-gradient(circle at 1px 3px, var(--rc-muted) 0 1.6px, transparent 1.7px);
  background-size: 2px 12px;
  background-repeat: repeat-y;
  animation: rc-liefer-punkte-y 2.4s linear infinite;
}
@media (min-width: 768px) {
  .rc-delivery__spur::after {
    width: 200%;
    height: 2px;
    background-image: radial-gradient(circle at 3px 1px, var(--rc-muted) 0 1.6px, transparent 1.7px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
    animation-name: rc-liefer-punkte-x;
  }
}
/*
 * Die zweite Strecke läuft um eine halbe Musterlänge versetzt.
 *
 * Sonst stünden alle Punkte beider Strecken exakt im Gleichschritt, und das
 * liest sich als eine einzige durchgehende Reihe über die ganze Breite statt
 * als zwei Wege zwischen drei Stationen.
 */
.rc-delivery__step:nth-child(2) .rc-delivery__spur::after {
  animation-delay: 1.2s;
}
/*
 * Verschoben wird um genau eine Musterlänge (12 px). Weniger wäre ein Ruck,
 * mehr ein Sprung – bei beidem sieht man den Umbruch des Umlaufs.
 */
@keyframes rc-liefer-punkte-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-12px);
  }
}
@keyframes rc-liefer-punkte-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-12px);
  }
}
/*
 * Wer „Bewegung reduzieren" eingestellt hat, bekommt eine STEHENDE Punktreihe.
 *
 * Anders als beim früheren Einzelpunkt ist das hier richtig: Ein stehender
 * Läufer wäre ein unerklärlicher Fleck gewesen und musste weg. Eine stehende
 * Punktreihe ist eine gepunktete Linie – genau die Aussage, die der Abschnitt
 * braucht, nur ohne Bewegung.
 *
 * Die Sammelregel am Ende von base/_motion.scss setzt `animation-duration`
 * auf 0,01 ms. Das genügt hier: Die Animation endet sofort, der Träger steht
 * auf seinem Ausgangswert, und weil das Muster über die doppelte Länge
 * gekachelt ist, sieht man davon nichts.
 */
@media (prefers-reduced-motion: reduce) {
  .rc-delivery__spur::after {
    animation: none;
  }
}
.rc-delivery__text {
  display: grid;
  gap: var(--rc-space-1);
}
.rc-delivery__text strong {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.rc-delivery__text span {
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  line-height: 1.55;
  hyphens: manual;
}
.rc-buybox__sku {
  margin: 0;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
/*
 * Merkzettel in der Buybox.
 *
 * Der Knopf stand hier allein und war als umrandete Fläche gestaltet. Seit
 * „Vergleichen" daneben steht, ist das eine Ungleichheit ohne Grund: zwei
 * gleichrangige Nebenwege, einer als Schaltfläche, einer als Textzeile.
 * Beide sind jetzt Textzeilen – umrandet ist nur, was gekauft wird.
 */
.product-detail-buy .product-wishlist {
  justify-self: start;
}
.product-detail-buy .product-wishlist .product-wishlist-action, .product-detail-buy .product-wishlist .product-wishlist-action-circle {
  border: 0;
  border-radius: 0;
  min-height: var(--rc-control-md);
  padding-inline: 0;
  color: var(--rc-primary);
  background-color: transparent;
  box-shadow: none;
}
.product-detail-buy .product-wishlist .product-wishlist-action:hover, .product-detail-buy .product-wishlist .product-wishlist-action:focus-visible, .product-detail-buy .product-wishlist .product-wishlist-action-circle:hover, .product-detail-buy .product-wishlist .product-wishlist-action-circle:focus-visible {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--rc-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-detail-tabs {
  margin-top: var(--rc-space-2);
}
.product-detail-tabs .card-tabs {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.product-detail-tabs .cms-card-header, .product-detail-tabs .card-header {
  background: transparent;
  border: 0;
  padding: 0;
}
.product-detail-tabs .card-body {
  padding: var(--rc-space-6) 0 0;
}
.product-detail-tabs .nav-tabs {
  border-bottom: 1px solid var(--rc-border);
  gap: var(--rc-space-5);
}
.product-detail-tabs .nav-tabs .nav-link {
  color: var(--rc-muted);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-base);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--rc-space-3) 0;
}
.product-detail-tabs .nav-tabs .nav-link.active, .product-detail-tabs .nav-tabs .nav-link:hover {
  color: var(--rc-primary);
  border-bottom-color: var(--rc-primary);
  background: transparent;
}
/*
 * ── Angabenbereich: mitlaufende Überschrift links, Inhalt rechts
 *
 * Vorher stand der auf 820 Pixel begrenzte Fließtext allein in einem
 * 1360 Pixel breiten Bereich – rechts blieben über 500 Pixel leer, die Seite
 * wirkte an dieser Stelle unfertig. Die Begrenzung selbst bleibt: längere
 * Zeilen liest niemand gern.
 */
/*
 * Der Shopware-Kern setzt `.cms-section { overflow: hidden }`. Damit wird die
 * Sektion zum Scrollbereich, und `position: sticky` darin hat keinen Weg mehr –
 * die Überschrift blieb am Anfang stehen und wanderte oben aus dem Bild.
 *
 * `clip` schneidet genauso ab, erzeugt aber keinen Scrollbereich. Nur auf der
 * Produktseite geändert, damit die Startseite mit ihren Vollbild-Sektionen
 * unangetastet bleibt.
 */
.is-ctl-product .cms-section {
  overflow: clip;
}
.rc-pdp-details {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--rc-space-8);
  align-items: start;
}
.rc-pdp-details__aside {
  position: sticky;
  top: calc(96px + var(--rc-space-5));
}
.rc-pdp-details__title {
  margin: 0;
  font-size: var(--rc-fs-2xl);
  line-height: var(--rc-lh-heading);
  color: var(--rc-primary);
  hyphens: auto;
}
.rc-pdp-details__main {
  min-width: 0;
}
@media (max-width: 991px) {
  .rc-pdp-details {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rc-space-5);
  }
  .rc-pdp-details__aside {
    position: static;
  }
  .rc-pdp-details__title {
    font-size: var(--rc-fs-xl);
  }
}
.product-detail-description {
  max-width: 820px;
  /*
     * Zeilenlänge des Fließtextes.
     *
     * Gemessen am 30.08.2026 am Verbandschuh Dublin XXL (19 Absätze über 150
     * Zeichen, Schriftgrad 19 px, Zeilenhöhe 32,3 px), 1440 px Fenster:
     * Median 73 Zeichen je Zeile, Spanne 56 bis 86. Das Designsystem nennt 66
     * (docs/14-designsystem-2026.md). Lange Zeilen kosten beim Zeilenwechsel
     * den Anschluss – bei einer Zielgruppe von 65 bis 80 Jahren die Stelle,
     * an der man aufhört zu lesen.
     *
     * `ch` statt Pixeln: Die Vorgabe ist eine ZEICHENZAHL, keine Breite. Mit
     * `ch` wandert die Grenze mit dem Schriftgrad mit – auch dann noch, wenn
     * jemand die Schrift im Browser vergrößert. Nachgemessen:
     *
     *     ohne Grenze  820 px  Median 73  (56 bis 86)
     *     58ch         695 px  Median 65  (56 bis 73)
     *     55ch         659 px  Median 61  (52 bis 70)
     *
     * 58ch trifft die Vorgabe am genauesten. Auf dem Telefon greift die
     * Grenze nicht: 58ch sind bei 18 px rund 557 px, die Spalte ist dort
     * 320 px breit.
     *
     * Nur der Fließtext, nicht die Nachbarabschnitte: Die technischen Daten
     * und die Herstellerangaben sind Raster und Listen, keine Prosa – für sie
     * gilt die Zeilenlänge nicht, sie bleiben bei 820 px.
     */
}
.product-detail-description .product-detail-description-text {
  max-width: 58ch;
}
.product-detail-description .product-detail-description-title {
  display: none;
}
.product-detail-description h2, .product-detail-description .h2 {
  font-size: var(--rc-fs-xl);
  margin-top: var(--rc-space-6);
  margin-bottom: var(--rc-space-3);
}
.product-detail-description p, .product-detail-description li {
  line-height: 1.7;
}
.product-detail-description ul {
  margin-bottom: var(--rc-space-4);
}
.product-detail-properties {
  display: none;
}
/*
 * ── Technische Daten als Kartenraster
 *
 * Vorher eine zweispaltige Tabelle. Auf einem Telefon rutscht der Wert dort
 * weit nach rechts vom Namen weg, und bei einem langen Namen bricht die
 * Bezeichnungsspalte über drei Zeilen um, während der Wert oben allein steht.
 *
 * Als Kachelpaar steht der Wert immer unmittelbar unter seiner Bezeichnung.
 * Der farbige Strich links markiert den Wert als das, was gesucht wird.
 */
.rc-tech-specs {
  margin-top: var(--rc-space-8);
  max-width: 820px;
}
.rc-tech-specs__title {
  margin-bottom: var(--rc-space-4);
}
.rc-tech-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rc-space-3) var(--rc-space-6);
  margin: 0;
}
.rc-tech-specs__cell {
  padding-bottom: var(--rc-space-3);
  border-bottom: 1px solid var(--rc-border);
}
.rc-tech-specs__grid--ungerade .rc-tech-specs__cell:last-child {
  grid-column: 1 / -1;
}
.rc-tech-specs__label {
  margin: 0 0 var(--rc-space-1);
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
  font-size: var(--rc-fs-sm);
}
.rc-tech-specs__value {
  margin: 0;
  padding-left: var(--rc-space-3);
  border-left: 3px solid var(--rc-primary);
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
}
@media (max-width: 575px) {
  .rc-tech-specs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rc-hmv-info {
  margin-top: var(--rc-space-6);
  max-width: 820px;
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-5);
}
.rc-hmv-info h3, .rc-hmv-info .h3 {
  margin-bottom: var(--rc-space-3);
}
.rc-hmv-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--rc-space-2) var(--rc-space-5);
}
.rc-hmv-info dt {
  color: var(--rc-muted);
  font-weight: 500;
}
.rc-hmv-info dd {
  margin: 0;
  font-weight: var(--rc-fw-semibold);
}
.rc-hmv-info p {
  margin: 0;
  font-size: var(--rc-fs-sm);
}
.rc-hmv-info__hint {
  margin-top: var(--rc-space-3) !important;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
/*
 * ── Herstellerinformationen (GPSR) ───────────────────────────────────────
 *
 * Der Betreiber: „mache die herstellerinformationen etwas versteckter und
 * vielleicht ausklappbar."
 *
 * Gemessen am 27.08.2026 am Aufstehsessel Grandano: derselbe grün gefüllte
 * Kasten wie der HMV-Abschnitt (--rc-primary-soft), 376 px hoch bei 1440 px
 * und 404 px bei 390 px. Eine Anschrift, die dort stehen MUSS, hatte damit
 * das Gewicht des Abschnitts, der die Kostenübernahme erklärt.
 *
 * `.rc-manufacturer-info` steht deshalb nicht mehr in der Regel darüber. Der
 * Abschnitt ist jetzt eine Zeile mit Aufklapper: keine Füllfläche, kein
 * Rahmen – die Trennlinie und der 64-px-Abstand des Abschnittrhythmus
 * (`.rc-pdp-details__main > *`) reichen völlig.
 */
.rc-hersteller {
  max-width: 820px;
}
.rc-hersteller > .rc-hersteller__titel {
  margin: 0;
  font-size: inherit;
}
.rc-hersteller__schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
  width: 100%;
  min-height: var(--rc-control-lg);
  padding: var(--rc-space-3) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-muted);
  hyphens: manual;
  transition: color var(--rc-dur-btn) var(--rc-ease);
}
.rc-hersteller__schalter:hover, .rc-hersteller__schalter:focus-visible {
  color: var(--rc-primary);
}
.rc-hersteller__schalter::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--rc-dur-dropdown) var(--rc-ease);
}
.rc-hersteller__schalter[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-2px);
}
.rc-hersteller__text {
  padding-bottom: var(--rc-space-3);
  max-width: var(--rc-measure);
}
.rc-hersteller__text p {
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-text-soft);
  hyphens: manual;
}
.rc-hersteller__text > :last-child {
  margin-bottom: 0;
}
/*
 * Bootstrap animiert das Aufklappen über `height` – 350 ms lang rechnet der
 * Browser dabei den gesamten Rest der Seite neu um, und unter diesem
 * Abschnitt liegen gemessen über 6.000 px Inhalt. base/_motion.scss lässt
 * genau deshalb nur transform, opacity und box-shadow zu. Der Inhalt
 * erscheint hier ohne Übergang; die Rückmeldung auf den Klick gibt der
 * Winkel, der sich dreht.
 */
.rc-hersteller .collapsing {
  transition: none;
}
.product-detail-tabs .card, .product-detail-tabs .card-tabs, .cms-element-product-description-reviews .card, .cms-element-product-description-reviews .card-tabs {
  border: 0;
  background: transparent;
}
.product-detail-tabs .card-header, .product-detail-tabs .product-detail-tab-navigation, .cms-element-product-description-reviews .card-header, .cms-element-product-description-reviews .product-detail-tab-navigation {
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--rc-border);
}
.product-detail-tabs .card-body, .product-detail-tabs .product-detail-tabs-content, .cms-element-product-description-reviews .card-body, .cms-element-product-description-reviews .product-detail-tabs-content {
  padding: var(--rc-space-6) 0 0;
}
.product-price-tax-link, .product-detail-tax-link {
  position: relative;
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-regular);
  color: var(--rc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  --rc-hit-expanded: 1;
}
.product-price-tax-link::after, .product-detail-tax-link::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.product-price-tax-link:hover, .product-price-tax-link:focus-visible, .product-detail-tax-link:hover, .product-detail-tax-link:focus-visible {
  color: var(--rc-primary);
}
.cms-element-cross-selling .product-detail-tab-navigation, .cms-element-cross-selling .cross-selling-tab-navigation {
  border-bottom: 1px solid var(--rc-border);
  margin-bottom: var(--rc-space-6);
}
.cms-element-cross-selling .nav-link {
  color: var(--rc-muted);
  font-weight: var(--rc-fw-semibold);
  border: 0;
  border-bottom: 2px solid transparent;
}
.cms-element-cross-selling .nav-link.active {
  color: var(--rc-primary);
  border-bottom-color: var(--rc-primary);
}
.rc-sticky-buy {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1035;
  background-color: var(--rc-surface);
  border-top: 1px solid var(--rc-border);
  box-shadow: 0 -6px 24px rgba(var(--rc-scrim-rgb), 0.1);
  padding: var(--rc-space-3) 0 calc(var(--rc-space-3) + env(safe-area-inset-bottom, 0px));
  /*
     * Auch am Desktop, nur ruhiger: Der Kaufbereich klebt dort zwar mit,
     * endet aber am Ende der Galeriespalte. Ab den technischen Daten ist er
     * weg – und das ist die Stelle, an der man sich entscheidet.
     */
}
@media (min-width: 992px) {
  .rc-sticky-buy {
    padding-block: var(--rc-space-3);
  }
  .rc-sticky-buy .rc-sticky-buy__inner {
    max-width: var(--rc-container);
    margin-inline: auto;
    padding-inline: var(--rc-space-7);
    gap: var(--rc-space-6);
  }
  .rc-sticky-buy .rc-sticky-buy__name {
    font-size: var(--rc-fs-base);
    color: var(--rc-text);
    font-weight: var(--rc-fw-semibold);
  }
  .rc-sticky-buy .rc-sticky-buy__action {
    min-width: 260px;
  }
}
.rc-sticky-buy__inner {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  padding-inline: var(--rc-space-4);
}
.rc-sticky-buy__info {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
}
.rc-sticky-buy__name {
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-sticky-buy__price {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
}
.rc-sticky-buy__action {
  flex: 0 0 auto;
}
.rc-added {
  margin: var(--rc-space-3) 0 0;
  padding: var(--rc-space-3) var(--rc-space-4);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-primary-soft);
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
}
.rc-added a {
  margin-left: var(--rc-space-1);
  color: var(--rc-primary);
  font-weight: var(--rc-fw-semibold);
  text-underline-offset: 3px;
}
/*
 * Zuschuss-Hinweis im Hilfsmittelblock der Produktseite.
 *
 * Die Hilfsmittelnummer allein sagt nur jemandem etwas, der den Ablauf schon
 * kennt. Hier steht, was daraus folgt, und der Weg zur ausführlichen Seite.
 */
.rc-hmv-info__subsidy {
  margin-top: var(--rc-space-5);
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-border-strong);
}
.rc-hmv-info__subsidy p {
  margin: 0 0 var(--rc-space-3);
}
.rc-hmv-info__subsidy .btn {
  margin-top: var(--rc-space-2);
}
.rc-hmv-info__subsidy-title {
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary-dark);
}
/*
 * ══ Überarbeitung Produktseite ═══════════════════════════════════════════
 *
 * Vier gemessene Mängel, alle auf derselben Seite:
 *
 * 1. Kein Größenunterschied zwischen H2 und H3. Beide standen auf 27 Pixel –
 *    „Das Wichtigste im Überblick" (Abschnitt) und „Komfort, der zu Ihnen
 *    passt" (Unterabschnitt) sahen gleich wichtig aus. Bei einer Beschreibung
 *    über 6.200 Pixel Länge ist das der Unterschied zwischen Gliederung und
 *    Textwüste.
 *
 * 2. Uneinheitliche Abstände: gemessen 64, 32, 64, 64, 64, 32.
 *
 * 3. Rund 400 Pixel leere Fläche links unter der Galerie, weil der
 *    Kaufbereich mehr als doppelt so hoch ist.
 *
 * 4. Die Galerie war 625 Pixel hoch in einer 730 Pixel breiten Spalte – das
 *    Hauptbild nutzte nicht einmal die Breite, die es hätte haben können.
 */
.rc-pdp-details__main h2, .rc-pdp-details__main .h2 {
  font-size: var(--rc-fs-xl);
  line-height: var(--rc-lh-heading);
  margin: 0 0 var(--rc-space-4);
}
.rc-pdp-details__main h3, .rc-pdp-details__main .h3 {
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
  margin: var(--rc-space-6) 0 var(--rc-space-3);
}
.rc-pdp-details__main h4, .rc-pdp-details__main .h4 {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  margin: var(--rc-space-5) 0 var(--rc-space-2);
}
.rc-pdp-details__main .product-detail-description-title {
  display: none;
}
.rc-pdp-details__main p, .rc-pdp-details__main li {
  line-height: var(--rc-lh-body);
}
.rc-pdp-details__main ul, .rc-pdp-details__main ol {
  margin-bottom: var(--rc-space-5);
}
.rc-pdp-details__main > * {
  margin-top: 0 !important;
  padding-top: var(--rc-space-8);
  border-top: 1px solid var(--rc-border);
}
.rc-pdp-details__main > *:first-child {
  padding-top: 0;
  border-top: 0;
}
.rc-pdp-details__title {
  font-size: var(--rc-fs-lg);
  color: var(--rc-muted);
  font-weight: var(--rc-fw-semibold);
  margin-bottom: var(--rc-space-5);
}
.rc-pdp-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-space-1);
  border-left: 2px solid var(--rc-border);
}
.rc-pdp-nav__link {
  display: block;
  padding: var(--rc-space-2) var(--rc-space-4);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--rc-text);
  text-decoration: none;
  line-height: var(--rc-lh-heading);
}
.rc-pdp-nav__link:hover, .rc-pdp-nav__link:focus-visible {
  color: var(--rc-primary);
  border-left-color: var(--rc-primary);
}
.rc-pdp-nav__link.is-active {
  color: var(--rc-primary);
  border-left-color: var(--rc-primary);
  font-weight: var(--rc-fw-semibold);
}
.rc-pdp-details__main > *[id] {
  scroll-margin-top: 120px;
}
/*
 * ── Rückmeldung beim Hinzufügen ──────────────────────────────────────────
 *
 * Vorher gab es nur eine Textzeile unter dem Knopf und eine Zahl oben rechts,
 * die still um eins hochzählte. Wer nicht sicher war, ob es geklappt hat,
 * klickte ein zweites Mal.
 *
 * Jetzt bestätigt der Knopf dort, wo geklickt wurde, und das Warenkorbsymbol
 * zieht den Blick einmal kurz auf sich. Beides dauert zusammen unter einer
 * Sekunde und bewegt nichts, was gelesen werden soll.
 */
.btn.is-added, .btn-buy.is-added {
  background-color: var(--rc-success);
  border-color: var(--rc-success);
  color: #fff;
}
.btn.is-added::before, .btn-buy.is-added::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 14px;
  margin-right: var(--rc-space-3);
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -1px);
}
.rc-added {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--rc-dur-card) var(--rc-ease), transform var(--rc-dur-card) var(--rc-ease);
}
.rc-added.is-shown {
  opacity: 1;
  transform: none;
}
@keyframes rc-warenkorb-puls {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
.header-cart-btn.is-pulsing, .header-cart.is-pulsing {
  animation: rc-warenkorb-puls 600ms var(--rc-ease);
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .rc-added {
    transition: none;
  }
  .header-cart-btn.is-pulsing, .header-cart.is-pulsing {
    animation: none;
  }
}
.is-ctl-product .product-detail-description-title {
  display: none !important;
}
/*
 * Artikel ohne Foto.
 *
 * Der Kern füllt die Galeriefläche in diesem Fall mit `sw_icon 'placeholder'`
 * und size:fluid – gemessen am 29.08.2026 eine 937 px hohe graue Fläche mit
 * einem Bergsymbol. Zwei aktive Artikel im Shop trifft das (Zubehör zum
 * Colibri, 639,20 € und 559,20 €); die Vorlage
 * element/cms-element-image-gallery.html.twig ersetzt die Fläche seither
 * durch diesen Kasten.
 *
 * Die Höhe ist an die Bühne gebunden, nicht frei gewählt: Steht der Kasten
 * niedriger als eine Bildergalerie, springt der Kaufbereich daneben nach
 * oben und die Seite sieht auf jedem zweiten Produkt anders aus. 4:3 ist das
 * Format, in dem die meisten Produktfotos des Shops vorliegen.
 */
.rc-kein-bild {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rc-space-3);
  aspect-ratio: 1.3333333333;
  padding: var(--rc-space-6);
  border: 1px dashed var(--rc-border-strong);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-bg);
  text-align: center;
}
.rc-kein-bild .icon {
  color: var(--rc-muted);
  width: 40px;
  height: 40px;
}
.rc-kein-bild .icon > svg {
  width: 40px;
  height: 40px;
}
.rc-kein-bild__titel {
  margin: 0;
  max-width: 26em;
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
}
.rc-kein-bild__text {
  margin: 0;
  max-width: 30em;
  color: var(--rc-text-soft);
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
}
/*
 * Warenkorb.
 *
 * Der Warenkorb ist die letzte Station vor der Kasse und für diese Zielgruppe
 * die heikelste: Wer hier unsicher wird, ruft nicht an, sondern schließt den
 * Tab. Deshalb hier drei Dinge – bedienbare Mengenfelder, keine kryptischen
 * Symbolknöpfe und sichtbare Antworten auf die letzten offenen Fragen.
 */
.line-item .quantity-selector-group {
  flex-wrap: nowrap;
  max-width: 100%;
}
.line-item .quantity-selector-group .btn-minus, .line-item .quantity-selector-group .btn-plus {
  flex: 0 0 var(--rc-control-md);
  width: var(--rc-control-md);
  min-width: var(--rc-control-md);
  padding: 0;
}
.line-item .quantity-selector-group .js-quantity-selector, .line-item .quantity-selector-group .quantity-selector-group-input {
  flex: 1 1 auto;
  min-width: 44px;
  padding-left: var(--rc-space-1);
  padding-right: var(--rc-space-1);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/*
 * ── Warenkorbseite: die Produkttabelle sitzt auf der Kartenkante ─────────
 *
 * Meldung des Betreibers: „die produkttabelle im warenkorb ist immer noch am
 * rand". Nachgemessen am 27.08.2026 (Playwright, /checkout/cart, zwei Produkte
 * über die Storefront im Korb, Viewport 390/768/1440):
 *
 *   `.checkout-product-table > .card-body`   padding: 0px 0px 0px 0px
 *
 *   Breite | Karte (Rahmen) | erste Spalte  | Entfernen-Knopf
 *      390 | x 20 … 370     | Bild bei x 21 | endet bei 373  → 3 px DRAUSSEN
 *      768 | x 20 … 748     | Bild bei x 21 | endet bei 751  → 3 px DRAUSSEN
 *     1440 | x 40 … 933     | Bild bei x 41 | endet bei 936  → 3 px DRAUSSEN
 *
 * Die Kopfzeile ist genauso dran: „Produkt" beginnt bei 768 px an x=21 und bei
 * 1440 px an x=41 – das ist exakt die Innenkante der 1-px-Rahmenlinie. Null
 * Innenabstand links, drei Pixel Überstand rechts.
 *
 * Der Vergleich, den der Betreiber im Screenshot gesehen hat, steht daneben:
 * `.checkout-aside-summary` hat gemessen padding 16px auf allen vier Seiten,
 * und dort sitzt nichts am Rand. Die Tabelle bekommt WAAGERECHT genau diesen
 * Wert – nicht mehr.
 *
 * Warum nicht mehr: Jeder Pixel waagerechtes Polster geht der Textspalte ab.
 * `.line-item-info` ist die einzige Spalte mit `flex: 1 1 0` (siehe unten),
 * sie trägt den Verlust allein. Gemessen am 27.08.2026, Breite des
 * Produktnamens und Zeilenzahl:
 *
 *   Viewport | ohne Polster | mit 16 px | mit 24 px
 *      768   | 186 px, 2 Z. | 168 px, 3 Z. | 158 px, 3 Z.
 *     1024   | 136 px, 3 Z. | 118 px, 4 Z. | 108 px, 4 Z.
 *     1200   | 205 px, 2 Z. | 186 px, 3 Z. | 177 px, 3 Z.
 *     1440   | 283 px, 2 Z. | 264 px, 2 Z. | 255 px, 2 Z.
 *
 * Der Preis ist damit benannt: Der Name läuft bei 768 und 1200 px über eine
 * Zeile mehr, die Warenkorbzeile wächst um 31 px (768) bzw. 61 px (1200).
 * Das ist der Gegenwert dafür, dass Text und Knöpfe nicht mehr auf der
 * Rahmenlinie liegen – und 24 px hätten dieselbe Zeilenzahl gekostet, nur
 * mit 10 px weniger Namensbreite. Bei 1024 px war der Name schon vorher
 * dreizeilig; dort ist die Tabelle neben der Zusammenfassung generell zu
 * schmal, das ist ein eigener Befund und nicht mit Innenabstand zu lösen.
 *
 * SENKRECHT ab 768 px die nächste Stufe (24 px): Höhe kostet keine
 * Spaltenbreite, und die Kopfzeile braucht Luft zur Kartenkante.
 *
 * Warum das überhaupt passiert: `.card-body` steht in dieser Storefront auf
 * padding: 0 (Bootstrap-Variable $card-spacer, siehe layout/_checkout.scss
 * Abschnitt 2). Dort ist der Ausgleich auf `.register-card`, `.checkout-card`
 * und `.login-card` beschränkt – die Produkttabelle trägt keine dieser drei
 * Klassen und ging deshalb leer aus.
 *
 * Die Bootstrap-Zeile darin ragt gemessen 4 px über beide Innenkanten hinaus
 * (`.line-item-row` margin −4 px, Spalten padding +4 px). Das hebt sich für
 * den Inhalt auf: Der Text landet genau auf dem hier gesetzten Innenabstand,
 * und die durchsichtigen 4 px bleiben innerhalb der Kartenfläche.
 */
.is-act-cartpage .checkout-product-table > .card-body {
  padding: var(--rc-space-4);
}
@media (min-width: 768px) {
  .is-act-cartpage .checkout-product-table > .card-body {
    padding: var(--rc-space-5) var(--rc-space-4);
  }
}
/*
 * Die Spaltenüberschriften sind Beschriftungen, keine Kartentitel.
 *
 * Gemessen standen sie auf 22 px halbfett – der Stufe, die im Shop
 * Kartentitel trägt. „Stückpreis" braucht in dieser Größe 114 px; die Spalte
 * ist bei 768 px nach dem neuen Innenabstand 109 px breit, also trennte der
 * Browser zu „Stück-" / „preis" und die Kopfzeile wurde 55 statt 28 px hoch.
 *
 * Auf der Fließtextstufe (19 px) braucht dasselbe Wort 98 px und passt wieder
 * in eine Zeile. Unter 17 px geht es nicht – das ist die Untergrenze aus
 * _tokens.scss, und 19 px halten Abstand dazu.
 *
 * Die Zeile ist `aria-hidden="true"`: Jede Zelle der Datenzeilen trägt ihre
 * eigene Beschriftung für Screenreader. Die Größe ist hier also eine reine
 * Frage der Lesbarkeit am Bildschirm, kein Zugänglichkeitsthema.
 */
.is-act-cartpage .cart-table-header {
  font-size: var(--rc-fs-base);
}
/*
 * ── Produktname: die ganze Namensfläche muss klicken ─────────────────────
 *
 * Gemessen 26.08.2026 (Playwright, document.elementsFromPoint, ein Produkt
 * über die Storefront in den Korb gelegt).
 *
 * Shopware gibt den Namen in element/label.html.twig als nacktes `<a>` aus,
 * der Browser stellt es deshalb auf `display: inline`. Ein Inline-Element hat
 * bei mehrzeiligem Text kein geschlossenes Rechteck, sondern je Textzeile
 * eines. Im Seitenwarenkorb bei 1440 gemessen: Gesamtkasten 210x55 px, darin
 * aber nur die Streifen 202 px (Zeile 1, y 174–197) und 132 px (Zeile 2,
 * y 206–229). Der Zeilenzwischenraum und der Rest der kürzeren zweiten Zeile
 * gehören dem Elternelement – deshalb meldete elementsFromPoint dort den
 * Container (.rc-ocl__text im Seitenwarenkorb, .line-item-details-container
 * auf der Warenkorbseite) und nicht den Link.
 *
 * Von 55 gleichmäßig über den Namenskasten verteilten Punkten trafen den Link
 * vorher:
 *   Seitenwarenkorb 320/390/768/1024/1440 → 51 / 65 / 65 / 65 / 65 %
 *   Warenkorbseite  320/390/768/1024/1440 → 55 / 51 / 80 / 51 / 65 %
 * Mitte, rechter Rand und rechts unten gingen fast überall ins Leere.
 *
 * `display: block` macht aus den Streifen ein Rechteck. Es kommt kein Pixel
 * Layout dazu: Der Link füllte die Textspalte schon vorher zeilenweise.
 */
.line-item a.line-item-label {
  display: block;
  /*
     * Keine Silbentrennung im Produktnamen.
     *
     * `body { hyphens: auto }` aus base/_typography.scss ist im Fließtext
     * richtig und in einem Eigennamen falsch. Gemessen am 27.08.2026 auf
     * /checkout/cart bei 1440 px: Die Namensspalte ist 255 px breit, der
     * Browser trennte darin zu „RehaComfort Aufstehses-" / „sel Levano".
     * Das ist kein Wort, das jemand liest oder sucht – derselbe Befund wie
     * bei „Inkontinenzaufl-age" in layout/_listing.scss.
     *
     * `manual` lässt nur Trennungen zu, die im Text selbst stehen; der Name
     * bricht dann am Leerzeichen zu „RehaComfort" / „Aufstehsessel Levano".
     * Die Zeilenzahl bleibt dabei gleich (gemessen 2 Zeilen vorher wie
     * nachher), es verschwindet nur der Bruch mitten im Wort.
     */
  hyphens: manual;
  -webkit-hyphens: manual;
}
/*
 * Preis der Blockform: der Name grenzt jetzt an seine Nachbarn.
 *
 * Nachgemessen am 26.08.2026 mit dem oben beschriebenen Rasterverfahren –
 * die Trefferquote liegt seitdem auf allen fünf geprüften Breiten bei 100 %.
 * Dafür füllt der Namenskasten die Textspalte bis an die Spaltenkante aus,
 * und dort steht das nächste Klickziel. Gemessener Abstand zwischen zwei
 * Klickzielen (Vorgabe: mindestens 12 px):
 *
 *   Warenkorbseite  768/1024/1440 → Name endet 8 px vor dem Minus-Knopf
 *                                   (Name x 103–289, Minus x 297 bei 768)
 *   Warenkorbseite  320/390       → Bildlink endet 8 px über dem Namen
 *                                   (Bild y 324–394, Name y 402)
 *
 * Die 8 px sind Bootstraps halbe Spaltenrinne. Beide Paare brauchen 4 px mehr.
 *
 * Unter 768 px kommen die 4 px als Außenabstand über den Namen – dort ist
 * darüber nur Weißraum. Ab 768 px NICHT am Namen: Ein Außenabstand rechts
 * verschmälert die Textspalte, und die ist bei 1024 px schon am Limit
 * (gemessen: Namenskasten 136 px, "Aufstehsessel" 139 px – 4 px weniger und
 * der Browser trennt das Wort mitten im Namen). Die 4 px kommen deshalb aus
 * der Mengenspalte selbst: Sie ist 152 px breit, die Mengengruppe braucht
 * 144 px, 8 px sind Spaltenpolster. Ein Innenabstand links im
 * Auswahl-Container schiebt die Gruppe um 4 px nach rechts, die Textspalte
 * behält ihre Breite. Nachgemessen bei 768: Name endet 289, Minus beginnt
 * 301 – 12 px. Die Gruppe schrumpft dabei auf 140 px, das Zahlenfeld auf
 * 46 px; beides bleibt über den geforderten 44 px.
 *
 * Nur auf der Warenkorbseite. Im Seitenwarenkorb liegen 16 px zwischen Bild
 * und Name (`.rc-ocl__head` gap), dort ist nichts zu holen.
 */
.is-act-cartpage .line-item-product:not(.is-offcanvas) a.line-item-label {
  margin-top: var(--rc-space-1);
}
@media (min-width: 768px) {
  .is-act-cartpage .line-item-product:not(.is-offcanvas) a.line-item-label {
    margin-top: 0;
  }
}
.line-item .line-item-remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-control-md);
  height: var(--rc-control-md);
  min-width: var(--rc-control-md);
  padding: 0;
}
.line-item .product-wishlist-btn-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.line-item .product-wishlist {
  display: flex;
  justify-content: flex-start;
}
.line-item .product-wishlist-action, .line-item .product-wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-control-md);
  height: var(--rc-control-md);
  padding: 0;
}
.line-item-remove {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--rc-space-1);
}
/*
 * ── Seitenwarenkorb ─────────────────────────────────────────────────────
 *
 * Zwei Meldungen des Betreibers, wörtlich: „mache bitte die anzahl den
 * merkzettel und entfernen in eine zeile und hebe das x rot hervor schaue
 * generell das der side warenkorb besser aussieht".
 *
 * Ausgangslage, gemessen am 27.08.2026 (Playwright, zwei Produkte über die
 * Storefront in den Korb gelegt, Viewport 390/768/1440, Rollbalken sichtbar):
 *
 *   Bedienung      Mengengruppe Mitte y=401 (390) bzw. 415 (768/1440),
 *                  Merkzettel und Kreuz 60 px DARUNTER – zwei Zeilen für
 *                  drei Bedienelemente
 *   Entfernen-X    Symbolfarbe rgb(47,93,80), das ist --rc-primary – das
 *                  Kreuz sah aus wie jeder andere Knopf im Shop
 *   Abstand Plus→X 10 px bei Viewport 390 (37 px ab 768). Sobald beides in
 *                  einer Zeile steht, ist das der kritische Wert.
 *   Positionshöhe  358 px (390) / 365 px (768/1440) je Position
 *   Fuß            Zwischensumme y=933, „Zur Kasse" y=1243 – der Körper des
 *                  Offcanvas ist 836 px hoch. Bei zwei Positionen lag der
 *                  Kaufknopf 407 px UNTERHALB der Sichtkante, die Liste
 *                  rollte 1311 px in einem 836 px hohen Fenster.
 *   Trennung       weiße Positionskarte auf --rc-bg #FBF9F6. Der Kontrast
 *                  dieser beiden Flächen ist 1,03:1 – die „Trennung über
 *                  die Fläche" aus der letzten Runde war unsichtbar.
 *
 * Daraus vier Eingriffe: durchgehend weiße Lade mit Haarlinie zwischen den
 * Positionen (1), Kopfzeile mit Preis rechts neben dem Namen (2), eine
 * einzige Bedienzeile mit rotem Entfernen-Kreuz (3), feststehender Fuß mit
 * Zwischensumme und Kaufknopf (4).
 */
/*
 * ── 1 Die Lade: die Liste rollt, der Fuß bleibt stehen ──────────────────
 *
 * Ohne JavaScript und ohne Änderung am Markup: Der Rumpf wird eine Flex-
 * Spalte, die Positionsliste ist das einzige Kind, das wachsen und schrumpfen
 * darf. Zusammenfassung, Steuerhinweis und Knöpfe behalten ihre Höhe und
 * sitzen deshalb immer am unteren Rand – bei zwei wie bei zehn Positionen.
 *
 * `flex: 0 0 auto` für alle übrigen Kinder ist nicht kosmetisch: Ohne das
 * schrumpft Flexbox auch die Knöpfe, sobald es eng wird, und `overflow:
 * hidden` am Rumpf würde sie dann abschneiden. Genau das soll nicht passieren.
 *
 * Die Höhenschwelle: Bei 640 px Fensterhöhe bleiben nach Kopfleiste (64),
 * Überschrift und Fuß gemessen rund 170 px für die Liste – eine Position ist
 * dann angeschnitten sichtbar, das reicht als Rollhinweis. Darunter läuft der
 * Seitenwarenkorb wieder als eine durchgehende Spalte, weil ein feststehender
 * Fuß dort mehr Platz nähme, als die Liste noch hat.
 */
.cart-offcanvas {
  background-color: var(--rc-surface);
}
@media (min-height: 640px) {
  .cart-offcanvas {
    /*
         * Gerollt wird die HÜLLE, nicht mehr die Liste allein.
         *
         * In ihr stehen Erfolgsmeldung, Positionsliste und Gutscheinfeld –
         * siehe die Begründung in offcanvas-cart.html.twig. Gemessen bei
         * 1440 × 700 px mit drei Positionen: Der rollende Teil wuchs damit
         * von 67 auf 272 px, der feste schrumpfte von 522 auf 317 px.
         *
         * `min-height: 0` erlaubt einer Flex-Zelle überhaupt erst, kleiner
         * als ihr Inhalt zu werden; ohne diese Zeile bleibt die Hülle so hoch
         * wie ihr Inhalt und schiebt den Fuß aus dem Fenster.
         */
  }
  .cart-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--rc-space-4) var(--rc-space-5) 0;
  }
  .cart-offcanvas .offcanvas-cart {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .cart-offcanvas .offcanvas-cart > * {
    flex: 0 0 auto;
  }
  .cart-offcanvas .rc-oc__roll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: auto;
    scrollbar-color: var(--rc-border-strong) transparent;
  }
  .cart-offcanvas .rc-oc__roll::-webkit-scrollbar {
    width: 10px;
  }
  .cart-offcanvas .rc-oc__roll::-webkit-scrollbar-track {
    background: transparent;
  }
  .cart-offcanvas .rc-oc__roll::-webkit-scrollbar-thumb {
    background-color: var(--rc-border-strong);
    border-radius: 5px;
  }
  .cart-offcanvas .offcanvas-cart-items {
    flex: 0 0 auto;
    overflow: visible;
  }
  .cart-offcanvas .flashbags {
    flex: 0 0 auto;
  }
}
/*
 * ── Das Gutscheinfeld, zugeklappt ───────────────────────────────────────
 *
 * Aufgeklappt kostete es im festen Fuß 90 px – dauerhaft, für alle, auch für
 * die große Mehrheit ohne Code. Zugeklappt ist es eine Zeile von 44 px, und
 * die 44 sind kein Zufall: Es ist ein Klickziel.
 *
 * Der Dreiecks-Marker des Browsers ist abgeschaltet und durch ein eigenes
 * Zeichen ersetzt, damit die Zeile in beiden Zuständen gleich aussieht wie
 * die übrigen Aufklapper des Themes.
 */
.rc-oc__gutschein {
  margin-top: var(--rc-space-4);
  border-top: 1px solid var(--rc-border);
}
.rc-oc__gutschein-knopf {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  min-height: 44px;
  padding: var(--rc-space-2) 0;
  color: var(--rc-primary);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  cursor: pointer;
  list-style: none;
}
.rc-oc__gutschein-knopf::-webkit-details-marker {
  display: none;
}
.rc-oc__gutschein-knopf::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--rc-dur-btn) var(--rc-ease);
}
.rc-oc__gutschein[open] .rc-oc__gutschein-knopf::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.rc-oc__gutschein-feld {
  padding-bottom: var(--rc-space-4);
}
/*
 * Die ruhige Trennung zwischen zwei Positionen: eine Haarlinie, nicht ein
 * Rahmen um jede Position. Sie hängt bewusst an der Liste und nicht an
 * `.rc-ocl`: Rabatt- und Containerpositionen laufen weiter über das
 * Standardtemplate, und auch zwischen denen und einer Produktposition muss
 * genau eine Linie stehen. Shopwares eigene Unterkante an `.line-item` wird
 * dafür abgeräumt, sonst stünden zwei.
 */
.cart-offcanvas .offcanvas-cart-items {
  margin: 0;
  padding: 0;
}
.cart-offcanvas .offcanvas-cart-items > li {
  border-bottom: 0;
}
.cart-offcanvas .offcanvas-cart-items > li + li {
  border-top: 1px solid var(--rc-border);
}
/*
 * ── 2 Eine Position: drei Zeilen statt sieben Absätze ───────────────────
 *
 * Kopf   [Bild | Name .......... Preis]
 *              [Variante / Produkt-Nr. / Lieferzeitraum / Stückpreis]
 * Bedienung  [ − 1 + ] ................. [Merkzettel] [Entfernen]
 */
.rc-ocl {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-3);
  margin: 0;
  padding: var(--rc-space-4) 0;
  background-color: transparent;
  border-bottom: 0;
  border-radius: 0;
}
.rc-ocl:first-child {
  padding-top: 0;
}
.rc-ocl__head {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
}
.rc-ocl__media {
  flex: 0 0 72px;
  width: 72px;
}
.rc-ocl__media .line-item-img {
  width: 100%;
  height: auto;
}
.rc-ocl__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
/*
 * Name und Preis in einer Zeile.
 *
 * `align-items: baseline` statt `center`: Der Name läuft über zwei Zeilen,
 * der Preis über eine. Mittig ausgerichtet stünde der Preis zwischen den
 * beiden Namenszeilen; an der Schriftlinie steht er auf Höhe der ERSTEN
 * Namenszeile, und genau das war die Vorgabe.
 *
 * Gemessene Textbreiten: Name 210 px bei 19 px Schrift, Preis 95 px bei
 * 22 px. Textspalte 223 px (Viewport 390) bzw. 253 px (ab 768) – für den
 * Namen bleiben 116 bzw. 146 px, er läuft über zwei Zeilen wie vorher.
 */
.rc-ocl__title {
  display: flex;
  align-items: baseline;
  gap: var(--rc-space-3);
}
/*
 * ── Unter 576 px steht der Preis UNTER dem Namen ─────────────────────────
 *
 * Zweite Hälfte des Befunds oben. Die Rechnung im Kommentar darüber geht von
 * 116 px für den Namen aus; eigene Nachmessung bei 360 px ergibt 109.4 px –
 * für „RehaComfort Aufstehsessel Levano" (32 Zeichen, 18 px Schrift) reicht
 * das in KEINER Trennstrategie. Zum Vergleich die zweite Position,
 * „Klappbare Plateu-Rampe 3 in 1 (180 x 74 cm)": 106.9 x 117.0 px, ebenfalls
 * vier Zeilen.
 *
 * Gerechnet für 360 px: Rollfeld 292 − 72 Bild − 12 Abstand = 208 px
 * Textspalte. Nebeneinander bleiben davon 109 px für den Namen, untereinander
 * sind es 208 – fast das Doppelte. „Aufstehsessel" braucht bei 18 px
 * gemessen rund 120 px und passt damit ohne jeden Bruch in die Zeile.
 *
 * Die Zeilenordnung des Betreibers („Name ... Preis" in einer Zeile) bleibt
 * ab 576 px unverändert; dort ist die Spalte gemessen 160.7 px breit und der
 * Name läuft über drei Zeilen ohne Bruch im Wort.
 *
 * `align-items: flex-end` in der gestapelten Fassung: Der Preis behält seine
 * rechtsbündige Lage, damit die Spalte der Beträge auch untereinander eine
 * Kante hat.
 */
@media (max-width: 575.98px) {
  .rc-ocl__title {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--rc-space-1);
  }
  .rc-ocl__name {
    width: 100%;
  }
}
.rc-ocl__name {
  flex: 1 1 auto;
  min-width: 0;
}
/*
 * Der Name in der Lade: enger gesetzt und ohne Unterstreichung.
 *
 * Gemessen bei Viewport 390: Die Namensspalte ist neben dem Preis 139 px
 * breit, der Name läuft dort über drei Zeilen. Auf der Fließtext-Zeilenhöhe
 * 1,7 (gemessen 30,6 px je Zeile) sind das 92 px – mehr als das Produktbild
 * daneben hoch ist. Mit 1,3 sind es 70 px, und drei unterstrichene Zeilen
 * werden zu drei ruhigen.
 *
 * Die Unterstreichung fällt nur hier weg, nicht auf der Warenkorbseite: Dort
 * ist die Spalte 255 px breit, der Name läuft über zwei Zeilen und ist das
 * einzige Ziel im Textblock. In der Lade steht er in einer Zeile mit dem
 * Preis; drei unterstrichene Zeilen über einem Preis lesen sich als Fehler.
 * Bei Zeigergerät und Tastatur kommt die Unterstreichung sofort zurück, die
 * Erkennbarkeit als Link geht also nicht verloren.
 */
.rc-ocl .line-item-label {
  line-height: 1.3;
  text-decoration: none;
}
.rc-ocl .line-item-label:hover, .rc-ocl .line-item-label:focus-visible {
  text-decoration: underline;
}
/*
 * Leise Angaben: Produktnummer, Lieferzeitraum, ab Menge 2 der Stückpreis.
 *
 * Vorher standen Produktnummer (29 px hoch) und Lieferzeitraum (58 px, zwei
 * Zeilen bei 202 px Spaltenbreite) als eigene Absätze in Textfarbe zwischen
 * Name und Bedienung. Jetzt eine Stufe kleiner, in --rc-muted (7,1:1 auf
 * Weiß) und mit enger Zeilenhöhe: Beide Angaben passen bei der gewachsenen
 * Spaltenbreite in je eine Zeile.
 */
.rc-ocl__meta {
  margin-top: var(--rc-space-2);
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
  line-height: 1.4;
}
.rc-ocl__meta > * {
  margin: 0;
}
.rc-ocl .line-item-total-price {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  white-space: nowrap;
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
}
.rc-ocl .line-item-unit-price {
  width: auto;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-style: normal;
}
.rc-ocl .line-item-unit-price.is-shown {
  display: block;
  justify-content: flex-start;
}
/*
 * ── 3 Eine Bedienzeile: Anzahl, Merkzettel, Entfernen ───────────────────
 *
 * Rechnung für den schmalsten geprüften Fall (Viewport 390, Rollbalken der
 * Positionsliste sichtbar):
 *   Lade 370 − 2 x 24 Rumpfpolster − 15 Rollbalken   = 307 px Zeilenbreite
 *   158 Mengengruppe + 48 Merkzettel + 12 + 48 Kreuz = 266 px
 *   Rest zwischen Plus und Merkzettel                =  41 px
 *
 * `flex-wrap: nowrap` ist die Vorgabe des Betreibers: Die drei Elemente
 * dürfen nicht in zwei Zeilen fallen. Die Rechnung oben zeigt, dass sie das
 * auf keiner geprüften Breite müssen.
 *
 * Die Reihenfolge ist Absicht. Das Entfernen-Kreuz steht ganz rechts, hinter
 * dem Merkzettel-Herz: Zwischen Plus und Kreuz liegen damit 41 + 48 + 12 =
 * 101 px, das Herz wirkt als Puffer. Ein versehentlich getroffenes Herz kostet
 * einen Klick, ein versehentlich getroffenes Kreuz die Position.
 */
.rc-ocl__controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--rc-space-3);
}
.rc-ocl {
  /*
     * Die Beschriftung „Anzahl" entfällt im Seitenwarenkorb.
     *
     * Sie kostet gemessen 62 px Text plus 12 px Abstand. Mit ihr braucht die
     * Bedienzeile 340 px, vorhanden sind 307 – die drei Elemente könnten
     * dann nicht in einer Zeile stehen.
     *
     * Das ist kein Verlust für Screenreader: Shopware setzt genau dieser
     * Beschriftung `aria-hidden="true"`, sobald die Mengenauswahl sichtbar
     * ist (quantity.html.twig) – vorgelesen wurde sie also ohnehin nie. Den
     * Sinn tragen `aria-label="Anzahl von <Produkt>"` am Zahlenfeld und die
     * `<legend>` der Gruppe. Deshalb hängt die Regel am Attribut: Steht die
     * Menge als reine Zahl da (nicht stapelbare Position), ist die
     * Beschriftung NICHT aria-hidden und bleibt sichtbar.
     *
     * Auf der Warenkorbseite bleibt „Anzahl" ohnehin sichtbar, dort ist der
     * Platz vorhanden.
     */
}
.rc-ocl .line-item-quantity {
  order: 1;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}
.rc-ocl .line-item-quantity-label[aria-hidden="true"] {
  display: none;
}
.rc-ocl .line-item-quantity-row {
  --bs-gutter-x: 0;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
}
.rc-ocl .line-item-quantity-select-wrapper {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
}
.rc-ocl .quantity-selector-group {
  flex: 0 0 158px;
  width: 158px;
}
.rc-ocl .quantity-selector-group .js-quantity-selector, .rc-ocl .quantity-selector-group .quantity-selector-group-input {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
}
.rc-ocl__actions {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  margin-left: auto;
}
.rc-ocl {
  /*
     * components/_product-card.scss stellt `.product-wishlist` ohne
     * Einschränkung auf `position: absolute; top/right: …; width: 44px`.
     * Das ist auf der Produktkachel richtig – in der Warenkorbzeile war es
     * der Grund, warum das Herz frei im Textblock hing. Hier wird es zu einem
     * normalen Element im Aktionspaar zurückgesetzt.
     */
}
.rc-ocl .product-wishlist {
  order: 1;
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-control-md);
  height: var(--rc-control-md);
  margin: 0;
}
.rc-ocl .product-wishlist-action, .rc-ocl .product-wishlist-btn {
  flex: 0 0 var(--rc-control-md);
  width: var(--rc-control-md);
  height: var(--rc-control-md);
  min-width: var(--rc-control-md);
}
.rc-ocl .line-item-remove {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}
/*
 * Das Entfernen-Kreuz rot – ausdrücklich verlangt.
 *
 * Vorher gemessen: Symbol- und Rahmenfarbe rgb(47,93,80), also --rc-primary,
 * auf weißem Grund. Das Kreuz war optisch nicht von „Merken" oder „Zur Kasse"
 * zu unterscheiden.
 *
 * Jetzt Symbol in --rc-red-text #9E3527 auf Weiß und ein Rahmen in --rc-red
 * #B8402F. Beides gegen #FFFFFF gerechnet und im Browser nachgemessen:
 *   Symbol 7,0:1  (Vorgabe für Text und Symbole: 4,5:1)
 *   Rahmen 5,5:1  (Vorgabe für Bedienelementkanten: 3:1)
 * Die Fläche bleibt weiß und nicht rot: Ein vollflächig roter Knopf neben
 * dem Merkzettel-Herz liest sich als Hauptaktion der Zeile, und die
 * Hauptaktion ist hier nicht das Löschen.
 *
 * Größe unverändert 48 x 48 px (aus `.line-item .line-item-remove-button`
 * weiter oben), also über den geforderten 44 px.
 */
.rc-ocl .line-item-remove-button {
  border-color: var(--rc-red);
  background-color: var(--rc-surface);
  color: var(--rc-red-text);
}
.rc-ocl .line-item-remove-button .icon {
  color: var(--rc-red-text);
}
.rc-ocl .line-item-remove-button:hover, .rc-ocl .line-item-remove-button:focus-visible {
  border-color: var(--rc-red-deep);
  background-color: var(--rc-red-soft);
  color: var(--rc-red-deep);
}
.rc-ocl .line-item-remove-button:hover .icon, .rc-ocl .line-item-remove-button:focus-visible .icon {
  color: var(--rc-red-deep);
}
/*
 * ── 4 Der Fuß: Zwischensumme und Kaufknopf ──────────────────────────────
 *
 * Die Haarlinie oben trennt den feststehenden Teil von der rollenden Liste –
 * ohne sie sähe es aus, als sei die Liste zu Ende. --rc-border-strong statt
 * --rc-border, weil diese Linie eine Bedeutung hat.
 *
 * Die Beschriftung des Gutscheinfeldes wird eine Stufe leiser und rückt
 * näher an sein Feld: Der Block war gemessen 100 px hoch, und jeder Pixel
 * hier fehlt der Positionsliste darüber.
 */
.cart-offcanvas {
  /*
     * Versandkosten: Beschriftung und Betrag gehören in EINE Zeile.
     *
     * Gemessen bei Viewport 390: „Versandkosten (Standard)" 44 px hoch und
     * darunter „+ 0,00 €" mit weiteren 39 px – zusammen 83 px für eine
     * Angabe, die aus fünf Wörtern besteht. Shopware gibt beiden Teilen eine
     * volle Rasterspalte. Nebeneinander sind es 44 px, und die Zeile liest
     * sich wie die Zwischensumme darüber: links die Angabe, rechts der
     * Betrag.
     *
     * Drei Werte aus dem Bootstrap-Raster müssen dafür weg, sonst läuft die
     * Zeile über. Gemessen bei Viewport 390 in einer 322 px breiten Zeile:
     *   --bs-gutter-x  40 px, geerbt vom `.container` – beide Spannen trugen
     *                  dadurch je 20 px Innenabstand links und rechts
     *   flex: 0 0 auto aus `.row > *` – die Beschriftung konnte nicht
     *                  schrumpfen
     *   width: 100%    ebenfalls aus `.row > *`
     * Ergebnis waren 277 + 12 + 114 = 403 px in einer 322 px breiten Zeile:
     * „+ 0,00 €" stand halb außerhalb der Lade. Ohne Rasterpolster sind es
     * 237 + 8 + 74 = 319 px. Der Betrag bleibt unteilbar, die Beschriftung
     * darf schrumpfen – bei einem längeren Versandartnamen bricht sie um,
     * statt den Betrag hinauszuschieben.
     */
}
.cart-offcanvas .offcanvas-cart-header {
  margin-bottom: var(--rc-space-3);
}
.cart-offcanvas .offcanvas-summary {
  margin-top: 0;
  margin-bottom: var(--rc-space-2);
  padding-top: var(--rc-space-4);
  border-top: 1px solid var(--rc-border-strong);
}
.cart-offcanvas .offcanvas-shipping-info {
  --bs-gutter-x: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-2);
  margin: 0;
}
.cart-offcanvas .offcanvas-shipping-info > * {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}
.cart-offcanvas .offcanvas-shipping-info .shipping-value {
  flex: 0 0 auto;
  padding-bottom: 0;
  white-space: nowrap;
}
.cart-offcanvas .offcanvas-cart-tax {
  margin: 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
  line-height: 1.4;
}
.cart-offcanvas .offcanvas-cart-tax small, .cart-offcanvas .offcanvas-cart-tax .small {
  font-size: inherit;
}
.cart-offcanvas .offcanvas-cart-actions {
  margin-top: var(--rc-space-3);
  padding-bottom: var(--rc-space-4);
}
.cart-offcanvas .offcanvas-cart-promotion-form label {
  display: block;
  margin-bottom: var(--rc-space-1);
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
  line-height: 1.3;
}
/*
 * ── Versandart-Schalter im Seitenwarenkorb ──────────────────────────────
 *
 * Gemessen 26.08.2026 (Playwright, ein Produkt über die Storefront im Korb):
 * Der Knopf hinter "Versandkosten", der die Versandartauswahl aufklappt
 * ("(Standard)"), war 93x20 px bei Viewport 320/390 und 98x21 px ab 768 px.
 * 20 px Höhe gegen 44 px Vorgabe – gut die Hälfte. Shopware setzt dafür in
 * `.offcanvas-summary .js-toggle-shipping-selection` beide Innenabstände auf
 * Null; genau das wird hier zurückgenommen.
 *
 * Der Knopf bleibt als Textschalter erkennbar (keine Knopffläche, keine
 * Versalien), er wird nur auf eine sichere Trefferhöhe gebracht.
 */
.offcanvas-summary .js-toggle-shipping-selection {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--rc-space-1) var(--rc-space-2);
  margin-left: calc(var(--rc-space-2) * -1);
  text-align: left;
}
/*
 * ── Gutscheinzeile im Seitenwarenkorb ───────────────────────────────────
 *
 * Gemessen (Viewport 360/390/430/1440): Eingabefeld 292x48 px und
 * Einlöse-Knopf 292x48 px standen als zwei volle Balken untereinander, die
 * Gruppe war damit 96 statt 48 px hoch. Ursache ist
 * layout/_navigation.scss – `.offcanvas-cart-actions .btn { width: 100% }`
 * gilt dort für alle Knöpfe, also auch für den Knopf innerhalb der
 * Bootstrap-`input-group`, und die Gruppe bricht um.
 *
 * Diese Datei wird nach layout/_navigation.scss eingebunden (siehe
 * base.scss), und `.offcanvas-cart-actions .offcanvas-cart-promotion-form
 * .btn` ist um eine Klasse spezifischer – kein !important nötig.
 *
 * Rechnung bei Viewport 360: 292 px Innenraum − 48 px Knopf = 244 px für das
 * Feld. Über 44 px, also weiterhin sicher zu treffen, und nichts läuft über.
 */
.offcanvas-cart-promotion-form .input-group {
  flex-wrap: nowrap;
}
.offcanvas-cart-actions .offcanvas-cart-promotion-form .btn {
  flex: 0 0 var(--rc-control-md);
  width: var(--rc-control-md);
  min-width: var(--rc-control-md);
  padding-left: 0;
  padding-right: 0;
}
.offcanvas-cart-promotion-form .form-control {
  flex: 1 1 auto;
  min-width: 0;
}
/*
 * ── Warenkorbseite: die Mengenspalte muss die Mengengruppe tragen ────────
 *
 * Gemessen 26.08.2026 (Playwright, /checkout/cart, ein Produkt über die
 * Storefront im Korb). Die Gruppe braucht in sich
 *   48 Minus + 44 Zahlenfeld + 48 Plus − 2 Rahmenüberlappung = 138 px
 * (Bootstrap zieht jedes Folgeelement einer `.input-group` um 1 px nach
 * links). Vorhanden war:
 *
 *   Viewport | Spalte | Innenraum | Gruppe | Plus ragte aus der Spalte
 *      320   |  286   |    119    |  119   | 15 px
 *      390   |  356   |    154    |  154   |  0 px
 *      768   |  122   |    114    |  114   | 20 px
 *     1024   |  108   |    100    |  100   | 34 px
 *     1440   |  150   |    142    |  142   |  0 px
 *
 * Zwei verschiedene Ursachen hinter denselben Symptomen:
 *
 * 1. Ab 768 px ist `.line-item-quantity` in Shopwares
 *    component/_line-item.scss eine `col-md-2` – zwei Zwölftel der Zeile.
 *    Bei 768 px sind das 122 px, bei 1024 px (Zusammenfassung daneben)
 *    nur 108 px. Die Gruppe darf seit der letzten Runde nicht mehr umbrechen
 *    (`flex-wrap: nowrap` oben), also lief sie stattdessen waagerecht über:
 *    bei 1024 px lag das Plus im Screenshot über der ersten Ziffer des
 *    Stückpreises ("599,00 €" war als "99,00 €" zu lesen).
 *    Reparatur: die Spalte bekommt eine Mindestbreite von 152 px
 *    (138 Inhalt + 2 x 4 px Spaltenpolster + 6 px Luft) und die Textspalte
 *    `.line-item-info` gibt den Platz her, statt selbst starr bei fünf
 *    Zwölfteln zu bleiben. So wächst die Mengenspalte nur dort, wo sie zu
 *    schmal war: bei 1440 px bleibt es bei 152 statt 150 px.
 *
 * 2. Unter 576 px sind Beschriftung und Gruppe zwei halbe Zwölftel-Spalten
 *    (`col-6`) derselben Zeile. Bei 320 px teilten sich beide 278 px – für
 *    die Gruppe blieben 119 px, das Plus stand halb außerhalb der Karte.
 *    Reparatur wie im Seitenwarenkorb: Bootstrap-Raster aus der Zeile nehmen,
 *    "Anzahl" und Gruppe nebeneinander in ihrer Eigenbreite.
 *    Rechnung bei 320 px: 278 Innenraum − 62 Beschriftung − 12 Abstand
 *    = 204 px für eine 158 px breite Gruppe.
 *
 * Alles hier hängt an `.is-act-cartpage` – der Klasse, die Shopware bei
 * controllerAction `cartPage` an den Body schreibt. Dieselben Bausteine
 * (cart-header.html.twig, line-item/type/product.html.twig) stehen auch auf
 * Bestellabschluss, Bestellbestätigung und im Konto, dort aber mit anderer
 * Spaltenaufteilung: `showRemoveColumn: false` verschiebt die Rechnung um ein
 * Zwölftel. Diese Seiten gehören nicht zu diesem Auftrag und bleiben
 * unberührt, statt sie ungemessen mitzuverändern.
 * Der Seitenwarenkorb ist ohnehin ausgenommen (`:not(.is-offcanvas)`), er hat
 * seine eigene Zeile weiter oben.
 */
@media (min-width: 768px) {
  /*
     * Die Kopfzeile der Tabelle ("Produkt | Anzahl | Stückpreis | Summe")
     * steht in einem eigenen Raster in cart-header.html.twig und wusste
     * nichts von der breiteren Mengenspalte. Gemessene Abweichung zwischen
     * Kopf- und Datenspalte nach dem ersten Schritt (linke Kanten):
     * 30 px (768), 44 px (1024), 24 px (1200), 2 px (1440) – "Anzahl" stand
     * neben seiner eigenen Mengenauswahl.
     *
     * Die Kopfzeile bekommt dieselben zwei Regeln. Dazu ein leeres fünftes
     * Feld: Die Kopfzeile hat keine Zelle für den Entfernen-Knopf, sie lässt
     * dessen Zwölftel am Ende einfach frei. Solange die Textspalte eine feste
     * Prozentbreite hatte, ging das auf; sobald sie wächst, schluckt sie das
     * freie Zwölftel und alles verrutscht. `::after` hält den Platz.
     * Danach gemessen: alle vier Spaltenkanten bei 768/1024/1200/1440 auf
     * 0 px genau deckungsgleich.
     */
  .is-act-cartpage .line-item-product:not(.is-offcanvas) > .line-item-row > .line-item-quantity {
    min-width: 152px;
  }
  .is-act-cartpage .line-item-product:not(.is-offcanvas) > .line-item-row > .line-item-info {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    /*
             * Dieselbe Rechnung eine Ebene tiefer. In der Textspalte stehen
             * Bild (`col-auto`, gemessen 78 px) und Text (`col-md-8`, also
             * acht Zwölftel) nebeneinander; die restlichen vier Zwölftel
             * blieben leer. Sobald die Textspalte durch die breitere
             * Mengenspalte unter 236 px fiel, passten 78 + acht Zwölftel
             * nicht mehr in eine Reihe und das Bild sprang über den Namen
             * (gemessen bei 1024 px: Bild y=537, Name y=615).
             * Mit `flex: 1 1 0` nimmt der Text genau den Rest neben dem Bild.
             * Gemessene Textbreite dadurch: 198 px statt 204 (768),
             * 148 statt 180 (1024), 217 statt 213 (1200), 295 statt 250
             * (1440) – die leeren vier Zwölftel kommen dem Namen zugute.
             */
  }
  .is-act-cartpage .line-item-product:not(.is-offcanvas) > .line-item-row > .line-item-info > .line-item-row > .line-item-details {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
  .is-act-cartpage .cart-header-row > .cart-header-quantity {
    min-width: 152px;
  }
  .is-act-cartpage .cart-header-row > .cart-header-info {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
  .is-act-cartpage .cart-header-row::after {
    content: "";
    display: block;
    flex: 0 0 8.333333%;
    width: 8.333333%;
  }
}
/*
 * Der `.row` in quantity.html.twig bringt Bootstraps Rinne mit: Die Zeile
 * ragt 20 px über beide Innenkanten der Mengenspalte hinaus, ihre Kinder
 * holen dieselben 20 px als Polster zurück. Für die Breite hebt sich das auf,
 * für die Klickfläche nicht – das durchsichtige Polster liegt über der
 * Nachbarspalte. Gemessen mit elementsFromPoint über ein 21x11-Raster auf dem
 * Produktnamen: Der rechte Rand des Namens gehörte auf 1–7 px Breite dem
 * .line-item-quantity-select-wrapper, nicht dem Link (16 von 231 Punkten bei
 * 768, 12 bei 1024, 8 bei 1440). Ohne Rinne verschwindet die Überlappung,
 * ohne dass sich eine Spaltenbreite ändert.
 */
.is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-row {
  --bs-gutter-x: 0;
  margin: 0;
}
.is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-label, .is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-select-wrapper {
  padding: 0;
}
/*
 * Die 4 px Luft zwischen Produktname und Minus-Knopf (siehe „Preis der
 * Blockform" weiter oben). Sie muss NACH der Regel darüber stehen, die alle
 * Innenabstände der Mengenzeile auf Null setzt – gleiche Spezifität,
 * die spätere Regel gewinnt. Eine Medienabfrage erhöht die Spezifität nicht.
 *
 * Gemessen bei 768/1024/1440 nach der Änderung: Spalte unverändert 152 px,
 * Gruppe 140 statt 144 px, Zahlenfeld 46 statt 50 px, Minus 4 px weiter
 * rechts, Abstand zum Namen 12 statt 8 px, Plus weiterhin 4 px innerhalb
 * der Spaltenkante. Die Textspalte verliert dabei keinen Pixel.
 */
@media (min-width: 768px) {
  .is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-select-wrapper {
    padding-left: var(--rc-space-1);
  }
}
@media (max-width: 575.98px) {
  .is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--rc-space-3);
  }
  .is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-label, .is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-select-wrapper {
    flex: 0 0 auto;
    width: auto;
  }
  .is-act-cartpage .line-item-product:not(.is-offcanvas) .line-item-quantity-label {
    margin-bottom: 0;
  }
  .is-act-cartpage .line-item-product:not(.is-offcanvas) .quantity-selector-group {
    flex: 0 0 158px;
    width: 158px;
  }
  .is-act-cartpage .line-item-product:not(.is-offcanvas) .quantity-selector-group .js-quantity-selector, .is-act-cartpage .line-item-product:not(.is-offcanvas) .quantity-selector-group .quantity-selector-group-input {
    flex: 0 0 64px;
    width: 64px;
    min-width: 64px;
  }
}
.rc-cart-assurance {
  margin-top: var(--rc-space-5);
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-border);
  list-style: none;
  padding-left: 0;
}
.rc-cart-assurance li {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  margin-bottom: var(--rc-space-3);
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  line-height: 1.5;
}
.rc-cart-assurance li:last-child {
  margin-bottom: 0;
}
.rc-cart-assurance li .icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--rc-success, var(--rc-secondary));
  width: 18px;
  height: 18px;
}
.rc-cart-assurance li .icon > svg {
  width: 18px;
  height: 18px;
}
.rc-cart-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-4) var(--rc-space-6);
  margin-top: var(--rc-space-6);
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-border);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
}
.rc-empty-links {
  max-width: 760px;
  margin: 0 auto var(--rc-space-9);
}
.rc-empty-links__title {
  margin-bottom: var(--rc-space-4);
  text-align: center;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  letter-spacing: 0.02em;
  color: var(--rc-muted);
}
.rc-recent {
  max-width: 960px;
  margin: 0 auto var(--rc-space-9);
}
.rc-recent__title {
  margin-bottom: var(--rc-space-5);
  text-align: center;
  font-size: var(--rc-fs-lg);
}
.rc-recent__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--rc-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-recent__card {
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
  height: 100%;
  padding: var(--rc-space-3);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface);
  color: var(--rc-text);
  text-decoration: none;
  transition: border-color var(--rc-dur-card) var(--rc-ease), box-shadow var(--rc-dur-card) var(--rc-ease);
}
.rc-recent__card:hover, .rc-recent__card:focus-visible {
  border-color: var(--rc-secondary);
  box-shadow: var(--rc-shadow);
  color: var(--rc-text);
}
.rc-recent__image {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.rc-recent__text {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-1);
  min-width: 0;
}
.rc-recent__name {
  font-size: var(--rc-fs-sm);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-recent__price {
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-primary);
}
.rc-empty-links__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rc-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-empty-links__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--rc-control-md);
  padding: var(--rc-space-2) var(--rc-space-5);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  color: var(--rc-primary);
  text-decoration: none;
  transition: border-color var(--rc-dur-card) var(--rc-ease), background-color var(--rc-dur-card) var(--rc-ease);
}
.rc-empty-links__list a:hover, .rc-empty-links__list a:focus-visible {
  border-color: var(--rc-secondary);
  background-color: var(--rc-secondary-soft);
}
.rc-checkout-guest {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  margin-bottom: var(--rc-space-4);
  padding: var(--rc-space-4) var(--rc-space-5);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface-muted, var(--rc-primary-soft));
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  line-height: 1.5;
}
.rc-checkout-guest .icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--rc-primary);
  width: 20px;
  height: 20px;
}
.rc-checkout-guest .icon > svg {
  width: 20px;
  height: 20px;
}
.checkout-aside-summary-header, .checkout-aside-product-header {
  hyphens: auto;
  -webkit-hyphens: auto;
}
.checkout-aside-summary-label, .checkout-aside-summary-value {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.checkout-aside-summary-list .rc-summary-shipping-free {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  overflow-wrap: normal;
}
@media (max-width: 1199px) {
  .checkout-aside-summary-header, .checkout-aside-product-header {
    font-size: var(--rc-fs-xl);
  }
  .checkout-aside-summary-label, .checkout-aside-summary-value {
    font-size: var(--rc-fs-base);
    overflow-wrap: break-word;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body.is-act-cartpage .checkout .checkout-aside {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}
.cart-shipping-costs-btn.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: var(--rc-space-2);
  padding-bottom: var(--rc-space-2);
}
/*
 * ── Der Stückpreis am Telefon ist keine Fußnote ──────────────────────────
 *
 * Seit dem 30.08.2026 erscheint die Stückpreiszelle auf der Warenkorbseite
 * auch unter 576 px, sobald die Position rabattiert ist – nur dort trägt sie
 * Streichpreis und Rabattabzeichen (Begründung in
 * component/line-item/type/product.html.twig).
 *
 * Der Kern setzt diese Zelle im xs-Bereich kursiv und eine Stufe kleiner
 * (vendor/…/scss/component/_line-item.scss:325-331). Am Bildschirmfoto
 * nachgesehen: Streichpreis UND rotes Abzeichen standen dadurch schräg, und
 * „/ Stück" fiel in eine eigene Zeile. Ein Preis ist keine Fußnote.
 *
 * Dieselbe Zurücknahme führt das Theme im Seitenwarenkorb bereits
 * (`.rc-ocl .line-item-unit-price`, weiter oben in dieser Datei) – die
 * beiden Ansichten sehen damit gleich aus.
 */
@media (max-width: 575.98px) {
  .checkout-main .line-item-unit-price {
    font-size: var(--rc-fs-sm);
    font-style: normal;
  }
  .checkout-main .line-item-unit-price-value-descriptor {
    white-space: nowrap;
  }
}
.line-item .quantity-selector-group .js-quantity-selector, .line-item .quantity-selector-group .quantity-selector-group-input {
  font-size: var(--rc-fs-base);
}
.checkout-aside-add-code .form-control, .cart-add-product-container .form-control, .offcanvas-cart-promotion-form .form-control, .rc-oc__gutschein-feld .form-control {
  font-size: var(--rc-fs-base);
}
.cart-offcanvas .offcanvas-cart-actions .btn {
  font-size: var(--rc-fs-base);
}
/*
 * ── Die Lade zeigt, dass es weitergeht ───────────────────────────────────
 *
 * BEFUND der Endabnahme, zweimal: „Im Seitenwarenkorb bei 360 px ist keine
 * einzige Position vollständig zu sehen" und „An der Unterkante des
 * Seitenwarenkorbs wird Text mitten in der Zeile durchgeschnitten".
 *
 * Eigene Nachmessung:
 *
 *   360 x 740   .rc-oc__roll 292 x 301.2, scrollHeight 752 → 40 % sichtbar
 *               Position 1 y 131.1, Höhe 323.6 – höher als das Rollfeld
 *   768 x 900   Rollfeld endet y 621.2, Position 2 reicht bis y 715.7
 *   1440 x 900  identisch zu 768
 *
 *   Rollhinweis auf allen Breiten: Balkenbreite 0, mask-image 'none',
 *   box-shadow 'none', ::after content 'none'.
 *
 * Die Bildlaufleiste oben in dieser Datei ist gesetzt (`scrollbar-width:
 * auto` plus ::-webkit-scrollbar), erscheint aber nicht: Sobald
 * `scrollbar-width` gesetzt ist, gewinnt die Standardeigenschaft gegen die
 * ::-webkit-Pseudoelemente, und der Browser zeichnet eine überlagernde
 * Leiste ohne eigene Breite – gemessen offsetWidth − clientWidth = 0. Auf
 * die Leiste ist als Hinweis also kein Verlass.
 *
 * Deshalb ein Verlauf an der Kante, mit der bewährten Zwei-Schichten-
 * Technik: Die beiden ERSTEN Verläufe sind `local`, rollen also mit dem
 * Inhalt und decken den Schatten ab, sobald man oben bzw. unten angekommen
 * ist. Die beiden letzten sind `scroll`, kleben also an der Kante. Ergebnis:
 * Der Schatten steht genau dann, wenn dahinter noch etwas liegt – er ist
 * damit ein Hinweis und keine Verzierung. Kein JavaScript, kein zusätzliches
 * Element.
 */
.cart-offcanvas .rc-oc__roll {
  background-image: linear-gradient(var(--rc-surface) 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), var(--rc-surface) 70%), radial-gradient(farthest-side at 50% 0, rgba(var(--rc-scrim-rgb), 0.18), rgba(var(--rc-scrim-rgb), 0)), radial-gradient(farthest-side at 50% 100%, rgba(var(--rc-scrim-rgb), 0.18), rgba(var(--rc-scrim-rgb), 0));
  background-position: top, bottom, top, bottom;
  background-size: 100% 24px, 100% 24px, 100% 14px, 100% 14px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/*
 * ── Die Gesamtsumme steht fest über den Knöpfen ──────────────────────────
 *
 * BEFUND aus der Gegenprüfung: „Der Seitenwarenkorb nennt an keiner Stelle
 * eine Gesamtsumme." Eigene Nachmessung bei 360 und 1440 px – der sichtbare
 * Text lautete „Zwischensumme 934,40 € Versandkosten (Standard) + 0,00 € …
 * inkl. MwSt., versandkostenfrei"; /Gesamt/i auf den Summenblock ergab
 * false.
 *
 * Der Rest der Zusammenfassung rollt jetzt mit (Begründung in
 * component/checkout/offcanvas-cart.html.twig). Fest bleibt diese eine
 * Zeile. Sie ist der einzige Betrag, der beim Rollen im Blick bleiben muss,
 * und sie steht unmittelbar über „Zur Kasse" – also dort, wo die
 * Entscheidung fällt.
 *
 * --rc-fs-lg (22 px am Rechner, 20 px am Telefon) ist dieselbe Größe, in der
 * die Gesamtsumme auf /checkout/cart und /checkout/confirm steht.
 */
.rc-oc__gesamt {
  padding-top: var(--rc-space-3);
  border-top: 1px solid var(--rc-border);
}
.rc-oc__gesamt-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rc-space-3);
  color: var(--rc-text);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  line-height: var(--rc-lh-heading);
}
.rc-oc__gesamt-wert {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rc-oc__steuer {
  margin-top: var(--rc-space-1);
}
/*
 * Konto und Kundencenter.
 *
 * Ausgangslage (gemessen am 24.08.2026 gegen localhost:8000, Playwright):
 *  - `.card-body` hat auf JEDER Kontoseite und in jeder Breite
 *    padding: 0px. Bei 390 px ist die Karte 350 px breit, ihr Körper 348 px:
 *    Der Text liegt direkt auf dem 1-px-Rahmen. Das ist der eigentliche
 *    Grund für „das sieht ja schlimm aus" – keine Gestaltung, sondern ein
 *    fehlender Innenabstand.
 *  - Alle Eingabefelder messen 48 px Höhe. Vorgabe für 65–80: mindestens 56.
 *  - „Abmelden" misst 126,4 x 22 px, „Änderungen speichern" 211,4 x 40 px.
 *    Vorgabe: 44 x 44 px.
 *  - Fehlermeldungen (`.invalid-feedback`) stehen in 16 px – die kleinste
 *    Schrift der Seite ausgerechnet dort, wo etwas schiefgegangen ist.
 *  - Die Kartenbreiten im Kundencenter springen bei 1440 px zwischen
 *    541,3 px und 1124,7 px, ohne dass ein Inhalt das begründet.
 *
 * Es kommen ausschließlich vorhandene Tokens zum Einsatz: keine neue Farbe,
 * kein Verlauf, kein zweiter Schatten. Tiefe entsteht wie im übrigen Shop
 * über Rahmen und Weißraum (siehe components/_cards.scss).
 */
.account-register .card, .account-content .card {
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface);
  box-shadow: none;
  margin-bottom: var(--rc-space-5);
}
.account-register .card-body, .account-content .card-body {
  padding: var(--rc-space-5);
}
@media (min-width: 768px) {
  .account-register .card-body, .account-content .card-body {
    padding: var(--rc-space-6);
  }
}
.account-register .card-body > :last-child, .account-content .card-body > :last-child {
  margin-bottom: 0;
}
.account-register .card-header, .account-register .card-footer, .account-content .card-header, .account-content .card-footer {
  padding: var(--rc-space-4) var(--rc-space-5);
  background-color: transparent;
  border-color: var(--rc-border);
}
@media (min-width: 768px) {
  .account-register .card-header, .account-register .card-footer, .account-content .card-header, .account-content .card-footer {
    padding: var(--rc-space-4) var(--rc-space-6);
  }
}
.account-register h1, .account-register .h1, .account-content h1, .account-content .h1 {
  margin-bottom: var(--rc-space-6);
}
.account-register .card-title, .account-content .card-title {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  margin-bottom: var(--rc-space-5);
}
.account-register .form-control, .account-register .form-select, .account-register .custom-select, .account-content .form-control, .account-content .form-select, .account-content .custom-select {
  height: var(--rc-control-lg);
  min-height: var(--rc-control-lg);
  font-size: var(--rc-fs-base);
}
.account-register textarea.form-control, .account-content textarea.form-control {
  height: auto;
  min-height: 140px;
  padding: var(--rc-space-3) var(--rc-space-4);
}
.account-register .form-label, .account-content .form-label {
  margin-bottom: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
}
.account-register .form-group, .account-content .form-group {
  margin-bottom: var(--rc-space-5);
}
.account-register .invalid-feedback, .account-content .invalid-feedback {
  margin-top: var(--rc-space-2);
  padding: var(--rc-space-2) var(--rc-space-3);
  border-left: 3px solid var(--rc-red);
  background-color: var(--rc-red-soft);
  color: var(--rc-red-deep);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-medium);
  line-height: 1.5;
}
.account-register .btn-sm, .account-register .btn-group-sm > .btn, .account-content .btn-sm, .account-content .btn-group-sm > .btn {
  height: var(--rc-control-md);
  min-height: var(--rc-control-md);
  font-size: var(--rc-fs-sm);
}
.account-register .btn-link, .account-content .btn-link {
  min-height: 44px;
  padding: var(--rc-space-2) 0;
}
.rc-account-auth__jump {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-3);
  margin-bottom: var(--rc-space-6);
}
@media (min-width: 576px) {
  .rc-account-auth__jump {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .rc-account-auth__jump {
    display: none;
  }
}
.rc-account-auth__jump-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rc-control-lg);
  padding: var(--rc-space-3) var(--rc-space-4);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  color: var(--rc-primary);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  text-align: center;
  text-decoration: none;
}
.rc-account-auth__jump-link:hover, .rc-account-auth__jump-link:focus-visible {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
  text-decoration: none;
}
.rc-account-auth__col:focus {
  outline: none;
}
.rc-account-auth__image {
  display: none;
}
@media (min-width: 992px) {
  .rc-account-auth__image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--rc-space-5);
    border-radius: var(--rc-radius-card);
    max-height: 320px;
    object-fit: cover;
  }
}
.rc-account-auth__col--register select[name="salutationId"] {
  min-width: 220px;
}
.login-advantages {
  padding: var(--rc-space-5) 0 0;
}
.login-advantages .login-advantages-header {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  margin-bottom: var(--rc-space-3);
}
.login-advantages ul {
  margin: 0;
  padding-left: var(--rc-space-5);
}
.login-advantages li {
  margin-bottom: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-text-soft);
}
.login-submit .btn {
  height: var(--rc-control-lg);
  min-height: var(--rc-control-lg);
  font-size: var(--rc-fs-base);
  width: 100%;
}
@media (min-width: 576px) {
  .login-submit .btn {
    width: auto;
    min-width: 220px;
  }
}
.login-password-recover {
  margin-top: calc(var(--rc-space-2) * -1);
  margin-bottom: var(--rc-space-5);
}
.login-password-recover a {
  font-size: var(--rc-fs-sm);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.login-form-description {
  margin-bottom: var(--rc-space-5);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
}
.account-content .card-actions {
  margin-top: var(--rc-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
}
/*
 * Eine Breite für das ganze Kundencenter.
 *
 * Vorher trug nur die Übersichtsseite einen Deckel. Gemessen am 29.08.2026
 * bei 1440 px Fensterbreite ergab das einen Sprung zwischen den Unterseiten:
 *
 *   Übersicht     Karten 430 / 900 / 430 / 430 / 900 px
 *   Profil        Karten 1127 / 1127 px
 *
 * Wer von „Übersicht" auf „Persönliches Profil" wechselt, sieht die Fläche um
 * 227 px auseinanderspringen – und ein Eingabefeld, das über 1127 px läuft.
 * Für Vorname und Nachname ist das keine Hilfe, sondern eine Zeile, an deren
 * Ende man nicht mehr weiß, wo sie anfing.
 *
 * 900 px gelten deshalb für alle Unterseiten. Die Bestellhistorie leidet
 * nicht darunter: Ihre Tabelle hat vier Spalten und stand vorher in einer
 * schmaleren Spalte (col-xl-10 minus col-xl-2 Menü = gemessen 1127 px, davon
 * für die Tabelle rund 700 px, in denen „Zahlungsstatus" umbrach).
 */
.account-content-main {
  max-width: 900px;
}
.account-aside {
  margin-bottom: var(--rc-space-6);
}
@media (min-width: 992px) {
  .account-aside {
    margin-bottom: 0;
  }
}
.account-aside .card {
  margin-bottom: 0;
}
.account-aside-header {
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
}
.account-aside-list-group {
  padding: var(--rc-space-3);
  gap: var(--rc-space-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 992px) {
  .account-aside-list-group {
    display: block;
    padding: var(--rc-space-2);
  }
}
.account-aside-item {
  display: flex;
  align-items: center;
  /*
     * 68 px, nicht 56.
     *
     * Gemessen am 30.08.2026 über alle fünf Breiten: Die fünf Menüeinträge
     * maßen 68,2 / 68,2 / 56 / 56 / 44 px bei 360 px und 56 / 68,2 / 56 / 56
     * / 44 px bei 1440 px. Ursache ist „Persönliches Profil" – der längste
     * Eintrag bricht auf zwei Zeilen, die anderen nicht. Der Rhythmus der
     * Liste brach damit auf drei von fünf Breiten.
     *
     * Die Mindesthöhe auf den größeren der beiden gemessenen Werte zu setzen
     * ist die Lösung, die ohne Textänderung auskommt: Sie hält die Liste
     * gleichmäßig, auch wenn ein Eintrag später länger wird oder eine
     * englische Übersetzung anders umbricht. Eine Kürzung auf „Mein Profil"
     * wäre die andere – sie würde denselben Umbruch beim nächsten längeren
     * Menüpunkt wieder erzeugen.
     */
  min-height: 68px;
  padding: var(--rc-space-3) var(--rc-space-4);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-medium);
  line-height: 1.3;
  text-decoration: none;
}
@media (min-width: 992px) {
  .account-aside-item {
    border-color: transparent;
    margin-bottom: var(--rc-space-1);
  }
}
.account-aside-item:hover, .account-aside-item:focus-visible {
  background-color: var(--rc-primary-softer);
  border-color: var(--rc-primary);
  color: var(--rc-primary-dark);
  text-decoration: none;
}
.account-aside-item.is-active {
  background-color: var(--rc-primary-soft);
  border-color: var(--rc-primary);
  color: var(--rc-primary-dark);
  font-weight: var(--rc-fw-semibold);
}
.account-aside-footer .account-aside-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  min-height: 44px;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
}
.address-item-default-badge {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
  border-radius: var(--rc-radius-control);
  font-size: var(--rc-fs-xs);
}
.account-welcome {
  margin-bottom: var(--rc-space-6);
}
.account-welcome p {
  max-width: var(--rc-measure);
  font-size: var(--rc-fs-base);
  color: var(--rc-text-soft);
  margin-bottom: 0;
}
.account-content .order-table, .account-content .address-card {
  border-color: var(--rc-border);
}
/*
 * ══ Nachtrag vom 30.08.2026 ═════════════════════════════════════════════
 *
 * Die folgenden Regeln stammen aus der Abnahme vor dem Live-Gang. Jede
 * trägt ihren Messwert; alle betreffen Stellen, an denen der Shopware-Kern
 * durchschlägt, weil das Theme sie bisher nicht angefasst hatte.
 */
/*
 * Der Bestellstatus stand in weißer Schrift auf Bootstrap-Cyan.
 *
 * Gemessen auf /account/order, identisch auf allen fünf Breiten:
 * rgb(85, 180, 230) hinter rgb(255, 255, 255) bei 17 px Schrift ergibt
 * 2,32:1. WCAG 2.1 AA verlangt 4,5:1 – das ist gut die Hälfte, und der
 * schlechteste Kontrast im gesamten Kontobereich (alle übrigen: 4,11 bis
 * 19,98). Es ist dieselbe Farbe, die weiter oben für
 * .address-item-default-badge schon einmal ersetzt wurde.
 *
 * Getönte Fläche mit dunkler Schrift statt Vollfarbe mit weißer: derselbe
 * Bauplan wie beim Standardadress-Abzeichen, und derselbe, den die
 * Aktionsabzeichen der Produktkarten benutzen.
 *
 * Der Kern vergibt die Zustandsklasse aus dem technischen Namen des
 * Bestellstatus (order-item.html.twig:49). Abgedeckt sind die Zustände, die
 * Shopware im Auslieferungszustand kennt; ein unbekannter Zustand fällt auf
 * die neutrale Grundregel zurück und ist damit auch dann lesbar.
 */
.order-item-status-badge {
  border-radius: var(--rc-radius-control);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
}
.order-item-status-badge, .order-item-status-badge.order-item-status-badge-open, .order-item-status-badge.order-item-status-badge-in_progress {
  background-color: var(--rc-surface-warm);
  color: var(--rc-text);
}
.order-item-status-badge.order-item-status-badge-completed, .order-item-status-badge.order-item-status-badge-paid, .order-item-status-badge.order-item-status-badge-shipped {
  background-color: var(--rc-success-soft);
  color: var(--rc-primary-dark);
}
.order-item-status-badge.order-item-status-badge-cancelled, .order-item-status-badge.order-item-status-badge-failed, .order-item-status-badge.order-item-status-badge-refunded {
  background-color: var(--rc-red-soft);
  color: var(--rc-red-deep);
}
.order-item-status-badge.bg-danger {
  background-color: var(--rc-red-soft);
  color: var(--rc-red-deep);
}
/*
 * Die Adressverwaltung war die einzige Kontoseite im Shopware-Rohzustand.
 *
 * Gemessen: Adresskästen mit border-radius 0 und 16 px Innenabstand, während
 * jede andere Karte im Konto 12 px Radius und 32 px trägt. Dazu drei
 * handfeste Fehler auf dem Telefon (360 px):
 *
 *   1. Das Dreipunktmenü ist 442,3 px breit und ragt 82,3 px aus dem Bild.
 *      „Adresse löschen" steht außerhalb.
 *   2. Das Suchfeld schrumpft auf 34 px – ein leerer weißer Kasten, in dem
 *      kein Zeichen Platz hat. Ursache: eine Flex-Zeile ohne Umbruch
 *      (addresses-base.html.twig:15, `d-flex justify-content-between gap-3`).
 *   3. Der Dreipunktknopf misst 34 x 34 px und ist der einzige Weg zu
 *      Bearbeiten, Standard setzen und Löschen.
 */
.address-manager-select-address {
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-5);
}
@media (min-width: 768px) {
  .address-manager-select-address {
    padding: var(--rc-space-6);
  }
}
/*
 * Der Knopf, hinter dem alle Adressaktionen stecken, auf Zielgröße.
 *
 * Gemessen: 34 x 33,6 px bei 360 px und 34 x 34,3 px bei 1440 px. Dahinter
 * stecken Bearbeiten, zwei Standardwahlen und Löschen – auf derselben Seite
 * misst „Neue Adresse hinzufügen" 291,3 x 48 px, also die dreizehnfache
 * Fläche für die seltenere Aktion.
 *
 * Der Selektor hängt an data-bs-toggle, nicht an .bg-transparent: Die
 * Hilfsklassen im Markup (address-manager-item.html.twig:33) können sich mit
 * jedem Shopware-Update ändern, das Dropdown-Attribut nicht.
 */
.address-manager-select-address [data-bs-toggle="dropdown"], .address-manager-list-wrapper [data-bs-toggle="dropdown"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--rc-radius-control);
}
.address-manager-select-address [data-bs-toggle="dropdown"]:hover, .address-manager-select-address [data-bs-toggle="dropdown"]:focus-visible, .address-manager-list-wrapper [data-bs-toggle="dropdown"]:hover, .address-manager-list-wrapper [data-bs-toggle="dropdown"]:focus-visible {
  background-color: var(--rc-primary-softer);
}
/*
 * Das Menü darf nicht breiter sein als das Fenster.
 *
 * Die vier Einträge sind lang („Als Standard-Lieferadresse verwenden"),
 * deshalb wird nicht die Schrift verkleinert, sondern der Umbruch erlaubt.
 * Rechtsbündig, weil der auslösende Knopf rechts in der Karte sitzt.
 */
.address-manager-select-address .dropdown-menu, .address-manager-list-wrapper .dropdown-menu {
  max-width: calc(100vw - var(--rc-space-5));
  border-radius: var(--rc-radius-card);
  border-color: var(--rc-border);
}
.address-manager-select-address .dropdown-menu .dropdown-item, .address-manager-list-wrapper .dropdown-menu .dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: normal;
  line-height: 1.35;
}
/*
 * Suchfeld und „Neue Adresse" nebeneinander erst, wenn beide hineinpassen.
 *
 * Der Kern setzt die Zeile auf `d-flex justify-content-between gap-3` ohne
 * Umbruch (addresses-base.html.twig:15). Bei 360 px blieben dem Suchfeld
 * damit 34 px. `flex-wrap` allein genügt nicht: Ohne eine Grundbreite
 * schrumpft ein Flex-Kind bis auf seinen Inhalt, und ein leeres Suchfeld hat
 * keinen. Die 240 px sind die Grundbreite, ab der eine Suchanfrage lesbar
 * bleibt; darunter nimmt das Feld die ganze Zeile.
 */
.address-manager-list-base > .d-flex {
  flex-wrap: wrap;
  align-items: flex-end;
}
.address-manager-list-search-wrap {
  flex: 1 1 240px;
  min-width: min(240px, 100%);
  margin-bottom: 0;
}
/*
 * Zwei Textlinks, hinter denen die wichtigsten Kontoaktionen stecken.
 *
 * Gemessen: „E-Mail-Adresse ändern" 215 x 23 px, „Passwort ändern"
 * 157,4 x 23 px – auf jeder Breite gleich. WCAG 2.2 AA verlangt 24 x 24 px,
 * die Vorgabe dieses Themes für den Kontobereich sind 44 px. Die Regel für
 * .btn-link weiter oben greift nicht, weil diese beiden Links die Klasse
 * nicht tragen.
 */
.account-profile-change {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--rc-space-2) 0;
}
/*
 * „Änderungen speichern" war fast unsichtbar.
 *
 * Gemessen auf /account/profile bei 1440 px: Fläche rgb(251, 249, 246) auf
 * weißer Karte = 1,02:1, Rahmen rgb(227, 221, 211) = 1,35:1. WCAG 2.1 AA
 * verlangt 3:1 für die Begrenzung eines Bedienelements. Der gleichwertige
 * Knopf „Adresse speichern" auf /account/address/create ist dagegen grün
 * gefüllt mit 7,49:1 Textkontrast.
 *
 * Zwei Speicherknöpfe desselben Bereichs dürfen nicht verschieden aussehen.
 * Der abschließende Knopf eines Formulars ist die Hauptaktion – er bekommt
 * die Hauptfarbe. `btn-light` bleibt für Nebenwege.
 */
.account-content .profile-form-submit, .account-content button[type="submit"].btn-light, .account-content .btn-light[type="submit"] {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}
.account-content .profile-form-submit:hover, .account-content .profile-form-submit:focus-visible, .account-content button[type="submit"].btn-light:hover, .account-content button[type="submit"].btn-light:focus-visible, .account-content .btn-light[type="submit"]:hover, .account-content .btn-light[type="submit"]:focus-visible {
  background-color: var(--rc-primary-hover);
  border-color: var(--rc-primary-hover);
  color: #fff;
}
/*
 * Die Bestelltabelle: Kopf und Werte standen nicht übereinander.
 *
 * Gemessen bei 768 und 1024 px: Die Kopfzellen beginnen bei x = 41 / 172,2 /
 * 313,4 / 454,6, die Wertzellen darunter bei 41 / 160,1 / 289,1 / 418,2 –
 * ein Versatz von bis zu 36,4 px. „Standard" steht damit 36 px links unter
 * „Versandart". Ab 1440 px stimmt es. Ursache: Der Kern nimmt der Kopfzeile
 * ihre Rinne (_order.scss:98), der Wertzeile nicht.
 *
 * Dazu die Trennung: „Zahlungsstatus" wird mit hyphens:auto zu
 * „Zahlungs-status" und macht die Kopfzeile doppelt so hoch wie nötig
 * (64,6 statt 32,3 px), während die drei Nachbarn einzeilig bleiben.
 * Tabellenköpfe sind Beschriftungen, keine Fließtextspalten – hier wird
 * nicht getrennt.
 */
.account-content .order-table-header-order-table-header, .account-content .order-table-header-order-table-body {
  padding-inline: var(--rc-space-3);
}
.account-content .order-table-header-order-table-header, .account-content .order-table-header-order-table-header * {
  hyphens: manual;
}
/*
 * Beschriftungslisten im Konto brechen nicht mehr mitten im Wort.
 *
 * Gemessen in der aufgeklappten Bestellansicht bei 360 px: Die
 * Beschriftungsspalte ist 139 px breit, fünf Beschriftungen laufen dadurch
 * zweizeilig – „Zahlungs-status", „Bestell-nummer", „Paketver-folgung",
 * „Versand-kosten". Bei 1440 px steht dieselbe Liste in 226 px einzeilig,
 * dort gibt es null Umbrüche.
 *
 * Unter 576 px steht die Beschriftung über dem Wert statt daneben. Das ist
 * die Anordnung, die auch der Bestellweg auf dem Telefon benutzt.
 */
.account-content dl dt, .account-content dl dd {
  hyphens: manual;
}
@media (max-width: 575.98px) {
  .account-content .order-detail-content-header dt, .account-content .order-detail-content-header dd, .account-content dl.row dt, .account-content dl.row dd {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .account-content dl.row dt {
    margin-bottom: 0;
  }
  .account-content dl.row dd {
    margin-bottom: var(--rc-space-3);
  }
}
/*
 * Eine H1-Größe je Breite im ganzen Kontobereich.
 *
 * Gemessen: Sieben Kontoseiten tragen bei 360 px 27 px und ab 768 px 46 px.
 * Aus der Reihe fielen /account/recover mit 34 px (+26 %) und der LEERE
 * Merkzettel mit 34 px (−26 %) – der gefüllte Merkzettel wieder 46 px.
 * Beide Seiten rendern ihre H1 außerhalb von .account-content und greifen
 * deshalb nicht auf die Regeln weiter oben zu.
 */
.is-ctl-auth .account-recover h1, .is-ctl-auth .account-recover .h1, .is-act-recoverpage h1, .is-act-recoverpage .h1, .is-ctl-wishlist h1, .is-ctl-wishlist .h1 {
  font-size: var(--rc-fs-3xl);
}
/*
 * Der Merkzettel stand als einzige angemeldete Seite mittig.
 *
 * Gemessen bei 1440 px: H1-Textkante auf /account und /account/order jeweils
 * 273,3 px, auf /wishlist 572 px – der Text sitzt mittig in einem 1360 px
 * breiten Kasten. Der Merkzettel bleibt bewusst eine eigene Seite ohne
 * Kontomenü (er ist auch ohne Anmeldung erreichbar), aber er soll nicht
 * aussehen wie eine fremde Anwendung.
 */
.is-ctl-wishlist .cms-listing-row > .cms-listing-col > h1, .is-ctl-wishlist .cms-listing-row > .cms-listing-col > .h1, .is-ctl-wishlist .wishlist-empty, .is-ctl-wishlist h1, .is-ctl-wishlist .h1 {
  text-align: left;
}
/*
 * Bestellvorgang: Warenkorb → Versandinformationen → Bestellung abschließen.
 *
 * Ausgangslage, gemessen am 24.08.2026 gegen localhost:8000 mit Playwright.
 * Der komplette Weg wurde als Gast durchlaufen (Aufstehsessel Levano,
 * 599,00 €) in 1440x1000, 768x1024 und 390x844:
 *
 *   Seitenwechsel  4   (Produktseite → Warenkorb → /checkout/register →
 *                       /checkout/confirm)
 *   Pflichtfelder  7   (Vorname, Nachname, E-Mail, Straße, PLZ, Ort, Land)
 *   Klicks         9   bis zur Bestellübersicht
 *
 * Die fünf gemessenen Mängel, die hier behoben werden:
 *
 *  1. Die Telefonnummer verschwindet unter 768 px komplett aus dem
 *     Bestellvorgang. Gemessen auf /checkout/register und /checkout/confirm:
 *     bei 1440 px ist `.header-minimal-contact` 467x65 px, bei 768 px
 *     256x129 px, bei 390 px `display: none` und 0x0 – die Nummer steht im
 *     Snippet (header.supportInfo enthält einen tel:-Link), der Kern blendet
 *     den ganzen Block aber unter md aus (_header-minimal.scss:21-23).
 *     Für 65–80-Jährige, die auf dem Handy bestellen, ist das der Punkt,
 *     an dem der Vorgang endet statt weiterzugehen.
 *
 *  2. Jede Karte im Bestellvorgang hat einen 1-px-Rahmen und 0 px
 *     Innenabstand. Gemessen auf /checkout/register (`.register-card`,
 *     893x1077 px) und auf allen fünf Karten von /checkout/confirm
 *     (AGB, Liefer- und Rechnungsadresse, Zahlungsart, Versandart):
 *     Abstand zwischen Rahmenkante und erstem Inhalt = 1 px, waagerecht
 *     wie senkrecht. Derselbe Fehler wurde auf den Kontoseiten bereits
 *     behoben (siehe layout/_account.scss); der Bestellvorgang lag außerhalb
 *     jener Selektoren (`.account-register, .account-content`).
 *
 *  3. Die Eingabefelder messen 48 px. Vorgabe für diese Zielgruppe: ab 56.
 *     Gemessen alle neun Felder auf /checkout/register in allen drei Breiten.
 *
 *  4. Die Kästchen „Kundenkonto anlegen", „Lieferadresse weicht ab" und
 *     „Ich habe die AGB gelesen" sind 22x22 px, ihre Zeile 40 px hoch, die
 *     Beschriftung 31–32 px. Vorgabe: 44x44 px Klickfläche. Ausgerechnet
 *     das AGB-Kästchen ist Pflicht – wer es nicht trifft, kommt nicht weiter.
 *
 *  5. Fehlermeldungen stehen zwar beim Feld und in Klartext („Die Eingabe
 *     darf nicht leer sein.", 6 Stück nach leerem Absenden), aber in 16 px –
 *     der kleinsten Schrift der Seite.
 *
 * Dazu kommen die Stile für zwei neue Bausteine:
 *   - `.rc-checkout-steps` (component/checkout/rc-checkout-steps.html.twig)
 *   - `.rc-summary-shipping-free` (page/checkout/summary/summary-shipping)
 *
 * Es kommen ausschließlich vorhandene Tokens zum Einsatz: keine neue Farbe,
 * kein Verlauf, kein zusätzlicher Schatten, kein neuer Radius.
 */
.checkout-main .register-card > .card-body, .checkout-main .checkout-card > .card-body, .checkout-main .login-card > .card-body {
  padding: var(--rc-space-3) var(--rc-space-4);
}
@media (min-width: 768px) {
  .checkout-main .register-card > .card-body, .checkout-main .checkout-card > .card-body, .checkout-main .login-card > .card-body {
    padding: var(--rc-space-4) var(--rc-space-5);
  }
}
.checkout-main .register-card > .card-body > :last-child, .checkout-main .checkout-card > .card-body > :last-child, .checkout-main .login-card > .card-body > :last-child {
  margin-bottom: 0;
}
.checkout-main .register-form .form-control, .checkout-main .register-form .form-select, .checkout-main .register-form .custom-select {
  height: var(--rc-control-md);
  min-height: var(--rc-control-md);
  font-size: var(--rc-fs-base);
}
.checkout-main .register-form textarea.form-control {
  height: auto;
  min-height: 140px;
  padding: var(--rc-space-3) var(--rc-space-4);
}
.checkout-main .register-form .form-label {
  margin-bottom: var(--rc-space-1);
  font-size: var(--rc-fs-sm);
  line-height: 1.25;
}
.checkout-main .register-form .form-group {
  margin-bottom: var(--rc-space-3);
}
.register-guest-control, .register-different-shipping, .confirm-tos .form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  min-height: 44px;
  padding-left: 0;
}
.register-guest-control .form-check-input, .register-different-shipping .form-check-input, .confirm-tos .form-check .form-check-input {
  flex: 0 0 auto;
  float: none;
  width: 24px;
  height: 24px;
  margin: 10px 0 0;
}
.register-guest-control label, .register-different-shipping label, .confirm-tos .form-check label {
  display: block;
  min-height: 44px;
  padding: 10px 0;
  font-size: var(--rc-fs-sm);
  line-height: 1.4;
  cursor: pointer;
}
.checkout-main .invalid-feedback, .checkout-main .form-error {
  margin-top: var(--rc-space-2);
  padding: var(--rc-space-2) var(--rc-space-3);
  border-left: 3px solid var(--rc-red);
  background-color: var(--rc-red-soft);
  color: var(--rc-red-deep);
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-medium);
  line-height: 1.5;
}
.rc-checkout-submit__hint {
  margin: 0 0 var(--rc-space-3);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1.5;
  text-align: center;
}
.rc-checkout-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-2) var(--rc-space-5);
  margin: 0 0 var(--rc-space-3);
  padding: 0 0 var(--rc-space-2);
  border-bottom: 1px solid var(--rc-border);
  list-style: none;
}
.rc-checkout-steps__item {
  display: flex;
  align-items: center;
}
.rc-checkout-steps__link {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  min-height: 32px;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  text-decoration: none;
}
a.rc-checkout-steps__link {
  min-height: 44px;
  color: var(--rc-primary);
}
a.rc-checkout-steps__link:hover, a.rc-checkout-steps__link:focus-visible {
  color: var(--rc-primary-dark);
  text-decoration: underline;
}
.rc-checkout-steps__nr {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-surface);
  color: inherit;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.rc-checkout-steps__item.is-current .rc-checkout-steps__link {
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
}
.rc-checkout-steps__item.is-current .rc-checkout-steps__nr {
  border-color: var(--rc-primary);
  background-color: var(--rc-primary);
  color: #ffffff;
}
.rc-checkout-steps__item.is-done .rc-checkout-steps__nr {
  border-color: var(--rc-primary);
  color: var(--rc-primary);
}
.rc-checkout-steps {
  gap: var(--rc-space-2) var(--rc-space-4);
}
a.rc-checkout-steps__link {
  min-width: 44px;
  justify-content: center;
}
.rc-checkout-steps__item:not(.is-current) .rc-checkout-steps__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*
 * ── Die Standzeile auf /checkout/confirm ─────────────────────────────────
 *
 * BEFUND der Endabnahme: „Die Schrittanzeige fehlt genau auf der letzten
 * Seite des Bestellwegs." Eigene Nachmessung – Abfrage nach
 * .rc-checkout-steps, .checkout-steps und [class*=progress] auf
 * /checkout/confirm bei 360, 768, 1024 und 1440 px: null Treffer.
 *
 * Die LEISTE kommt dort nicht zurück (Begründung in
 * page/checkout/confirm/index.html.twig ab Zeile 86: zwei Wegweiser
 * übereinander, gemessen 53 px bei 1440/768 und 93 px bei 390). Statt dessen
 * eine Zeile Text über der Überschrift.
 *
 * Sie trägt bewusst keinen Rahmen und keine Fläche: Sie soll die Überschrift
 * einordnen, nicht mit ihr um Aufmerksamkeit streiten. --rc-fs-sm (17 px)
 * ist die dokumentierte Stufe für Metatext – und ein Wegweiser ist genau
 * das.
 */
.rc-checkout-stand {
  margin: 0 0 var(--rc-space-2);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.4;
}
.rc-summary-shipping-free__tag {
  display: block;
  margin-top: 2px;
  color: var(--rc-primary-dark);
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.3;
}
/*
 * ── 6. Verdichtung: der Bestellknopf muss ohne Scrollen erreichbar sein ──
 *
 * Bewusste Ausnahme von der 19-px-Regel des Benchmarks. Im Bestellvorgang
 * zählt Übersicht auf einen Blick mehr als Leseabstand: Wer nicht sieht,
 * was er bestellt und was es kostet, bricht ab. Die harten Grenzen bleiben
 * trotzdem stehen – nichts unter 16 px, Klickflächen ab 44 px, Knöpfe 56 px.
 *
 * ── Ausgangsmessung, 25.08.2026, Playwright, echter Gast-Durchlauf mit
 *    einem Aufstehsessel Levano im Warenkorb ─────────────────────────────
 *
 *                          1440x900              390x844
 *   /checkout/confirm
 *     Dokumenthöhe            2364 px              3332 px
 *     Bestellknopf bei y      1994 px              2682 px
 *     Karten                  6, je 1 px Rahmen, 32 bzw. 24 px Innenabstand
 *     H1                        46 px                27 px
 *     Fließtext in Karten       19 px / 1,7          18 px / 1,7
 *
 *   /checkout/register
 *     Dokumenthöhe            2027 px              3799 px
 *     Weiter-Knopf bei y      1561 px              2160 px
 *
 * Der Auditbericht nennt y=1997 bei 1440x1000 – dieselbe Stelle.
 *
 * ── Der größte Einzelposten: Die Zusammenfassung stand UNTER der Seite ──
 *
 * Gemessen auf /checkout/confirm bei 1440x900: `.checkout-main` liegt bei
 * y=190 und ist 1403 px hoch, `.checkout-aside` beginnt bei y=1593 – also
 * erst unterhalb. Rechts neben der Hauptspalte lagen dabei 467 px über die
 * volle Höhe brach.
 *
 * Ursache ist die Spaltenrechnung des Kerns (vendor …/page/checkout/
 * _confirm.scss, Zeilen 10–28):
 *
 *     .checkout-main  -> .col-lg-8 + .offset-lg-2   = 66,7 % + 16,7 %
 *     .checkout-aside -> .col-lg-4 + .offset-md-6   = 33,3 % + 50,0 %
 *
 * 83,3 % + 83,3 % passen nicht in eine Bootstrap-Zeile, also bricht die
 * Zusammenfassung um. Auf /checkout/register tritt das nicht auf – dort
 * trägt die Hauptspalte keinen Offset, und beide Spalten stehen gemessen
 * bei y=190 nebeneinander.
 *
 * Behoben wird nur der Versatz, nicht die Spaltenbreite: 66,7 % + 33,3 %
 * ergeben genau eine Zeile. Die Hauptspalte behält ihre 933 px.
 */
body.is-act-confirmpage, body.is-act-checkoutregisterpage {
  /*
     * Karten ohne Rahmen, dafür auf Sandfläche.
     *
     * Vorgabe des Benchmarks: Sektionstrennung über Flächenfarbe statt
     * Haarlinien, keine beliebigen Cards. Weiß auf Off-White (--rc-surface
     * auf --rc-bg) wäre ohne Rahmen nicht mehr unterscheidbar; Sand
     * (#f2ede5) auf Off-White (#fbf9f6) ist eine ruhige, sichtbare Kante
     * ohne Linie. Beide Werte stehen bereits in _tokens.scss, es kommt
     * keine Farbe hinzu.
     */
  /*
     * Fließtext in den Karten auf 17 px (Handy 16 px) mit Zeilenhöhe 1,45.
     *
     * Gemessen: 19 px bei Zeilenhöhe 1,7 ergeben 32,3 px je Zeile. Eine
     * Adresskarte mit sechs Zeilen belegt damit 194 px allein für Text.
     * Mit 17 px und 1,45 sind es 24,7 px je Zeile, also 148 px – 46 px
     * weniger je Adresse, bei zwei Adressen nebeneinander 46 px Seitenhöhe.
     *
     * 17 px ist --rc-fs-sm und damit die Label-Stufe der Skala, nicht
     * irgendein Zwischenwert. Auf dem Handy sind es 16 px: die Untergrenze
     * aus _tokens.scss, nicht darunter.
     */
  /*
     * Überschrift.
     *
     * 46 px sind auf der Startseite richtig – im Bestellvorgang steht
     * darüber schon die Schrittleiste mit demselben Wort, und der Blick
     * muss zum Formular, nicht zur Überschrift. --rc-fs-xl sind 27 px am
     * Rechner und 23 px auf dem Handy; damit bleibt sie die größte Schrift
     * der Seite.
     */
  /*
     * Abstand zwischen den Kartenreihen.
     *
     * Der Kern setzt auf allen vier Blöcken $spacer-lg, gemessen 24 px.
     * Zwischen zwei Sandflächen genügen 12 px, um sie als getrennt zu
     * lesen – die Fläche trennt, nicht der Abstand.
     */
}
body.is-act-confirmpage .checkout, body.is-act-checkoutregisterpage .checkout {
  padding-top: var(--rc-space-4);
}
body.is-act-confirmpage .checkout-main .card, body.is-act-checkoutregisterpage .checkout-main .card {
  border: 0;
  background-color: var(--rc-surface-warm);
}
body.is-act-confirmpage .checkout-main .card-body, body.is-act-checkoutregisterpage .checkout-main .card-body {
  font-size: var(--rc-fs-sm);
  line-height: 1.45;
}
body.is-act-confirmpage .checkout-main .card-title, body.is-act-confirmpage .checkout-main legend.card-title, body.is-act-checkoutregisterpage .checkout-main .card-title, body.is-act-checkoutregisterpage .checkout-main legend.card-title {
  margin-bottom: var(--rc-space-2);
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.3;
}
body.is-act-confirmpage .confirm-main-header, body.is-act-confirmpage .address-main-header, body.is-act-checkoutregisterpage .confirm-main-header, body.is-act-checkoutregisterpage .address-main-header {
  margin-bottom: var(--rc-space-3);
  font-size: var(--rc-fs-xl);
  line-height: var(--rc-lh-tight);
}
body.is-act-confirmpage .confirm-main-header-item-counter, body.is-act-checkoutregisterpage .confirm-main-header-item-counter {
  margin-bottom: 0;
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-tight);
}
body.is-act-confirmpage .confirm-tos, body.is-act-confirmpage .confirm-address, body.is-act-confirmpage .confirm-payment-shipping, body.is-act-confirmpage .confirm-payment, body.is-act-confirmpage .confirm-product, body.is-act-checkoutregisterpage .confirm-tos, body.is-act-checkoutregisterpage .confirm-address, body.is-act-checkoutregisterpage .confirm-payment-shipping, body.is-act-checkoutregisterpage .confirm-payment, body.is-act-checkoutregisterpage .confirm-product {
  margin-bottom: var(--rc-space-3);
}
body.is-act-confirmpage .confirm-payment-current, body.is-act-confirmpage .confirm-shipping-current, body.is-act-checkoutregisterpage .confirm-payment-current, body.is-act-checkoutregisterpage .confirm-shipping-current {
  margin-bottom: var(--rc-space-3);
}
body.is-act-confirmpage .checkout-aside-summary-label, body.is-act-confirmpage .checkout-aside-summary-value, body.is-act-checkoutregisterpage .checkout-aside-summary-label, body.is-act-checkoutregisterpage .checkout-aside-summary-value {
  font-size: var(--rc-fs-base);
  line-height: 1.45;
}
body.is-act-confirmpage .checkout-aside-summary-total, body.is-act-checkoutregisterpage .checkout-aside-summary-total {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
}
body.is-act-confirmpage .checkout-main .line-item-label, body.is-act-checkoutregisterpage .checkout-main .line-item-label {
  font-size: var(--rc-fs-sm);
  line-height: 1.45;
}
/*
 * Zusammenfassung neben statt unter die Hauptspalte – und mitlaufend.
 *
 * Erst ab lg (992 px), denn nur dort steht die Hauptspalte auf 66,7 %.
 * Darunter belegt sie 100 % und die Zusammenfassung gehört zu Recht
 * darunter; der `offset-md-6` des Kerns hält sie dort rechtsbündig, das
 * bleibt unangetastet.
 *
 * `position: sticky` ist auf /checkout/confirm belegbar sicher: Die
 * Zusammenfassung ist dort gemessen 457 px hoch, das Fenster mindestens
 * 900 px – sie kann nicht oben und unten zugleich abgeschnitten werden.
 * Auf /checkout/register wird sie NICHT festgeklebt: Dort ist derselbe
 * Block gemessen 848 px hoch und würde bei einem 900-px-Fenster mit
 * 24 px Abstand nach oben schon anstoßen.
 */
@media (min-width: 992px) {
  body.is-act-confirmpage .checkout .checkout-main {
    margin-left: 0;
  }
  body.is-act-confirmpage .checkout .checkout-aside {
    margin-left: 0;
  }
  body.is-act-confirmpage .checkout .checkout-aside-container {
    position: sticky;
    top: var(--rc-space-5);
  }
}
/*
 * ── 7. Zahlungs- und Versandart: 44 px, auch beim Verdichten ─────────────
 *
 * Die Verdichtung darf keine Klickfläche kosten. Gemessen auf
 * /checkout/confirm bei 1440x900, drei Zahlungsarten und zwei Versandarten:
 *
 *   Beschriftung, nicht gewählt   26 px   (vor und nach der Verdichtung)
 *   Beschriftung, gewählt         83 px -> 54 px  (engere Zeilenhöhe)
 *
 * 26 px lagen also schon vorher unter der Vorgabe von 44 px. Abschnitt 4
 * hatte die Auswahl deshalb ausgenommen – zu Unrecht: Das befürchtete
 * Umbrechen der Beschreibung tritt nur bei `display: flex` am Label auf.
 * Eine Mindesthöhe mit senkrechtem Innenabstand lässt den Blockfluss
 * unangetastet. Nachgemessen mit genau dieser Regel: alle fünf
 * Beschriftungen 44 px (die gewählte 72 px).
 *
 * Der Preis dafür ist gemessen 26 px Dokumenthöhe (1560 -> 1586 px). Der
 * Bestellknopf bleibt bei y=505 und damit über der Falz, weil er seit
 * Abschnitt 6 in der Spalte daneben steht und nicht mehr hinter der
 * Hauptspalte hängt.
 *
 * `display: block` und nicht `flex`: siehe Abschnitt 4 – ein Flex-Container
 * mit gemischtem Inhalt verwirft Leerzeichen. Genau dieser Fehler stand
 * eine Ebene weiter oben in der AGB-Zeile.
 */
body.is-act-confirmpage {
  /*
     * Aufbau wie bei den Kästchen in Abschnitt 4: Flex am Container, Block
     * im Label. Der Auswahlpunkt fließt dadurch nicht mehr im Text, sondern
     * steht an einer berechenbaren Stelle.
     *
     * Das behebt nebenbei einen zweiten, älteren Fehler. Gemessen am
     * 25.08.2026 auf /checkout/confirm bei 1440x900, Abstand zwischen der
     * Mitte des Auswahlpunkts und der Mitte der ersten Textzeile:
     *
     *     Nachnahme (gewählt, zweizeilig)   30 px zu tief
     *     Vorkasse, Rechnung, Standard       0–1 px
     *
     * Beim gewählten Eintrag steht unter dem Namen die Beschreibung
     * (`.payment-method-description`), und der Punkt richtete sich nach dem
     * gesamten Textblock statt nach der ersten Zeile – er zeigte auf die
     * Beschreibung statt auf den Namen. Ein Flex-Item wird oben ausgerichtet
     * und kennt den inneren Aufbau des Labels nicht mehr.
     *
     * `display: flex` ist hier ungefährlich, anders als eine Ebene tiefer:
     * Der Container `.form-check` enthält gemessen nur zwei Elementkinder
     * und keinen eigenen Text, es kann also kein Leerzeichen verloren gehen
     * (siehe Abschnitt 4).
     */
  /*
     * Merkzettelknopf in der Bestellübersicht.
     *
     * Gemessen am 26.08.2026 auf /checkout/confirm bei 390x844: In der
     * Positionsliste steht unter jedem Artikel „Zum Merkzettel hinzufügen",
     * 48 px hoch mit 10 px Abstand darüber – 58 px je Position, und zwar
     * zwischen dem Artikel und dem Bestellknopf.
     *
     * Auf dieser Seite steht der Artikel bereits im Warenkorb und der
     * nächste Klick ist der Kauf. Ein zweites, gleich großes Klickziel
     * daneben führt vom Bestellknopf weg. Der Merkzettel bleibt auf der
     * Produktseite und im Warenkorb erreichbar – dort ist er richtig.
     *
     * Bewusst NUR unter `.confirm-product`: Im Warenkorb (layout/_cart.scss,
     * anderer Arbeitsbereich) und in der Seitenspalte bleibt er stehen.
     */
  /*
     * VERSUCHT UND VERWORFEN am 26.08.2026: Liefer- und Rechnungsadresse
     * auf dem Handy nebeneinander.
     *
     * Die Rechnung sah gut aus – untereinander 212 + 174 + 12 = 398 px,
     * nebeneinander (gleich hohe Flex-Spalten) 250 px, also 148 px gespart.
     * Das Bildschirmfoto bei 390x844 hat sie widerlegt:
     *
     *     Lieferadresse            Rechnungs-
     *     Hanna Berg-              adresse
     *     mann
     *     Musterweg 12
     *     40213 Düssel-
     *     dorf
     *     [Lieferadresse ände…]    [Rechnungsadres…]
     *
     * Zwei Fehler auf einmal. Erstens bricht der Browser in einer 147 px
     * breiten Spalte Eigennamen und Ortsnamen mit Trennstrich um – „Berg-
     * mann", „Düssel-dorf". Eine Adresse, die falsch getrennt dasteht, sieht
     * nach Fehler aus, und genau hier soll der Kunde prüfen, ob seine
     * Adresse stimmt. Zweitens stehen in den Karten entgegen der Annahme
     * KEINE reinen Texte, sondern je ein Knopf („Lieferadresse ändern",
     * „Rechnungsadresse ändern"); beide liefen aus ihrer Spalte heraus.
     *
     * Die Regel ist deshalb ersatzlos entfallen. Sie steht hier als
     * Kommentar, damit sie nicht ein drittes Mal ausprobiert wird.
     */
}
body.is-act-confirmpage .confirm-payment .form-check, body.is-act-confirmpage .confirm-shipping .form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  padding-left: 0;
  margin-bottom: var(--rc-space-3);
}
body.is-act-confirmpage .confirm-payment .form-check:last-child, body.is-act-confirmpage .confirm-shipping .form-check:last-child {
  margin-bottom: 0;
}
body.is-act-confirmpage .confirm-payment .form-check-input, body.is-act-confirmpage .confirm-shipping .form-check-input {
  flex: 0 0 auto;
  float: none;
  width: 24px;
  height: 24px;
  margin: 10px 0 0;
}
body.is-act-confirmpage .confirm-payment .form-check-label, body.is-act-confirmpage .confirm-shipping .form-check-label {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
}
body.is-act-confirmpage .confirm-payment .payment-method-description, body.is-act-confirmpage .confirm-shipping .shipping-method-description {
  width: auto;
}
body.is-act-confirmpage .confirm-product .card-body {
  margin-bottom: 0;
}
body.is-act-confirmpage .confirm-product .product-wishlist {
  display: none;
}
/*
 * ── 8. Zweite Verdichtungsrunde, gemessen am 26.08.2026 ──────────────────
 *
 * Ausgangswerte (Playwright, echter Gast-Durchlauf, Aufstehsessel Levano):
 *
 *                              1440x900        390x844
 *   /checkout/register
 *     Dokumenthöhe             1773 px         3452 px
 *     Weiter-Knopf bei y       1374 px         1939 px
 *     Vorlauf bis zur Karte     476 px          689 px
 *   /checkout/confirm
 *     Dokumenthöhe             1615 px         2893 px
 *     Bestellknopf bei y        505 px         2378 px
 *
 * Bei 1440x900 steht der Bestellknopf auf /checkout/confirm seit der ersten
 * Runde über der Falz. Alles Übrige wird hier Posten für Posten verkleinert.
 */
.rc-checkout-guest {
  margin-bottom: var(--rc-space-2);
  padding: 10px var(--rc-space-4);
  line-height: 1.4;
}
.rc-checkout-anmelden {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin-bottom: var(--rc-space-3);
}
.rc-checkout-anmelden .icon {
  flex: 0 0 auto;
}
.rc-checkout-anmelden .login-collapse-toggle {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--rc-fs-sm);
}
.checkout-main {
  /*
     * E-Mail über die volle Formularbreite.
     *
     * Gemessen auf /checkout/register bei 1440x900: Das Feld war 427 von
     * 845 px breit, rechts daneben lagen 418 px leer. Der Kern gibt ihm
     * `col-sm-6`, weil in derselben Zeile die beiden Passwortfelder stehen –
     * die sind für Gäste aber `d-none` (gemessen 0x0) und damit gar kein
     * Flex-Element mehr.
     *
     * Deshalb keine feste Breite, sondern `flex-grow: 1`: Solange die
     * Passwortfelder ausgeblendet sind, füllt die E-Mail die Zeile; sobald
     * der Kunde „Kundenkonto anlegen" anhakt und sie erscheinen, sind
     * zusammen 100 % belegt, es bleibt nichts zu verteilen und die Zeile
     * steht wieder halb/halb. Die Regel korrigiert sich also selbst.
     *
     * `.row:last-child` trifft genau die Kontozeile: Die direkten Kinder von
     * `.register-personal` sind gemessen Legende, verstecktes Feld,
     * Namenszeile, Kästchen „Kundenkonto anlegen" und zuletzt diese Zeile.
     */
  /*
     * Datenschutzhinweis.
     *
     * Gemessen bei 1440x900: 105 px, davon 20 px ein leeres `<br>` zwischen
     * Überschrift und Text (component/privacy-notice.html.twig, nicht in
     * diesem Arbeitsbereich). Das `<br>` trennt nichts, was der Abstand der
     * Überschrift nicht schon trennt.
     *
     * Die Schrift bleibt bei 17 px (16 px auf dem Handy). Rechtstexte
     * kleiner zu setzen als den Rest wäre genau der Trick, den die
     * Zielgruppe zu Recht misstrauisch macht.
     */
}
.checkout-main .register-personal > .row:last-child > .form-group {
  flex-grow: 1;
}
.checkout-main .register-address {
  margin-bottom: var(--rc-space-3);
}
.checkout-main .privacy-notice > br {
  display: none;
}
.checkout-main .privacy-notice-title {
  margin-bottom: var(--rc-space-1);
  line-height: 1.3;
}
.checkout-main .register-required-info {
  margin-bottom: var(--rc-space-3);
  line-height: 1.35;
}
.rc-confirm-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--rc-space-2);
  margin-bottom: var(--rc-space-3);
}
.rc-confirm-kopf .confirm-main-header {
  margin-bottom: 0;
}
body.is-act-confirmpage .checkout-aside-summary-header {
  margin-bottom: var(--rc-space-2);
}
body.is-act-confirmpage .confirm-address .card-col {
  margin-bottom: var(--rc-space-3);
}
body.is-act-checkoutregisterpage .checkout-main .register-form > .rc-checkout-submit {
  position: sticky;
  bottom: 0;
  z-index: 2;
  /*
         * Warum eine eigene Flaeche und nicht die der Karte.
         *
         * Erster Versuch am 26.08.2026: `background-color: var(
         * --rc-surface-warm)`, also dieselbe Sandflaeche wie die Karte. Im
         * Bildschirmfoto (audit/abnahme, 390x844, Formularmitte) sah das
         * falsch aus: Die Auswahl „Bundesland" endete auf halber Hoehe im
         * Nichts. Ohne sichtbare Kante liest man das nicht als „Leiste liegt
         * darueber", sondern als abgeschnittenes Feld – und ein
         * abgeschnittenes Feld im Bestellvorgang sieht nach Fehler aus.
         *
         * Die Kante kommt deshalb aus der Flaechenfarbe und nicht aus einer
         * Haarlinie, wie der Benchmark es verlangt: Off-White (--rc-bg,
         * #fbf9f6) auf Sand (--rc-surface-warm, #f2ede5) – dasselbe
         * Farbpaar, mit dem die Karten selbst vom Seitengrund abgesetzt
         * sind, nur umgekehrt. Keine neue Farbe, kein Schatten, kein Strich.
         */
  background-color: var(--rc-bg);
  /*
         * Randlos bis an die Kartenkanten. Ohne die negativen Aussenabstaende
         * bliebe links und rechts je ein Streifen Sand stehen und die Leiste
         * saehe aus wie ein hineingelegtes Kaestchen.
         *
         * Die Werte sind nicht frei gewaehlt, sondern der Innenabstand von
         * `.card-body` aus Abschnitt 2 (dort 12/16 px, ab 768 px 16/24 px)
         * mit umgekehrtem Vorzeichen. Wer den einen Wert aendert, muss den
         * anderen mitaendern.
         *
         * Der untere negative Abstand laesst die Leiste im Ruhezustand mit
         * der Kartenunterkante abschliessen; die runde Ecke uebernimmt sie
         * von der Karte.
         */
  margin: 0 calc(-1 * var(--rc-space-4)) calc(-1 * var(--rc-space-3));
  padding: var(--rc-space-4) var(--rc-space-4) var(--rc-space-3);
  border-radius: 0 0 var(--rc-radius-card) var(--rc-radius-card);
  /*
         * Oben mehr Luft als unten, und ab 768 px noch mehr.
         *
         * Gemessen am Bildschirmfoto (1440x900, Formularmitte): Mit 16 px
         * oben lag die Kante der Leiste mitten in den Beschriftungen „Land"
         * und „Bundesland" – man sah die obere Hälfte der Buchstaben. Das
         * liest sich als zerrissene Zeile, nicht als darüberliegende Leiste.
         *
         * 24 px Off-White über dem Knopf geben der Leiste genug eigene
         * Fläche, dass die Kante als Kante gelesen wird. Der Schnitt bleibt
         * – er ist bei jeder mitlaufenden Leiste unvermeidlich –, aber er
         * sieht nach Absicht aus statt nach Fehler.
         *
         * Auf dem Handy bleibt es bei 16 px: Dort ist die Fensterhöhe knapp
         * und jede Zeile Leiste fehlt dem Formular.
         */
}
@media (min-width: 768px) {
  body.is-act-checkoutregisterpage .checkout-main .register-form > .rc-checkout-submit {
    margin: 0 calc(-1 * var(--rc-space-5)) calc(-1 * var(--rc-space-4));
    padding: var(--rc-space-5) var(--rc-space-5) var(--rc-space-4);
  }
}
/*
 * ── 9a. „Rechnungsadresse ändern" ragte aus dem Bildschirm ────────────────
 *
 * Gemessen am 26.08.2026 auf /checkout/confirm, echter Gast-Durchlauf
 * (Aufstehsessel Levano im Korb), Playwright:
 *
 *   Fenster   scrollWidth   Knopf x / Breite / rechte Kante   über Fenster
 *      320 px      320 px        36 / 270 /  306 px                – (aber
 *                                                     6 px über die Karte)
 *      360 px      486 px       216 / 270 /  486 px            126 px
 *      375 px      494 px       224 / 270 /  494 px            119 px
 *      390 px      501 px       231 / 270 /  501 px            111 px
 *      414 px      513 px       243 / 270 /  513 px             99 px
 *      500 px      556 px       286 / 270 /  556 px             56 px
 *      576 px      594 px       324 / 270 /  594 px             18 px
 *      768 px      768 px       428 / 270 /  698 px              –
 *
 * Der Knopf ist auf jeder Breite 270 px breit. Das ist seine Eigenbreite:
 * `.btn` in components/_buttons.scss setzt `white-space: nowrap`, dazu
 * kommen 2 x 24 px Innenabstand. Ein Element mit fester Breite in einem
 * schmaleren Kasten läuft heraus, wenn kein Vorfahr `overflow` beschneidet –
 * gemessen: overflow-x visible auf der gesamten Kette bis zum body.
 *
 * Wo er herausläuft, hängt an der Kastenbreite:
 *   .card-actions  123 px   (bei 390 px Fenster)
 *   .card-body     155 px
 *   .col-sm-6      195 px
 *
 * Die 195 px stammten aus einer Regel, die eine frühere Runde bereits aus
 * der Quelle entfernt hat („VERSUCHT UND VERWORFEN", Abschnitt 7) – im
 * ausgelieferten all.css steht sie noch, weil in diesem Lauf nicht
 * kompiliert werden darf. Nach dem zentralen Bauen stehen die Adresskarten
 * unter 576 px wieder untereinander.
 *
 * Diese Regel hier wartet darauf NICHT. Sie behebt die Ursache eine Ebene
 * tiefer, und zwar unabhängig davon, wie breit die Spalte gerät: Ein Knopf,
 * der `width: 100%` und umbrechenden Text hat, kann seinen Kasten
 * grundsätzlich nicht mehr verlassen – auch nicht bei längerer Beschriftung,
 * in einer anderen Sprache oder bei 320 px.
 *
 * Warum das die richtige Stelle ist: Auf der LETZTEN Seite vor der
 * verbindlichen Bestellung ist dieser Knopf der einzige Weg zurück, um eine
 * falsche Adresse zu korrigieren. Bei 390 px begann er bei x=231 und lag zu
 * 111 px außerhalb des Fensters – die Beschriftung war abgeschnitten, und
 * ohne waagerechtes Scrollen war er nicht vollständig sichtbar.
 *
 * `height: auto` statt der festen 48 px aus `.btn`: Sobald die Beschriftung
 * zweizeilig wird, wäre der Text sonst über die Knopfkante hinausgelaufen.
 * `min-height` hält die Klickfläche bei 48 px, also über den geforderten
 * 44 px.
 *
 * Der waagerechte Innenabstand sinkt von 24 auf 8 px. Bei einem Knopf über
 * die volle Breite ist er nicht mehr zu sehen – die Beschriftung steht
 * mittig, links und rechts davon ist ohnehin Fläche. Er entscheidet nur noch
 * darüber, wann der Text umbricht, und das ist eine reine Rechnung:
 *
 *   „Rechnungsadresse ändern"   222 px reine Textbreite bei 17 px
 *   engste Karte bei 320 px      248 px Inhaltsbreite
 *
 *   mit 2 x 24 px:  270 px > 248 px  → zweizeilig
 *   mit 2 x 16 px:  254 px > 248 px  → zweizeilig
 *   mit 2 x  8 px:  238 px < 248 px  → einzeilig    (gemessen: Höhe 48 px)
 *
 * Zwischen 576 und 767 px stehen die beiden Karten nebeneinander und die
 * Inhaltsbreite fällt auf 216 px; dort bricht die Beschriftung auf zwei
 * Zeilen um. Das ist kein Fehler mehr, sondern der vorgesehene Umbruch:
 * Der Knopf wächst mit, der Text bleibt vollständig lesbar.
 */
.confirm-address .card-actions .btn {
  display: flex;
  width: 100%;
  height: auto;
  min-height: var(--rc-control-md);
  padding: var(--rc-space-3) var(--rc-space-2);
  white-space: normal;
  line-height: 1.3;
}
/*
 * ── 9b. Gekürzter Gebührenhinweis ────────────────────────────────────────
 *
 * Der Kern kürzt die Beschreibung der gewählten Zahlungsart hart auf 75
 * Zeichen (component/payment/payment-method.html.twig). Bei „Nachnahme"
 * endete der Satz dadurch mitten im Wort „Gebühr":
 *
 *     „… Es fällt eine Nachnahm ..."
 *
 * Vollständige Messung und Begründung stehen in
 * page/checkout/confirm/confirm-payment.html.twig. Dort steht der Text
 * jetzt ungekürzt unter der Liste; hier verschwindet der gekürzte Rest,
 * damit er nicht zweimal dasteht.
 *
 * Der Selektor trifft nur den Beschreibungsabsatz, nicht den Namen der
 * Zahlungsart – der steht im selben Kasten in einem `strong`.
 *
 * Bereich: nur die Zahlungsartkarte der Bestellübersicht. Die Versandart
 * daneben ist nicht betroffen, ihre Beschreibungen sind gemessen 26 Zeichen
 * lang und werden nicht gekürzt.
 */
.confirm-payment .payment-method-description > p {
  display: none;
}
/*
 * Der vollständige Hinweis. Gleiche Schriftgröße wie der übrige Kartentext
 * (17 px aus `.checkout-main .card-body`), damit er als Teil der Karte und
 * nicht als Warnung gelesen wird – er ersetzt eine Beschreibung, er ist
 * keine Fehlermeldung.
 *
 * `--rc-space-3` Abstand nach oben: Er gehört zur Liste darüber, nicht zur
 * Kartenkante darunter. Der Kern setzt unter der Liste keinen Abstand.
 *
 * Keine eigene Farbe. Ein abgesetzter Grauton wäre hier zweimal falsch:
 * Der Satz kündigt eine Zusatzzahlung an – die dunkelste Textfarbe ist die
 * richtige –, und jeder Graustich kostet Kontrast, den die Zielgruppe nicht
 * übrig hat. Die Farbe kommt damit unverändert aus `.card-body`.
 */
.rc-payment-note {
  margin: var(--rc-space-3) 0 0;
}
/*
 * ══ 10. Spaltenraster nach dem Vorbild des alten Shopify-Checkouts ════════
 *
 * Auftrag des Betreibers: „layout des checkouts nahezu 1:1 des shopifylayouts
 * ähnelt auch vom aufbau grössen etc nur in unserem theme stil".
 *
 * ── Ist-Zustand, gemessen am 27.08.2026 ──────────────────────────────────
 * Playwright, echter Gast-Durchlauf (Aufstehsessel Levano, 479,20 €), Gast
 * über /checkout/register angelegt, gemessen auf /checkout/confirm:
 *
 *                                1440x900      768x900       390x844
 *   Hauptspalte                  933 px        768 px        390 px
 *   Übersicht                    467 px        384 px (unter der Hauptspalte)
 *   Fläche der Übersicht         keine – gleicher Seitengrund wie links
 *   Produkttabelle               893x181 px, LINKS unter dem Formular
 *   Bestellknopf                 in der Übersicht rechts
 *
 * Vier Abweichungen vom Vorbild, die hier behoben werden:
 *
 *  1. Die beiden Spalten sitzen in einem 1400 px breiten, mittig gesetzten
 *     Kasten (`.container`, gemessen max-width 1400px, padding 20px). Das
 *     Vorbild teilt die volle Fensterbreite.
 *  2. Die Formularspalte ist 933 px breit. Das Vorbild führt das Formular in
 *     rund 470 px Inhaltsbreite.
 *  3. Die Übersicht steht auf demselben Grund wie das Formular und endet
 *     unter dem Knopf. Im Vorbild ist sie eine eigene, hellere Fläche, die
 *     bis zum Seitenende durchläuft.
 *  4. Die Positionen stehen links unter dem Formular, im Vorbild rechts.
 *
 * Punkt 4 und die Abschnittsfolge sind bauliche Änderungen und stehen in
 * page/checkout/confirm/index.html.twig. Hier steht die Gestalt.
 *
 * ── Was NICHT übernommen wird ───────────────────────────────────────────
 *
 * Der blaue Shopify-Knopf und die Shopify-Blautöne: Es gilt die warme
 * Palette dieses Themes, der Hauptknopf bleibt --rc-primary.
 *
 * Shop Pay, Google Pay, PayPal, Kreditkarte, Klarna: Nachgemessen am
 * 27.08.2026 auf /checkout/confirm bietet dieser Shop genau drei Zahlarten –
 * Nachnahme (vorausgewählt), Vorkasse per Überweisung und Kauf auf Rechnung.
 * Es kommt keine Zeile für etwas Nichtangebotenes hinzu; die Auswahl bleibt
 * unverändert die des Kerns und wird nur anders gezeichnet.
 */
/*
 * ── Warum `.checkout` im Selektor steht ──────────────────────────────────
 *
 * Erster Anlauf am 27.08.2026 stand auf `body.is-act-confirmpage
 * .checkout-container` – also (0,2,1). Gemessen im Browser blieb davon nichts
 * übrig:
 *
 *   .checkout-container   display: flex   (statt grid), Breite 1480 px
 *   .checkout-main        max-width: 100% (statt 518 px), padding 20 px
 *
 * Der Kern schreibt in vendor …/page/checkout/_confirm.scss und _register.scss
 *
 *     .is-act-confirmpage { .checkout { .checkout-container { @extend .row; } } }
 *
 * `@extend` hängt den VOLLEN verschachtelten Selektor in die Regel von `.row`
 * bzw. `.row > *`. Daraus wird `.is-act-confirmpage .checkout
 * .checkout-container` mit (0,3,0) – mehr Klassen als (0,2,1), und
 * Klassen wiegen schwerer als das Elementpräfix `body`.
 *
 * Mit `.checkout` in der Kette sind es (0,3,1) und die Regeln greifen
 * unabhängig von der Reihenfolge, in der die Stylesheets kompiliert werden.
 */
/*
 * Die eine Zahl, an der das ganze Raster hängt.
 *
 * 470 px ist die Inhaltsbreite der Formularspalte im Vorbild. Nachgerechnet
 * mit unserer Schrift (17–19 px statt Shopifys 14–16 px) trägt sie alles,
 * was in dieser Spalte nicht umbrechen darf – gemessen am 27.08.2026 die
 * breitesten unumbrechbaren Zeichenketten der Seite:
 *
 *   „Produkt Anzahl inkl. MwSt. Summe"  287 px   (Tabellenkopf, entfällt)
 *   „Zahlungspflichtig bestellen"       250 px
 *   „AGB und Widerrufsbelehrung"        242 px
 *   „Vorkasse per Überweisung"          222 px
 *   „Rechnungsadresse ändern"           220 px
 *
 * 470 minus 2 x 16 px Kartenrand sind 438 px Inhalt – die breiteste
 * Zeichenkette braucht 250. Es bleibt Luft für längere Zahlartennamen.
 *
 * ── Warum die beiden Werte am `body` hängen und nicht an `.checkout` ─────
 *
 * Nachtrag 28.08.2026: Seit dem Umbau richtet sich auch der Minimalkopf nach
 * der Formularspalte – Logo und Taschensymbol stehen darüber (Abschnitt 11a).
 * Der Kopf ist aber ein Geschwister von `.checkout`, kein Nachfahre; auf
 * `.checkout` gesetzte Eigenschaften erbt er nicht. Am `body` erben beide.
 */
/*
 * ── Nachtrag 29.08.2026: die Abschlussseite kommt dazu ───────────────────
 *
 * `/checkout/finish` lief bis heute vollständig auf den Vorlagen und Regeln
 * des Kerns – als einzige Seite des Bestellvorgangs. Der Kern baut sie mit
 * demselben Bootstrap-Raster wie /checkout/confirm (vendor …/page/checkout/
 * _finish.scss: `.checkout-main { @extend .offset-lg-2; @extend .col-lg-8; }`),
 * und sie hatte damit dieselben Befunde, die Abschnitt 10 für die anderen
 * beiden Seiten behoben hat. Gemessen am 29.08.2026 bei 1440x900:
 *
 *                        /checkout/finish (vorher)   /checkout/confirm
 *   .checkout-main       x=253  b=933                x=  0  b=566
 *   .checkout-aside      x=720  b=467                x=720  b=720
 *   Inhalt links neben
 *   der Übersicht        233 px frei bei x=20        keine freie Fläche
 *
 * Die Abschlussseite bekommt deshalb dasselbe Raster – nicht ein zweites,
 * das ihm ähnlich sieht. `body.is-act-finishpage` steht ab hier überall
 * dort, wo schon `is-act-confirmpage` und `is-act-checkoutregisterpage`
 * stehen. Damit fallen ohne eine einzige neue Regel weg:
 *
 *   - die drei unterschiedlich hohen weißen Karten (Karten werden flächenlos)
 *   - die halb leere linke Seite (zwei gleich breite Spalten)
 *   - das Merkzettel-Herz an der Position (Regel in Abschnitt 10c)
 *   - die 34-px-Überschriften der Übersicht (Abschnitt 10c)
 *
 * Was NICHT übernommen wird, steht jeweils an der betreffenden Regel: das
 * Gutscheinfeld gibt es hier nicht, und der Bestellknopf auch nicht.
 */
body.is-act-confirmpage, body.is-act-checkoutregisterpage, body.is-act-finishpage {
  --rc-checkout-spalte: 470px;
  --rc-checkout-rand: var(--rc-space-5);
}
body.is-act-confirmpage .checkout, body.is-act-checkoutregisterpage .checkout, body.is-act-finishpage .checkout {
  /*
     * Aus dem mittig gesetzten Kasten ausbrechen.
     *
     * Gemessen ist die Kette bis zum Fenster:
     *   main.content-main   1440 px
     *   div.container       1400 px, max-width 1400px, padding 20px
     *   div.container-main  1360 px
     *   div.checkout        1360 px
     *
     * Bei 1440 px kostet das 80 px, bei 1920 px sind es 520 px – dort stünden
     * beide Spalten als Insel in der Fenstermitte statt über die volle Breite.
     * Der Seitenrand wandert deshalb von hier in die Spalten selbst.
     *
     * Der Selektor ist bewusst an die beiden is-act-Klassen gebunden: `.container`
     * trägt die ganze Storefront, eine ungebundene Regel wäre eine Änderung an
     * jeder Seite des Shops. Sie steht weiter unten, weil `.container` ein
     * VORFAHR von `.checkout` ist und hier drinnen nicht erreichbar wäre.
     *
     * Der Kern setzt `.checkout { padding-top: 70px }` (Abschnitt 6 senkt das
     * auf 16 px). Jetzt trägt die Formularspalte ihren Vorlauf selbst – sonst
     * begänne die Sandfläche der Übersicht erst 16 px unter der Kopfleiste und
     * es stünde ein heller Streifen darüber.
     */
  padding-top: 0;
  /*
     * Formularspalte, Knopf und – auf dem Telefon – auch die Übersicht tragen
     * denselben Inhaltsrahmen. Dadurch stehen Feldkante, Kartenkante und
     * Knopfkante exakt übereinander; im Vorbild ist genau das der ruhige Zug
     * der Seite.
     *
     * `width: auto` und `margin: 0 auto` überstimmen die Bootstrap-Spalten, die
     * der Kern per @extend anhängt (`.col-lg-8` + `.offset-lg-2` an der
     * Hauptspalte, `.col-md-6` + `.offset-md-6` an der Übersicht). Der Selektor
     * ist mit der body-Klasse (0,2,1) spezifischer als die Utility-Klasse
     * (0,1,0) und gewinnt unabhängig von der Kompilierreihenfolge.
     */
  /*
     * Die Übersicht als eigene Fläche.
     *
     * Sand (--rc-surface-warm #f2ede5) auf Off-White (--rc-bg #fbf9f6): dasselbe
     * Farbpaar, mit dem im übrigen Shop Sektionen getrennt werden – keine neue
     * Farbe, keine Trennlinie, kein Schatten. Weil die Karten links im selben
     * Zug ihre Sandfläche abgeben (siehe unten), ist Sand ab hier eindeutig
     * besetzt: links wird ausgefüllt, rechts wird gerechnet.
     */
  /*
     * Links schlichte Abschnitte statt Karten.
     *
     * Abschnitt 6 hatte den Karten Sand gegeben, weil sie sich sonst als weiße
     * Flächen auf Off-White nicht abgehoben hätten. Diese Begründung fällt mit
     * dem neuen Raster weg: In einer 470 px schmalen Spalte steht ohnehin nur
     * ein Abschnitt je Zeile, und die Übersicht rechts ist jetzt die Sandfläche.
     * Zwei Sandflächen nebeneinander hätten den Unterschied zwischen Formular
     * und Rechnung eingeebnet – genau den Unterschied, den das Vorbild macht.
     *
     * Der Anmeldekasten (`.login-card`) behält seine Fläche: Er klappt über dem
     * Formular auf und ist kein Abschnitt, sondern ein eingeschobenes Panel.
     */
  /*
     * Abschnittsüberschriften.
     *
     * Im Vorbild trägt jeder Abschnitt „eine schlichte fette Überschrift".
     * Abschnitt 6 hatte sie auf die Label-Stufe (17 px) gesetzt, weil sie
     * damals über einer Karte mit eigener Fläche stand und die Fläche schon
     * ordnete. Ohne Fläche muss die Überschrift die Gliederung allein tragen:
     * --rc-fs-lg sind 22 px am Rechner und 20 px auf dem Handy.
     */
  /*
     * Alle Abschnitte über die volle Spaltenbreite.
     *
     * Der Kern legt Liefer-/Rechnungsadresse und Zahlungs-/Versandart paarweise
     * in `.col-sm-6`. In 470 px blieben davon 235 px je Kasten – gemessen ist
     * allein der Knopf „Rechnungsadresse ändern" 220 px breit. Die `.row` ist in
     * den Vorlagen bereits entfallen; die Spaltenklassen bleiben an den Kästen
     * stehen und werden hier neutralisiert.
     */
  /*
     * Übersichtsüberschriften „Zusammenfassung" und „Warenkorb".
     *
     * Gemessen standen beide in --rc-fs-2xl (34 px) und waren damit größer als
     * die H1 der Seite (27 px). In der 470-px-Spalte sind sie Beschriftungen
     * über einer Liste, keine zweite Seitenüberschrift.
     */
  /*
     * ── Die Position: Bild links, Text rechts, Preis rechts ─────────────
     *
     * Im Vorbild ist eine Position „kleines Bild mit Mengenabzeichen, Name,
     * Preis" – drei Zeilen hoch. Gemessen am 28.08.2026 bei 1440x900 war sie
     * hier 438x391 px, also fast ein halber Bildschirm für einen Artikel.
     *
     * Ursache ist nicht die Textmenge, sondern der Umbruch: Shopware legt
     * Bild und Text in eine Bootstrap-Zeile, in der `.line-item-details` KEINE
     * Spaltenklasse trägt und deshalb 100 % breit ist. Gemessen:
     *
     *   .line-item-info-img   x=857  b=78
     *   .line-item-details    x=857  b=372   <- gleiche x-Position, also
     *                                           unter dem Bild statt daneben
     *
     * Danach folgen drei weitere volle Zeilen: „Anzahl 1" (48 px), der Preis
     * (32 px) und darunter eine zweite, unbeschriftete Zahl (32 px).
     *
     * Der Bereich ist eng gefasst: `.checkout-aside-product-list` gibt es nur
     * in der Übersichtsspalte des Bestellvorgangs. Der Seitenwarenkorb und die
     * Warenkorbseite haben ihre eigenen Regeln in layout/_cart.scss und werden
     * hier nicht berührt.
     */
  /*
     * Gesamtsumme hervorheben.
     *
     * Im Vorbild ist sie die einzige fette Zahl der Übersicht. Abschnitt 6 hatte
     * sie auf Fließtextgröße gesetzt, als sie noch in einer 427 px breiten
     * Spalte neben einer 933 px breiten Hauptspalte stand. Jetzt ist die
     * Übersicht die halbe Seite, und die Gesamtsumme ist die Zahl, wegen der
     * jemand hersieht.
     */
}
body.is-act-confirmpage .checkout .checkout-container, body.is-act-checkoutregisterpage .checkout .checkout-container, body.is-act-finishpage .checkout .checkout-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /*
         * Die seitlichen Außenabstände auf 0.
         *
         * `@extend .row` gibt dem Kasten die halbe Bootstrap-Rinne als
         * NEGATIVEN Außenabstand, damit die Spaltenpolster wieder mit dem
         * Seitenrand abschließen. Gemessen am 27.08.2026 bei 1440x900 waren das
         * −20 px je Seite: `.checkout-container` lag bei x=−20 und war 1480 px
         * breit, `document.scrollWidth` 1460 gegen 1440 Fensterbreite – die
         * Seite ließ sich 20 px waagerecht schieben.
         *
         * Im Raster gibt es keine Rinne, die auszugleichen wäre; die Spalten
         * tragen ihren Rand selbst.
         *
         * Unten hängt der Kern $spacer-lg an. Die Sandfläche soll ohne Lücke an
         * die Fußleiste stoßen, sonst läuft sie sichtbar nicht „bis zum
         * Seitenende".
         */
  margin: 0;
}
body.is-act-confirmpage .checkout .checkout-main, body.is-act-confirmpage .checkout .checkout-additional, body.is-act-confirmpage .checkout .checkout-aside-action, body.is-act-confirmpage .checkout .rc-kassenfuss, body.is-act-checkoutregisterpage .checkout .checkout-main, body.is-act-checkoutregisterpage .checkout .checkout-additional, body.is-act-checkoutregisterpage .checkout .checkout-aside-action, body.is-act-checkoutregisterpage .checkout .rc-kassenfuss, body.is-act-finishpage .checkout .checkout-main, body.is-act-finishpage .checkout .checkout-additional, body.is-act-finishpage .checkout .checkout-aside-action, body.is-act-finishpage .checkout .rc-kassenfuss {
  /*
         * `width: 100%` und nicht `auto`.
         *
         * Ein Rasterkind mit `width: auto` UND beidseitigem `margin: auto`
         * verliert seine Dehnung und schrumpft auf die Inhaltsbreite. Gemessen
         * am 27.08.2026 traf das genau den Bestellknopf: Er war 412 statt
         * 566 px breit, also so breit wie seine Aufschrift, und stand damit
         * schmaler als das Formular darüber.
         */
  width: 100%;
  max-width: calc(var(--rc-checkout-spalte) + 2 * var(--rc-checkout-rand));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--rc-checkout-rand);
  padding-left: var(--rc-checkout-rand);
}
body.is-act-confirmpage .checkout .checkout-main, body.is-act-checkoutregisterpage .checkout .checkout-main, body.is-act-finishpage .checkout .checkout-main {
  padding-top: var(--rc-space-5);
}
body.is-act-confirmpage .checkout .checkout-aside-action, body.is-act-checkoutregisterpage .checkout .checkout-aside-action, body.is-act-finishpage .checkout .checkout-aside-action {
  padding-top: var(--rc-space-5);
  padding-bottom: 0;
}
body.is-act-confirmpage .checkout .rc-kassenfuss, body.is-act-checkoutregisterpage .checkout .rc-kassenfuss, body.is-act-finishpage .checkout .rc-kassenfuss {
  padding-top: var(--rc-space-5);
  padding-bottom: var(--rc-space-7);
}
body.is-act-confirmpage .checkout .checkout-aside, body.is-act-checkoutregisterpage .checkout .checkout-aside, body.is-act-finishpage .checkout .checkout-aside {
  width: auto;
  margin: 0;
  padding: var(--rc-space-5) var(--rc-checkout-rand) var(--rc-space-6);
  background-color: var(--rc-surface-warm);
}
body.is-act-confirmpage .checkout .checkout-aside-container, body.is-act-checkoutregisterpage .checkout .checkout-aside-container, body.is-act-finishpage .checkout .checkout-aside-container {
  max-width: var(--rc-checkout-spalte);
  margin-right: auto;
  margin-left: auto;
}
body.is-act-confirmpage .checkout .checkout-main .card:not(.login-card), body.is-act-checkoutregisterpage .checkout .checkout-main .card:not(.login-card), body.is-act-finishpage .checkout .checkout-main .card:not(.login-card) {
  background-color: transparent;
  border-radius: 0;
}
body.is-act-confirmpage .checkout .checkout-main .card:not(.login-card) > .card-body, body.is-act-checkoutregisterpage .checkout .checkout-main .card:not(.login-card) > .card-body, body.is-act-finishpage .checkout .checkout-main .card:not(.login-card) > .card-body {
  padding: 0;
}
body.is-act-confirmpage .checkout .checkout-main .card-title, body.is-act-confirmpage .checkout .checkout-main legend.card-title, body.is-act-checkoutregisterpage .checkout .checkout-main .card-title, body.is-act-checkoutregisterpage .checkout .checkout-main legend.card-title, body.is-act-finishpage .checkout .checkout-main .card-title, body.is-act-finishpage .checkout .checkout-main legend.card-title {
  margin-bottom: var(--rc-space-3);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
}
body.is-act-confirmpage .checkout .confirm-address, body.is-act-confirmpage .checkout .confirm-payment-shipping, body.is-act-confirmpage .checkout .confirm-payment, body.is-act-confirmpage .checkout .confirm-shipping, body.is-act-confirmpage .checkout .confirm-tos, body.is-act-checkoutregisterpage .checkout .confirm-address, body.is-act-checkoutregisterpage .checkout .confirm-payment-shipping, body.is-act-checkoutregisterpage .checkout .confirm-payment, body.is-act-checkoutregisterpage .checkout .confirm-shipping, body.is-act-checkoutregisterpage .checkout .confirm-tos, body.is-act-finishpage .checkout .confirm-address, body.is-act-finishpage .checkout .confirm-payment-shipping, body.is-act-finishpage .checkout .confirm-payment, body.is-act-finishpage .checkout .confirm-shipping, body.is-act-finishpage .checkout .confirm-tos {
  margin-bottom: var(--rc-space-6);
}
body.is-act-confirmpage .checkout .confirm-address .card-col, body.is-act-confirmpage .checkout .confirm-payment, body.is-act-confirmpage .checkout .confirm-shipping, body.is-act-checkoutregisterpage .checkout .confirm-address .card-col, body.is-act-checkoutregisterpage .checkout .confirm-payment, body.is-act-checkoutregisterpage .checkout .confirm-shipping, body.is-act-finishpage .checkout .confirm-address .card-col, body.is-act-finishpage .checkout .confirm-payment, body.is-act-finishpage .checkout .confirm-shipping {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-summary-header, body.is-act-confirmpage .checkout .checkout-aside-product-header, body.is-act-checkoutregisterpage .checkout .checkout-aside-summary-header, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-header, body.is-act-finishpage .checkout .checkout-aside-summary-header, body.is-act-finishpage .checkout .checkout-aside-product-header {
  margin-bottom: var(--rc-space-3);
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
}
body.is-act-confirmpage .checkout .checkout-aside-products, body.is-act-checkoutregisterpage .checkout .checkout-aside-products, body.is-act-finishpage .checkout .checkout-aside-products {
  margin-bottom: var(--rc-space-5);
  padding-bottom: var(--rc-space-5);
  border-bottom: 1px solid var(--rc-border-strong);
}
body.is-act-confirmpage .checkout .checkout-aside-product-list, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list, body.is-act-finishpage .checkout .checkout-aside-product-list {
  margin-bottom: 0;
  /*
         * Die Menge als Abzeichen an der oberen rechten Ecke des Bildes.
         *
         * Der Mengenblock ist ein Geschwister des Bild-Text-Paares und stand
         * gemessen als eigene 48 px hohe Zeile darunter („Anzahl" links, die
         * Zahl 279 px weiter rechts). Absolut gesetzt sitzt er auf dem Bild:
         * 64 px Bildbreite minus 12 px Überlappung ergeben die linke Kante.
         *
         * Die Beschriftung „Anzahl" entfällt dabei nicht ersatzlos – sie wird
         * nur optisch entfernt und bleibt für Vorlesesoftware im Dokument.
         */
  /*
         * Preis und Steueranteil rechts unter dem Text.
         *
         * Der Steueranteil stand gemessen als nackte Zahl unter dem Preis:
         * „479,20 €" und darunter „76,51 €". Seine Beschriftung „inkl. MwSt."
         * liegt im Dokument, ist aber auf 1x1 px geschrumpft. Zwei Beträge
         * untereinander, von denen einer unbeschriftet ist, liest sich als
         * zwei Preise – auf der letzten Seite vor der Bestellung der denkbar
         * ungünstigste Ort dafür.
         *
         * Die Beschriftung wird deshalb sichtbar gemacht statt der Betrag
         * versteckt: Es kommt kein erfundener Text hinzu, es wird nur der
         * vorhandene gezeigt.
         */
  /*
         * `!important` ist hier unvermeidlich und deshalb ausdrücklich
         * begründet.
         *
         * Der Kern versteckt die Beschriftung ab 768 px mit Bootstraps Mixin
         * `visually-hidden()` (vendor …/component/_line-item.scss, Zeile 620).
         * Dieses Mixin schreibt JEDE seiner neun Eigenschaften mit `!important`
         * – position, width, height, padding, margin, overflow, clip,
         * white-space und border. Ohne `!important` gewinnt keine Regel gegen
         * es, gleich wie spezifisch sie ist; gemessen am 28.08.2026 blieb die
         * Beschriftung mit einer (0,4,0)-Regel unverändert 1x1 px.
         *
         * Die saubere Alternative wäre, die Klasse in der Vorlage zu entfernen
         * – so ist es an anderen Stellen dieser Datei gelöst. Sie liegt hier
         * aber in component/line-item/element/tax-price.html.twig und damit
         * ausserhalb dieses Arbeitsbereichs.
         *
         * Der Bereich der Regel ist die Positionsliste der Übersichtsspalte;
         * auf der Warenkorbseite und im Seitenwarenkorb bleibt alles, wie es ist.
         */
  /*
         * Der Merkzettelknopf entfällt in der Übersicht.
         *
         * Dieselbe Begründung wie in Abschnitt 7, wo er unter `.confirm-product`
         * ausgeblendet war: Der Artikel liegt bereits im Korb, der nächste
         * Klick ist der Kauf. Seit dem Umbau steht die Positionsliste nicht
         * mehr unter `.confirm-product`, sondern in der Übersicht – die Regel
         * zieht mit. Auf der Produktseite und im Warenkorb bleibt er erreichbar.
         */
  /*
         * Der Entfernen-Knopf bleibt – er ist auf dieser Seite der einzige Weg,
         * eine Position noch loszuwerden. Er steht fest in der rechten oberen
         * Ecke der Zeile und behält die geforderten 44 px Klickfläche.
         *
         * Absolut gesetzt und nicht im Fluss: Im Bildschirmfoto bei 390x844
         * (audit/abnahme/checkout-confirm-nachher-390.png) fiel er als
         * Flex-Element in eine eigene Zeile und stand dort mitten zwischen
         * Lieferzeitraum und Preis – linksbündig, wie ein weiteres Merkmal des
         * Artikels statt wie eine Aktion. In der 342 px schmalen Spalte reicht
         * der Platz neben Bild und Text nicht für 44 px mehr.
         *
         * Der Platz dafür steht als rechter Innenabstand an `.line-item-info`;
         * wer den einen Wert ändert, muss den anderen mitändern.
         *
         * Ein erster Anlauf stand auf 40 px, damit er neben dem Preis nicht wie
         * ein Hauptknopf wirkt. Die Prüfsonde hat ihn am 28.08.2026 auf allen
         * drei Breiten als 40x40 gemeldet – 4 px unter der Vorgabe dieses
         * Projekts. Zurückhaltend wirkt er auch mit 44 px, weil er nur einen
         * Umriss trägt und keine Fläche.
         */
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item {
  margin-bottom: var(--rc-space-4);
  padding: 0;
  border-bottom: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item:last-child, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item:last-child, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item:last-child {
  margin-bottom: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-row, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-row, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-row {
  position: relative;
  margin-right: 0;
  margin-left: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item > .line-item-row, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item > .line-item-row, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item > .line-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--rc-space-3);
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-info, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-info, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 56px 0 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-info > .line-item-row, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-info > .line-item-row, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-info > .line-item-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--rc-space-4);
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-info-img, body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-img-container, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-info-img, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-img-container, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-info-img, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-img-container {
  flex: 0 0 auto;
  width: 64px;
  max-width: 64px;
  padding: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-details, body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-details-container, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-details, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-details-container, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-details, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-details-container {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-quantity, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-quantity, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-quantity {
  position: absolute;
  top: -8px;
  left: 52px;
  z-index: 1;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-quantity-label, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-quantity-label, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-quantity-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-quantity-row, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-quantity-row, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-quantity-row {
  display: block;
  margin: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-quantity-select-wrapper, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-quantity-select-wrapper, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-quantity-select-wrapper {
  width: auto;
  max-width: none;
  padding: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-quantity-select-wrapper > div, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-quantity-select-wrapper > div, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-quantity-select-wrapper > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 var(--rc-space-1);
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-primary);
  color: #ffffff;
  font-size: var(--rc-fs-micro);
  font-weight: var(--rc-fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-total-price, body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-tax-price, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-total-price, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-tax-price, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-total-price, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-tax-price {
  flex: 1 1 100%;
  width: auto;
  max-width: none;
  padding: 0;
  padding-left: calc(64px + var(--rc-space-4));
  text-align: left;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-total-price, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-total-price, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-total-price {
  margin-top: var(--rc-space-2);
  font-weight: var(--rc-fw-semibold);
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-total-price-value, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-total-price-value, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-total-price-value {
  display: inline;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-tax-price, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-tax-price, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-tax-price {
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-tax-price-label, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-tax-price-label, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-tax-price-label {
  position: static !important;
  display: inline;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  font-weight: var(--rc-fw-regular);
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-tax-price br, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-tax-price br, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-tax-price br {
  display: none;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .product-wishlist, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .product-wishlist, body.is-act-finishpage .checkout .checkout-aside-product-list .product-wishlist {
  display: none;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-remove, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-remove, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  max-width: none;
  padding: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-product-list .line-item-remove .btn, body.is-act-checkoutregisterpage .checkout .checkout-aside-product-list .line-item-remove .btn, body.is-act-finishpage .checkout .checkout-aside-product-list .line-item-remove .btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
}
body.is-act-confirmpage .checkout .checkout-aside-summary-total, body.is-act-checkoutregisterpage .checkout .checkout-aside-summary-total, body.is-act-finishpage .checkout .checkout-aside-summary-total {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  border-top-color: var(--rc-border-strong);
}
/*
 * ── 10e. Der Minimalkopf teilt die Zeile nach Bedarf ─────────────────────
 *
 * ENTFALLEN am 28.08.2026, ersetzt durch Abschnitt 11a.
 *
 * Der Kern gab Logo, Kontaktblock und „Zurück zum Shop" je ein starres
 * Drittel (`col-md-4`); diese Regel verteilte die Zeile nach Bedarf um. Der
 * Kopf trägt seit dem Umbau weder Kontaktblock noch Knopf und ist kein
 * Bootstrap-Raster mehr – die Regel hätte kein Ziel mehr.
 *
 * Gemessen am 28.08.2026 auf /checkout/confirm bei 1440x900 waren es zuletzt:
 *
 *   Logo         240 px Kasten für 168 px Bildmarke
 *   Kontakt      925 px Kasten, zweizeilig
 *   Zurück       235 px Knopf
 *   Kopfhöhe     100 px  (390 px: 209 px, also ein Viertel des Bildschirms)
 */
/*
 * Aus dem mittig gesetzten Kasten ausbrechen.
 *
 * Gemessen ist die Kette bis zum Fenster:
 *   main.content-main   1440 px
 *   div.container       1400 px, max-width 1400px, padding 20px
 *   div.container-main  1360 px
 *   div.checkout        1360 px
 *
 * Bei 1440 px kostet das 80 px, bei 1920 px sind es 520 px – dort stünden beide
 * Spalten als Insel in der Fenstermitte statt über die volle Fensterbreite, und
 * die Sandfläche der Übersicht endete sichtbar vor dem rechten Fensterrand.
 * Der Seitenrand wandert deshalb von hier in die Spalten.
 *
 * `.container` trägt die ganze Storefront; die Regel ist deshalb fest an die
 * beiden is-act-Klassen des Bestellvorgangs gebunden.
 */
body.is-act-confirmpage .content-main > .container, body.is-act-confirmpage .cms-section .content-main > .boxed, .cms-section body.is-act-confirmpage .content-main > .boxed, body.is-act-checkoutregisterpage .content-main > .container, body.is-act-checkoutregisterpage .cms-section .content-main > .boxed, .cms-section body.is-act-checkoutregisterpage .content-main > .boxed, body.is-act-finishpage .content-main > .container, body.is-act-finishpage .cms-section .content-main > .boxed, .cms-section body.is-act-finishpage .content-main > .boxed {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}
/*
 * ── 10a. Zwei Spalten ab lg ──────────────────────────────────────────────
 *
 * Erst ab 992 px, weil darunter 470 px Formular plus 470 px Übersicht nicht
 * nebeneinander passen (940 px Inhalt plus vier Ränder = 1036 px).
 *
 * Das Raster ist ein CSS-Grid und keine Bootstrap-Zeile, weil der Bestellknopf
 * eine Zelle braucht, die im Dokument NACH der Übersicht steht, auf dem
 * Bildschirm aber unter dem Formular. Genau das kann ein Raster und eine
 * Zeile nicht:
 *
 *   Dokumentfolge     Formular -> Übersicht -> Knopf
 *   Telefon           Formular / Übersicht / Knopf   (eine Spalte, wie im Dokument)
 *   Rechner           Formular | Übersicht
 *                     Knopf    | (dieselbe Fläche läuft weiter)
 *
 * Die Dokumentfolge ist die, die § 312j Abs. 2 BGB auf dem Telefon verlangt:
 * Gesamtsumme und Versandkosten unmittelbar über dem Bestellknopf. Sie bleibt
 * auch die Tabulatorfolge – das Raster verschiebt nur die Fläche, nicht die
 * Reihenfolge der Bedienelemente.
 *
 * `span 3` statt `1 / -1`: Die Zeilen entstehen implizit, ein `-1` griffe dann
 * ins Leere. Zeilen ohne Inhalt fallen auf 0 px zusammen – die dritte Zeile ist
 * auf /checkout/register leer (dort gibt es keinen Bestellknopf) und die zweite
 * überall dort, wo der Kunde keinen Bestellkommentar schreiben darf.
 */
/*
 * Der breite Spaltenrand erst ab 1200 px.
 *
 * Er stand bis zum 28.08.2026 ab 992 px. Nachgemessen mit der neuen
 * Zeilenliste war das genau eine Stufe zu früh: Bei 992 px ist die Rasterzelle
 * 496 px breit, 2 x 48 px Rand lassen 400 px Inhalt statt der vorgesehenen
 * 470. In der Zeile „Zahlung" blieben für den Wert dadurch 166 px, und im
 * Bildschirmfoto (audit/abnahme/checkout-confirm-nachher-992.png) stand
 *
 *     Rechnungsanschrif
 *     t: Entspricht der
 *     Lieferadresse
 *
 * – das Wort mitten im „t" getrennt.
 *
 * Mit 24 px Rand sind es bei 992 px 448 px Inhalt und der Wert bekommt 214 px.
 * Ab 1200 px ist die Zelle 600 px breit und trägt die vollen 470 + 2 x 48.
 *
 * Am `body`, damit der Minimalkopf denselben Rand bekommt – siehe die
 * Begründung bei der Erstsetzung weiter oben.
 */
@media (min-width: 1200px) {
  body.is-act-confirmpage, body.is-act-checkoutregisterpage, body.is-act-finishpage {
    --rc-checkout-rand: var(--rc-space-7);
  }
}
@media (min-width: 992px) {
  /*
     * Die Übersicht läuft mit.
     *
     * Sie stand schon vorher auf `position: sticky` (Abschnitt 6). Jetzt trägt
     * sie zusätzlich die Positionen und ist damit höher; deshalb hier
     * nachgemessen und begründet:
     *
     * Der Bestellknopf steht seit diesem Umbau am Ende der Formularspalte und
     * damit weit unter der Falz. § 312j Abs. 2 BGB verlangt die Preisangaben
     * „unmittelbar" vor der Bestellung. Mitlaufend gesetzt ist die Gesamtsumme
     * immer dann im Bild, wenn der Knopf im Bild ist – nachgemessen im Abschnitt
     * „Nachweis" der Prüfsonde. Ohne `sticky` stünde sie beim Knopf rund
     * 900 px darüber, also außerhalb des Bildschirms.
     */
  /*
     * Auf der Abschlussseite aus einem anderen Grund, deshalb eigene Regel:
     * Dort gibt es keinen Bestellknopf und keine Frist. Die linke Spalte ist
     * aber gemessen 1.100 bis 1.500 px hoch (Zeitleiste, Angaben, Hilfe),
     * die Übersicht rechts nur 360 bis 700 px. Ohne `sticky` stünde die
     * rechte Hälfte auf zwei Dritteln der Seite leer – genau der Befund
     * („links daneben ist die halbe Seite leer"), nur spiegelverkehrt.
     */
  body.is-act-confirmpage .checkout, body.is-act-checkoutregisterpage .checkout, body.is-act-finishpage .checkout {
    /*
         * Beide Inhalte rücken an die Mittellinie.
         *
         * Erster Anlauf stand auf `margin: 0 auto`, also je in der Mitte der
         * eigenen Hälfte. Gemessen am 28.08.2026 lag zwischen der rechten
         * Kante des Formulars und der linken Kante der Betragsliste:
         *
         *   1440 px Fenster   595 … 845   =  250 px Lücke
         *   1920 px Fenster   715 … 1205  =  490 px Lücke
         *
         * Eine halbe Bildschirmbreite Abstand zwischen dem, was man ausfüllt,
         * und dem, was man dafür zahlt: Auf einem breiten Monitor sind das zwei
         * Seiten statt einer. Das Vorbild hält beide Spalten dicht an der Mitte.
         *
         * `margin-left: auto` schiebt die Formularspalte an die rechte Kante
         * ihrer Rasterzelle, `margin-right: auto` die Übersicht an die linke
         * Kante ihrer. Zwischen ihnen bleiben nur die beiden Spaltenränder,
         * also 2 x 48 = 96 px – und zwar bei JEDER Fensterbreite.
         *
         * Weil beide Spalten gleich breit sind und beide gleich weit
         * einrücken, steht das Ganze trotzdem mittig: Nachgemessen bleiben bei
         * 1440 px links 202 px und rechts 202 px frei, bei 1920 px je 442 px.
         */
  }
  body.is-act-confirmpage .checkout .checkout-container, body.is-act-checkoutregisterpage .checkout .checkout-container, body.is-act-finishpage .checkout .checkout-container {
    grid-template-columns: 1fr 1fr;
  }
  body.is-act-confirmpage .checkout .checkout-main, body.is-act-checkoutregisterpage .checkout .checkout-main, body.is-act-finishpage .checkout .checkout-main {
    grid-column: 1;
    grid-row: 1;
    margin-right: 0;
    margin-left: auto;
    padding-top: var(--rc-space-6);
  }
  body.is-act-confirmpage .checkout .checkout-additional, body.is-act-checkoutregisterpage .checkout .checkout-additional, body.is-act-finishpage .checkout .checkout-additional {
    grid-column: 1;
    grid-row: 2;
    margin-right: 0;
    margin-left: auto;
  }
  body.is-act-confirmpage .checkout .checkout-aside-action, body.is-act-checkoutregisterpage .checkout .checkout-aside-action, body.is-act-finishpage .checkout .checkout-aside-action {
    grid-column: 1;
    grid-row: 3;
    margin-right: 0;
    margin-left: auto;
  }
  body.is-act-confirmpage .checkout .rc-kassenfuss, body.is-act-checkoutregisterpage .checkout .rc-kassenfuss, body.is-act-finishpage .checkout .rc-kassenfuss {
    grid-column: 1;
    grid-row: 4;
    margin-right: 0;
    margin-left: auto;
  }
  body.is-act-confirmpage .checkout .checkout-aside-container, body.is-act-checkoutregisterpage .checkout .checkout-aside-container, body.is-act-finishpage .checkout .checkout-aside-container {
    margin-right: auto;
    margin-left: 0;
  }
  body.is-act-confirmpage .checkout .checkout-aside, body.is-act-checkoutregisterpage .checkout .checkout-aside, body.is-act-finishpage .checkout .checkout-aside {
    grid-column: 2;
    grid-row: 1 / span 4;
    padding-top: var(--rc-space-6);
  }
  body.is-act-confirmpage .checkout .checkout-aside-container, body.is-act-finishpage .checkout .checkout-aside-container {
    position: sticky;
    top: var(--rc-space-5);
  }
}
/*
 * ── 10b. Zahlungs- und Versandart als große Auswahlzeilen ────────────────
 *
 * Im Vorbild ist jede Zahlart eine große anklickbare Zeile mit Radiopunkt
 * links, umrandet und abgerundet; die gewählte ist hervorgehoben.
 *
 * Gemessen war der Ist-Zustand am 27.08.2026 auf /checkout/confirm bei
 * 1440x900: drei Zahlarten und zwei Versandarten, je 44 px hoch, ohne Rahmen,
 * ohne Fläche – nur Punkt und Text auf dem Kartengrund. Anklickbar war die
 * Beschriftung, nicht die Zeile: rechts neben dem Text lagen bei einer 379 px
 * breiten Zeile bis zu 280 px, die auf nichts reagierten.
 *
 * ── Warum der Rahmen an der BESCHRIFTUNG hängt und nicht am Kasten ───────
 *
 * Der hervorgehobene Zustand braucht „ist ausgewählt" im Stylesheet. Über
 * `:has()` darf er hier nicht kommen – die Vorgabe dieses Projekts ist
 * eindeutig, und ein `:has()` mit Attributselektor hat den Theme-Build in
 * diesem Projekt schon zweimal ohne Datei- und Zeilenangabe abgebrochen.
 *
 * Der Kern rendert Punkt und Beschriftung als direkte Geschwister
 * (component/payment/payment-method.html.twig: `input.form-check-input` unmittelbar
 * gefolgt von `label.form-check-label`). Damit reicht der Nachbarschafts-
 * kombinator `input:checked + label` – kein `:has()`, keine Klasse aus dem JS,
 * kein zusätzliches Skript, das erst gebaut werden müsste.
 *
 * Der Punkt wird dafür aus dem Textfluss genommen und über die linke Kante der
 * Beschriftung gelegt. Die Beschriftung bekommt links so viel Innenabstand,
 * dass der Punkt in ihr steht statt daneben – auf dem Bildschirm ist die ganze
 * umrandete Zeile die Beschriftung und damit anklickbar.
 *
 * `display: block` an der Beschriftung, nicht `flex`: Das steht seit
 * Abschnitt 4 fest. Ein Flex-Container verwirft die Leerzeichen zwischen
 * gemischtem Inhalt; genau daran ist in dieser Datei schon einmal
 * „Ich habe dieAGBgelesen" entstanden.
 */
body.is-act-confirmpage {
  /*
     * Der Punkt sitzt in der Zeile, nicht davor.
     *
     * 18 px von oben: Die Beschriftung hat 16 px Innenabstand, die erste
     * Textzeile ist bei 17 px Schrift und 1,4 Zeilenhöhe 24 px hoch, ihre Mitte
     * liegt also bei 16 + 12 = 28 px. Minus die halbe Punkthöhe (12) bleiben
     * 16 px – plus 2 px, weil der Punkt gemessen optisch eine Spur zu hoch
     * saß. 20 px von links ist der Innenabstand der Beschriftung.
     */
  /*
     * Die gewählte Zeile.
     *
     * Zwei Merkmale, nicht nur die Farbe: kräftigere Randfarbe UND getönte
     * Fläche. Der Innenschatten verdoppelt die Randlinie auf 2 px, ohne dass
     * der Kasten dabei um 1 px wächst und die Zeile springt – ein zweiter
     * `border-width` würde genau das tun.
     *
     * --rc-primary auf --rc-primary-soft ist ein bereits geprüftes Paar aus
     * _tokens.scss; es kommt keine Farbe hinzu.
     */
  /*
     * Der Hinweis zur gewählten Zahlart schließt an die Liste an.
     *
     * Er trägt den vollständigen Text, den der Kern auf 75 Zeichen kürzt
     * (Begründung in Abschnitt 9b und in confirm-payment.html.twig). Im Vorbild
     * steht der erklärende Text INNERHALB der gewählten Zeile; das geht hier
     * nicht, weil er in einer Vorlage außerhalb dieses Arbeitsbereichs
     * gerendert würde. Er bekommt deshalb dieselbe getönte Fläche wie die
     * gewählte Zeile und rückt bündig unter sie – und er nennt die Zahlart im
     * ersten Satz („Zu Ihrer Auswahl „Nachnahme": …"), sodass der Bezug auch
     * dann eindeutig ist, wenn die gewählte Zeile nicht die letzte ist.
     */
  /*
     * Der Knopf „Lieferadresse ändern" / „Rechnungsadresse ändern".
     *
     * Abschnitt 9a hatte ihn auf volle Breite gesetzt, weil er in einer 195 px
     * schmalen Spalte 111 px aus dem Fenster ragte. In der 470-px-Spalte steht
     * er allein in seiner Zeile; über die volle Breite gezogen sähe er wie ein
     * zweiter Hauptknopf neben dem Bestellknopf aus. Gemessen braucht die
     * längere der beiden Beschriftungen 220 px – er bekommt seine Inhaltsbreite
     * zurück und behält die 48 px Klickhöhe aus Abschnitt 9a.
     */
  /*
     * Der Bestellknopf über die volle Spaltenbreite.
     *
     * Der Kern gibt ihm bereits `.d-grid` und damit 100 %. Was hier dazukommt,
     * ist die Höhe: 56 px (--rc-control-lg) ist die größte Stufe der Skala und
     * dem letzten Klick des Bestellvorgangs angemessen.
     *
     * Die Beschriftung bleibt unverändert „Zahlungspflichtig bestellen" – die
     * eindeutige Formulierung, die § 312j Abs. 3 BGB verlangt. Sie kommt aus
     * dem Kernschlüssel checkout.confirmSubmit und wird hier nicht angefasst.
     */
}
body.is-act-confirmpage .confirm-payment .form-check, body.is-act-confirmpage .confirm-shipping .form-check {
  position: relative;
  display: block;
  gap: 0;
  margin-bottom: var(--rc-space-2);
  padding-left: 0;
}
body.is-act-confirmpage .confirm-payment .form-check:last-child, body.is-act-confirmpage .confirm-shipping .form-check:last-child {
  margin-bottom: 0;
}
body.is-act-confirmpage .confirm-payment .form-check-input, body.is-act-confirmpage .confirm-shipping .form-check-input {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 1;
  flex: none;
  float: none;
  width: 24px;
  height: 24px;
  margin: 0;
}
body.is-act-confirmpage .confirm-payment .form-check-label, body.is-act-confirmpage .confirm-shipping .form-check-label {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 56px;
  padding: var(--rc-space-4) var(--rc-space-4) var(--rc-space-4) 56px;
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  cursor: pointer;
}
body.is-act-confirmpage .confirm-payment .form-check-input:checked + .form-check-label, body.is-act-confirmpage .confirm-shipping .form-check-input:checked + .form-check-label {
  border-color: var(--rc-primary);
  box-shadow: inset 0 0 0 1px var(--rc-primary);
  background-color: var(--rc-primary-soft);
}
body.is-act-confirmpage .rc-payment-note {
  margin-top: var(--rc-space-3);
  padding: var(--rc-space-3) var(--rc-space-4);
  border-left: 3px solid var(--rc-primary);
  border-radius: 0 var(--rc-radius-control) var(--rc-radius-control) 0;
  background-color: var(--rc-primary-soft);
}
body.is-act-confirmpage .confirm-address .card-actions .btn {
  display: inline-flex;
  width: auto;
  padding: var(--rc-space-3) var(--rc-space-4);
}
body.is-act-confirmpage .checkout-aside-action .btn-primary {
  min-height: var(--rc-control-lg);
  font-size: var(--rc-fs-base);
}
/*
 * ── 10c. Feldzeilen in der schmalen Spalte ───────────────────────────────
 *
 * Im Vorbild teilen sich nebeneinanderstehende Felder die Zeile hälftig:
 * Vorname/Nachname und Postleitzahl/Stadt. Alles andere steht über die volle
 * Breite.
 *
 * Gemessen am 27.08.2026 auf /checkout/register bei 1440x900, also in der
 * bisherigen 845 px breiten Formularspalte:
 *
 *   Anrede    205 px   (col-12 col-sm-5 col-md-3)
 *   Vorname   276 px   (col-6  col-sm-7 col-md-4)
 *   Nachname  348 px   (col-6  col-sm-12 col-md-5)
 *   Straße    419 px   (col-md-6)
 *   PLZ       205 px   (col-md-3 col-4)
 *   Ort       205 px   (col-md-3 col-8)
 *   Land      419 px   (col-md-6)
 *
 * Die Spaltenklassen rechnen gegen die FENSTERbreite, nicht gegen die Spalte.
 * In der neuen 470-px-Spalte ergäbe `col-md-3` bei 1440 px Fenster 117 px –
 * für „Straße und Hausnummer" wären es 235 px. Deshalb wird die Aufteilung
 * hier neu gesetzt statt in den Vorlagen: Sie hängt an der Spaltenbreite, und
 * die steht in dieser Datei.
 *
 * Die Feldhöhe bleibt bei 48 px (Abschnitt 3). Das Vorbild arbeitet mit
 * schwebender Beschriftung IM Feld und kommt damit auf 52–56 px je Feld; hier
 * steht die Beschriftung über dem Feld, gemessen 21 px + 4 px Abstand + 48 px
 * Feld = 73 px je Zeile. Unsere Zeile ist also bereits höher als die des
 * Vorbilds – höhere Felder würden sie nur weiter strecken, ohne etwas lesbarer
 * zu machen.
 */
body.is-act-checkoutregisterpage .checkout-main .register-form {
  /*
     * … dann die beiden Paare zurück auf die halbe Zeile.
     *
     * `.rc-namenszeile` ist die Zeile aus component/address/address-personal.html.twig
     * (Anrede, Vorname, Nachname). `:not(:first-child)` sind Vorname und
     * Nachname; die Anrede bleibt über der Zeile in voller Breite, wie im
     * Vorbild das Land über Vorname/Nachname steht.
     *
     * `.col-4` und `.col-8` sind die Klassen, die der Kern in
     * component/address/address-fields.html.twig an Postleitzahl und Ort hängt.
     * Sie sind hier der stabilste Anker: Ein Positionsselektor (`:nth-child`)
     * würde brechen, sobald ein Feld dazukommt – etwa das im Shop noch
     * abgeschaltete Adresszusatzfeld.
     */
}
body.is-act-checkoutregisterpage .checkout-main .register-form .row > .form-group {
  flex: 0 0 100%;
  max-width: 100%;
}
body.is-act-checkoutregisterpage .checkout-main .register-form .rc-namenszeile > .form-group:not(:first-child), body.is-act-checkoutregisterpage .checkout-main .register-form .row > .form-group.col-4, body.is-act-checkoutregisterpage .checkout-main .register-form .row > .form-group.col-8 {
  flex: 0 0 50%;
  max-width: 50%;
}
/*
 * ── 10d. Der mitlaufende Weiter-Knopf passt sich dem neuen Raster an ─────
 *
 * Abschnitt 8f heftet den Knopf auf /checkout/register an den unteren
 * Fensterrand und zieht ihn mit negativen Außenabständen über den Innenabstand
 * der Karte hinaus – die Werte dort sind der `.card-body`-Innenabstand mit
 * umgekehrtem Vorzeichen (12/16 px, ab 768 px 16/24 px).
 *
 * Dieser Innenabstand ist mit Abschnitt 10 auf 0 gefallen: Die Karte hat keine
 * eigene Fläche mehr. Ohne diese Regel stünde die Leiste um 16 bzw. 24 px zu
 * weit links und ragte über die Spalte hinaus.
 *
 * Neu bezieht sie sich auf den Spaltenrand: Sie reicht genau von Fensterkante
 * zu Fensterkante der Spalte, sodass beim Scrollen kein Streifen Formular
 * neben ihr durchscheint. Der Knopf selbst bleibt auf der Inhaltsbreite.
 */
body.is-act-checkoutregisterpage .checkout-main .register-form > .rc-checkout-submit {
  margin: 0 calc(-1 * var(--rc-checkout-rand));
  padding: var(--rc-space-4) var(--rc-checkout-rand);
  border-radius: 0;
  /*
         * Eine Haarlinie – und zwar begründet.
         *
         * Abschnitt 8f hatte der Leiste bewusst KEINE Linie gegeben, sondern
         * eine eigene Flächenfarbe: Off-White auf der Sandfläche der Karte.
         * Diese Kante ist mit Abschnitt 10 verschwunden, weil die Karte ihre
         * Sandfläche an die Übersichtsspalte abgegeben hat – Leiste und
         * Seitengrund sind jetzt beide --rc-bg.
         *
         * Im Bildschirmfoto (audit/abnahme/checkout-register-sticky-1440.png,
         * 1440x900, Formular auf 35 % gescrollt) sieht man die Folge: Der Satz
         * „Im nächsten Schritt sehen Sie Adresse, Zahlungsart und …" endet auf
         * halber Zeilenhöhe im Nichts. Genau dieser Eindruck – abgeschnittener
         * Inhalt statt darüberliegender Leiste – war 8f schon einmal zum
         * Verhängnis geworden.
         *
         * Die Vorgabe „Flächenfarbe statt Haarlinie" gilt für die TRENNUNG von
         * Abschnitten. Hier trennt die Linie nichts, sie markiert die Kante
         * einer Fläche, die über dem Inhalt liegt – dafür gibt es keine
         * Alternative aus der Palette, weil beide Flächen dieselbe Farbe haben
         * müssen (die Leiste muss den Seitengrund fortsetzen, damit sie nicht
         * als Kasten wirkt).
         */
  border-top: 1px solid var(--rc-border);
}
@media (min-width: 768px) {
  body.is-act-checkoutregisterpage .checkout-main .register-form > .rc-checkout-submit {
    margin: 0 calc(-1 * var(--rc-checkout-rand));
    padding: var(--rc-space-5) var(--rc-checkout-rand) var(--rc-space-4);
  }
}
/*
 * ══ 11. Der Abschlussschritt nach Bild 2 des Vorbilds ═════════════════════
 *
 * Auftrag des Betreibers (wörtlich): „bitte baue ihn 1:1 vom aufbau wie
 * gesagt identisch nach aktuell ist es schon gut nur noch nicht richtig".
 *
 * ── Ist-Zustand, gemessen am 28.08.2026 ──────────────────────────────────
 * Playwright, echter Gast-Durchlauf (Scooter Vermeiren Carpo 2 SE,
 * 3.199,20 €), /checkout/confirm:
 *
 *                        1440x900     768x1024     390x844
 *   Dokumenthöhe          1815 px      2605 px      3022 px
 *   Formularspalte         566 px       518 px       390 px   (Inhalt 470)
 *   Übersicht rechts       720 px      unter der Hauptspalte
 *   Kopfleiste           1440x100     768x151      390x209
 *   Bestellknopf bei y    1478 px      2237 px      2482 px
 *
 * Was schon passte und unverändert bleibt: Zweispaltenraster, 470 px
 * Formularbreite, durchlaufende Sandfläche rechts, Positionen und Beträge
 * rechts, Auswahlzeilen mit Radiopunkt, Knopf über die volle Spaltenbreite.
 *
 * Was hier dazukommt:
 *   11a  Minimalkopf: kleines Logo mittig über der Formularspalte,
 *        Taschensymbol rechts, Sandfläche bis an den oberen Seitenrand
 *   11b  Die vier Zusammenfassungszeilen mit „Ändern" (Bild 2)
 *   11c  Rufnummer und Rechtslinks unter dem Bestellknopf
 *   11d  Gutscheinfeld in der Übersicht
 */
/*
 * ── 11a. Minimalkopf ─────────────────────────────────────────────────────
 *
 * Der Kopf ist kein Bootstrap-Raster mehr, sondern ein Dreispalter mit fester
 * linker und rechter Wange. Das Logo steht in der Mitte, das Taschensymbol
 * rechts – wie im Vorbild.
 *
 * Warum drei Spalten und nicht Flex mit „margin: 0 auto": Bei Flex zentriert
 * auto das Logo nur, wenn links und rechts gleich viel steht. Rechts steht ein
 * 44 px breites Symbol, links nichts – das Logo säße 22 px zu weit links. Die
 * 44-px-Wange links gleicht das aus, ohne dass ein Blindelement ins Dokument
 * muss.
 */
.rc-kassenkopf {
  padding: 0;
  border-bottom: 0;
  background-color: var(--rc-bg);
}
.rc-kassenkopf__spalte {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  width: 100%;
  max-width: calc(var(--rc-checkout-spalte) + 2 * var(--rc-checkout-rand));
  margin: 0 auto;
  padding: var(--rc-space-3) var(--rc-checkout-rand);
}
.rc-kassenkopf__logo {
  grid-column: 2;
  justify-self: center;
  max-width: 150px;
  /*
     * Auf sehr schmalen Geräten stießen Logo und „Zurück zum Shop" ohne jede
     * Lücke aneinander – gemessen bei 320 px Fensterbreite: Logo 24…130,
     * Verweis 130…296, Abstand exakt 0. Zwei Klickziele, die sich berühren,
     * trifft man mit dem Finger nicht auseinander; die eigene Untergrenze
     * zwischen zwei Zielen liegt bei 12 px.
     *
     * Das Logo gibt nach, nicht der Verweis: Es ist eine Marke und bleibt
     * auch bei 110 px lesbar, während „Zurück zum Shop" ab einer gewissen
     * Breite umbricht.
     */
}
@media (max-width: 380px) {
  .rc-kassenkopf__logo {
    max-width: 110px;
    margin-right: var(--rc-space-3);
  }
}
/*
 * Die Bildmarke bringt aus dem Kern eine Mindestbreite von 200 px mit
 * (`.header-logo-picture`). Ohne diese Zeile wäre sie 200 statt 150 px breit
 * und ragte über ihren Kasten hinaus – derselbe Fehler, der in Abschnitt 8a
 * schon einmal zwei Klickziele übereinandergelegt hat.
 */
.rc-kassenkopf .header-logo-picture {
  min-width: 0;
  max-width: 100%;
}
.rc-kassenkopf .header-logo-main {
  margin: 0;
}
.rc-kassenkopf .header-wishlist-badge {
  display: none;
}
.rc-kassenkopf__korb, .rc-kassenkopf__zurueck {
  grid-column: 3;
  justify-self: end;
}
/*
 * Das Taschensymbol mit der Stückzahl.
 *
 * 44x44 px – die Untergrenze dieses Projekts für Klickflächen, und im Kopf
 * das einzige Bedienelement neben dem Logo.
 */
.rc-kassenkopf__korb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--rc-text);
  text-decoration: none;
}
.rc-kassenkopf__korb:hover, .rc-kassenkopf__korb:focus-visible {
  color: var(--rc-primary);
}
.rc-kassenkopf__korb .icon {
  width: 26px;
  height: 26px;
}
/*
 * Die Zahl sitzt als Abzeichen an der oberen rechten Ecke des Symbols.
 *
 * Der Ring in der Seitenfarbe ist nicht Zierrat, sondern der Grund, warum das
 * Abzeichen überhaupt funktioniert: Gemessen am 28.08.2026 im Bildschirmfoto
 * (audit/abnahme/tmp-kopf-zoom.png) lag die Zahl ohne Ring auf dem Bügel der
 * Tasche und das Symbol war nicht mehr als Tasche zu erkennen. Dieselbe
 * Lösung steht bereits im großen Kopf (layout/_header.scss, `.header-cart
 * .header-cart-badge`) – dort mit weißem Ring, hier mit Off-White, weil der
 * Kassenkopf auf `--rc-bg` steht.
 *
 * `box-sizing: border-box`, sonst zählt der 2-px-Ring zur Größe hinzu und das
 * Abzeichen wird 24 statt 20 px – derselbe Fehler wie im großen Kopf.
 */
.rc-kassenkopf__korbzahl {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 2px solid var(--rc-bg);
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-primary);
  color: #ffffff;
  font-size: var(--rc-fs-micro);
  font-weight: var(--rc-fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/*
 * „Zurück zum Shop" erscheint nur, wo es keinen Warenkorb gibt – auf
 * /checkout/finish und in der Bestellübersicht des Kontos. Dort ist er nach
 * abgeschlossener Bestellung der einzige Weg zurück, und dort steht kein
 * Taschensymbol, das seinen Platz einnimmt. Er braucht deshalb mehr als die
 * 44 px Wange und sprengt die dritte Rasterspalte bewusst.
 */
.rc-kassenkopf__zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--rc-space-3);
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  text-decoration: underline;
  white-space: nowrap;
}
.rc-kassenkopf__zurueck:hover, .rc-kassenkopf__zurueck:focus-visible {
  color: var(--rc-primary-dark);
}
/*
 * ── Die Sandfläche beginnt am oberen Seitenrand ──────────────────────────
 *
 * Im Vorbild läuft die Übersicht rechts „vom oberen Seitenrand bis unten
 * durch". Gemessen begann sie hier bei y=120 – also erst unter der Kopfleiste,
 * und darüber stand ein heller Streifen über die volle Breite.
 *
 * Der Kopf ist ein Geschwister von `.checkout` und liegt außerhalb des
 * Rasters; er lässt sich nicht in die Rasterzelle hineinziehen. Stattdessen
 * bekommt er DASSELBE Raster: zwei gleich breite Spalten über die volle
 * Fensterbreite, links der Inhalt, rechts ein Pseudoelement in der Farbe von
 * `.checkout-aside`. Weil `.checkout-container` genauso gebaut ist und beide
 * dieselbe Breite haben (gemessen: x=0, b=1440 bei 1440 px Fenster), liegt die
 * Kante auf demselben Pixel und es entsteht keine sichtbare Naht.
 *
 * ── Erster Anlauf und warum er falsch war ───────────────────────────────
 *
 * Zuerst stand hier ein absolut gesetztes Pseudoelement (`left: 50%`) und am
 * Inhalt `margin-right: 50%`. Gemessen am 28.08.2026 stimmte das ab 1200 px –
 * und brach genau an der unteren Grenze:
 *
 *   Fenster   rechte Kante Kopfspalte   rechte Kante Formularspalte
 *    992 px            566 px                    496 px      <- 70 px daneben
 *   1200 px            600 px                    600 px
 *   1440 px            720 px                    720 px
 *
 * Ursache: `margin-right: 50%` rechnet gegen die volle Kopfbreite. Bei 992 px
 * bleiben links davon 496 px, die Spalte will aber 566 px (470 Inhalt + 2 x 48
 * Rand). Die Randvorgabe ist damit überbestimmt, `margin-left: auto` fällt auf
 * 0 – und die Spalte ragt 70 px über die Mitte. Zwischen 992 und 1131 px stand
 * das Logo deshalb nicht über dem Formular, sondern rechts daneben.
 *
 * Im Raster kann das nicht passieren: Die Zelle IST die linke Hälfte, und
 * `max-width` wird von ihr begrenzt statt gegen sie zu rechnen – genauso, wie
 * es `.checkout-main` in seiner Zelle tut.
 */
@media (min-width: 992px) {
  body.is-act-confirmpage .rc-kassenkopf, body.is-act-checkoutregisterpage .rc-kassenkopf, body.is-act-finishpage .rc-kassenkopf {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  body.is-act-confirmpage .rc-kassenkopf__spalte, body.is-act-checkoutregisterpage .rc-kassenkopf__spalte, body.is-act-finishpage .rc-kassenkopf__spalte {
    grid-column: 1;
    grid-row: 1;
    margin-right: 0;
    margin-left: auto;
  }
  body.is-act-confirmpage .rc-kassenkopf::after, body.is-act-checkoutregisterpage .rc-kassenkopf::after, body.is-act-finishpage .rc-kassenkopf::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    background-color: var(--rc-surface-warm);
  }
}
/*
 * ── 11b. Die vier Zusammenfassungszeilen ─────────────────────────────────
 *
 * Ein umrandeter Kasten mit Trennlinien, je Zeile links die Beschriftung in
 * Grau, mittig der Wert, rechts „Ändern".
 *
 * Genau EIN Rahmen um die Gruppe und Haarlinien dazwischen – nicht ein Rahmen
 * je Zeile. Das ist der Unterschied, den der Betreiber am heutigen Zustand
 * bemängelt hat („Die Auswahlzeilen sind EINZELNE Kästen mit Abstand
 * dazwischen, nicht eine Gruppe mit Trennlinien").
 *
 * Weiß auf Off-White: Die Liste ist der eine Gegenstand der Formularspalte,
 * die Übersicht rechts ist die Sandfläche. Ein dritter Farbwert kommt nicht
 * hinzu.
 */
.rc-bestelldaten {
  margin-bottom: var(--rc-space-6);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface);
  overflow: hidden;
}
.rc-bestellzeile + .rc-bestellzeile {
  border-top: 1px solid var(--rc-border);
}
/*
 * Das Zeilenraster.
 *
 * Auf dem Telefon zweispaltig und gestapelt: Beschriftung über dem Wert,
 * „Ändern" rechts daneben über beide Zeilen. Gerechnet für 390 px Fenster:
 * Spalte 342 px minus 2 x 16 px Innenabstand sind 310 px; davon braucht
 * „Ändern" gemessen 60 px und der Abstand 12 px – blieben 238 px für den
 * Wert. Dreispaltig wären es 238 minus 116 px Beschriftung = 122 px, und
 * darin bricht „40213 Duesseldorf" in der Mitte um.
 *
 * Ab 576 px reicht es für drei Spalten nebeneinander, wie im Vorbild.
 */
.rc-bestellzeile, .rc-bestellzeile__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--rc-space-3);
  row-gap: var(--rc-space-1);
  align-items: start;
  min-height: 56px;
  padding: var(--rc-space-4);
}
.rc-bestellzeile--klapp {
  display: block;
  padding: 0;
}
.rc-bestellzeile__marke {
  grid-column: 1;
  grid-row: 1;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1.45;
}
.rc-bestellzeile__wert {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  line-height: 1.45;
  /*
     * Umbruch nur im Notfall, und NIEMALS mit Bindestrich.
     *
     * Erster Anlauf stand auf `overflow-wrap: anywhere`. Im Bildschirmfoto
     * (audit/abnahme, 1440x900) stand daraufhin in der Zeile „Liefern an":
     *
     *     Hanna Berg-
     *     mann
     *     Musterweg 12
     *     40213 Dues-
     *     seldorf
     *
     * Zwei Ursachen: Die Grundtypografie dieses Themes setzt `hyphens: auto`,
     * und `anywhere` erlaubt dem Browser zusätzlich, die Spalte auf
     * Buchstabenbreite zu rechnen. Eine Adresse, die falsch getrennt
     * dasteht, sieht nach Fehler aus – und genau hier soll der Kunde prüfen,
     * ob seine Adresse stimmt (derselbe Befund wie in Abschnitt 7).
     *
     * `break-word` bricht nur, wenn ein einzelnes Wort die Zeile wirklich
     * sprengt – etwa eine lange E-Mail-Adresse. Gemessen bleibt
     * „gast1787946679921@example.org" damit in der Spalte, ohne dass ein
     * Ortsname getrennt wird.
     */
  hyphens: manual;
  overflow-wrap: break-word;
}
.rc-bestellzeile__aktion, .rc-bestellzeile__aendern {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}
.rc-bestellzeile__betrag {
  margin-left: var(--rc-space-2);
  font-weight: var(--rc-fw-semibold);
  white-space: nowrap;
}
.rc-bestellzeile__zusatz {
  display: block;
  margin-top: var(--rc-space-1);
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
  line-height: 1.4;
}
.rc-bestellzeile__bedingung {
  color: var(--rc-text);
}
/*
 * „Ändern" – als Link gesetzt, mit 44 px Klickfläche.
 *
 * In den Aufklappzeilen ist es ein Textelement innerhalb des `summary`: Das
 * ganze `summary` ist dort das Bedienelement, ein zweites verschachteltes wäre
 * für die Tastatur ein Ziel zu viel. In den beiden festen Zeilen ist es ein
 * echter Link bzw. der Knopf der Adressverwaltung.
 */
.rc-bestellzeile__aendern {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  padding-left: var(--rc-space-2);
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  text-decoration: underline;
  white-space: nowrap;
}
a.rc-bestellzeile__aendern:hover, a.rc-bestellzeile__aendern:focus-visible {
  color: var(--rc-primary-dark);
}
/*
 * Der Knopf der Adressverwaltung wird zum Link.
 *
 * Der Kern rendert ihn als Anker mit den Klassen `btn btn-light`, dem Attribut
 * `data-address-manager` und den zugehörigen Optionen. Diese Attribute bleiben
 * unangetastet – nur das Aussehen ändert sich, damit die Zeile so aussieht wie
 * die drei anderen. Gemessen war der Knopf zuvor 220 px breit; als Link
 * braucht er 60.
 */
.rc-bestellzeile__aktion .btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 0 0 var(--rc-space-2);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--rc-primary);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-regular);
  text-decoration: underline;
  white-space: nowrap;
}
.rc-bestellzeile__aktion .btn:hover, .rc-bestellzeile__aktion .btn:focus-visible {
  background: none;
  color: var(--rc-primary-dark);
}
/*
 * Der Aufklapper.
 *
 * `summary` bringt in Chrome und Safari ein Dreieck mit; es wird entfernt,
 * weil rechts bereits „Ändern" steht und zwei Anzeigen für dieselbe Sache eine
 * zu viel sind. Der Zeigerwechsel macht die ganze Zeile als anklickbar
 * erkennbar – im Vorbild ist sie das ebenfalls.
 */
.rc-bestellzeile__kopf {
  cursor: pointer;
  list-style: none;
}
.rc-bestellzeile__kopf::-webkit-details-marker {
  display: none;
}
.rc-bestellzeile__kopf:hover .rc-bestellzeile__aendern {
  color: var(--rc-primary-dark);
}
/*
 * Der aufgeklappte Bereich.
 *
 * Off-White gegen das Weiß der Zeilen: Er ist ein Einschub, kein weiterer
 * Abschnitt. Die Trennlinie oben ist dieselbe wie zwischen zwei Zeilen.
 */
.rc-bestellzeile__auswahl {
  padding: var(--rc-space-4);
  border-top: 1px solid var(--rc-border);
  background-color: var(--rc-bg);
}
body.is-act-confirmpage .checkout .rc-bestellzeile__auswahl {
  /*
     * Abschnitt 10 gibt `.confirm-payment`, `.confirm-shipping` und
     * `.confirm-address` je 32 px Abstand nach unten – gedacht für lose Blöcke
     * untereinander. Im Einschub sind sie der Inhalt und stießen sonst 32 px
     * vor der Kante ab.
     */
  /*
     * Die Rechnungsadresse steht im selben Einschub unter der Zahlartenliste –
     * genau wie im Vorbild, wo „Zahlung" beides trägt. 24 px trennen die
     * beiden Gegenstände.
     */
  /*
     * Die Überschriften „Versandart" und „Zahlungsart" wiederholen, was die
     * Zeile darüber schon sagt („Versand", „Zahlung"). Sie werden NUR optisch
     * entfernt und bleiben für Vorlesesoftware in der Überschriftenliste –
     * deshalb clip und nicht display: none. Die Überschrift „Rechnungsadresse"
     * bleibt sichtbar: Sie trennt zwei verschiedene Dinge im selben Einschub.
     */
}
body.is-act-confirmpage .checkout .rc-bestellzeile__auswahl .confirm-payment, body.is-act-confirmpage .checkout .rc-bestellzeile__auswahl .confirm-shipping {
  margin-bottom: 0;
}
body.is-act-confirmpage .checkout .rc-bestellzeile__auswahl .rc-confirm-rechnungsadresse {
  margin-top: var(--rc-space-5);
  margin-bottom: 0;
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-border);
}
body.is-act-confirmpage .checkout .rc-bestellzeile__auswahl .confirm-payment > .card > .card-body > .card-title, body.is-act-confirmpage .checkout .rc-bestellzeile__auswahl .confirm-shipping > .card > .card-body > .card-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 576px) {
  .rc-bestellzeile, .rc-bestellzeile__kopf {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    row-gap: 0;
  }
  .rc-bestellzeile--klapp {
    display: block;
  }
  .rc-bestellzeile__marke {
    grid-column: 1;
    grid-row: 1;
  }
  .rc-bestellzeile__wert {
    grid-column: 2;
    grid-row: 1;
  }
  .rc-bestellzeile__aktion, .rc-bestellzeile__aendern {
    grid-column: 3;
    grid-row: 1;
  }
}
/*
 * ── 11c. Rufnummer und Rechtslinks unter dem Bestellknopf ────────────────
 *
 * Die Rufnummer stand bis heute im Minimalkopf. Das Vorbild hat dort nichts;
 * gelöscht wird sie trotzdem nicht, weil sie eine ausdrückliche frühere
 * Entscheidung des Betreibers war. Sie steht jetzt unter dem Bestellknopf –
 * ausführliche Begründung in layout/header/header-minimal.html.twig.
 *
 * Ruhig gesetzt: 17 px, gedämpfte Farbe, keine Fläche, kein Rahmen. Nur die
 * Nummer selbst ist ein Klickziel mit 44 px Höhe.
 */
.rc-kassenhilfe {
  margin: 0 0 var(--rc-space-4);
  color: var(--rc-muted);
  font-size: var(--rc-fs-xs);
  line-height: 1.45;
}
.rc-kassenhilfe strong {
  font-weight: var(--rc-fw-semibold);
}
.rc-kassenhilfe a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rc-primary);
  font-size: var(--rc-fs-base);
  text-decoration: none;
}
.rc-kassenhilfe a[href^="tel:"]:hover, .rc-kassenhilfe a[href^="tel:"]:focus-visible {
  color: var(--rc-primary-dark);
  text-decoration: underline;
}
/*
 * Die Rechtslinks.
 *
 * Linksbündig und unterstrichen wie im Vorbild. Sie sind teils Knöpfe (Overlay
 * über `data-ajax-modal`, dieselbe Machart, die der Kern für AGB und
 * Widerrufsbelehrung auf dieser Seite bereits benutzt) und teils Anker
 * (Cookie-Einstellungen). Beide bekommen dasselbe Aussehen, damit man ihnen
 * den Unterschied nicht ansieht – für den Leser sind es sieben gleichartige
 * Hinweise.
 *
 * 44 px Klickhöhe je Eintrag und 16 px waagerechter Abstand: Zwei
 * unterstrichene Wörter dicht nebeneinander wären für zittrige Hände zwei
 * Ziele, die ineinander übergehen.
 */
.rc-rechtslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rc-space-4);
}
.rc-rechtslinks__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rc-primary);
  font-family: inherit;
  font-size: var(--rc-fs-xs);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.rc-rechtslinks__link:hover, .rc-rechtslinks__link:focus-visible {
  color: var(--rc-primary-dark);
}
/*
 * ── 11d. Gutscheinfeld in der Übersicht ──────────────────────────────────
 *
 * Es steht zwischen den Positionen und den Beträgen, wie im Vorbild. Feld und
 * Knopf teilen sich eine Zeile; das Feld nimmt den Rest.
 *
 * Der Knopf trägt Text („Anwenden") statt eines Häkchensymbols wie im
 * Seitenwarenkorb. Für die Zielgruppe ist ein beschrifteter Knopf eindeutig,
 * ein Häkchen neben einem leeren Feld ist es nicht.
 */
.rc-gutschein {
  margin-bottom: var(--rc-space-5);
  padding-bottom: var(--rc-space-5);
  border-bottom: 1px solid var(--rc-border-strong);
}
.rc-gutschein__label {
  display: block;
  margin-bottom: var(--rc-space-1);
  font-size: var(--rc-fs-sm);
  line-height: 1.25;
}
.rc-gutschein__zeile {
  display: flex;
  gap: var(--rc-space-2);
}
.rc-gutschein__feld {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--rc-control-md);
  min-height: var(--rc-control-md);
  font-size: var(--rc-fs-base);
}
.rc-gutschein__knopf {
  flex: 0 0 auto;
  min-height: var(--rc-control-md);
  padding: 0 var(--rc-space-4);
  font-size: var(--rc-fs-sm);
  white-space: nowrap;
}
/*
 * ── 11e. Die Übersicht rechts trennt Positionen und Gutschein ────────────
 *
 * Abschnitt 10 gab `.checkout-aside-products` eine Unterkante, weil darunter
 * unmittelbar die Betragsliste begann. Jetzt steht das Gutscheinfeld
 * dazwischen und bringt seine eigene Kante mit – zwei Linien mit 24 px Abstand
 * wären eine zu viel.
 */
body.is-act-confirmpage .checkout .checkout-aside-products {
  padding-bottom: 0;
  border-bottom: 0;
}
/*
 * Auf dem Telefon steht die Übersicht zwischen Formular und Bestellknopf.
 *
 * Das ist bewusst NICHT die Anordnung des Vorbilds (dort ein aufklappbarer
 * Kopf über dem Formular), und der Grund ist rechtlich: § 312j Abs. 2 BGB
 * verlangt die wesentlichen Merkmale der Ware, den Gesamtpreis und die
 * Versandkosten „unmittelbar" vor der Bestellung. Stünden sie oben als
 * zugeklappter Kopf, läge zwischen ihnen und dem Knopf gemessen die ganze
 * Seite.
 *
 * In der Dokumentfolge Formular, Übersicht, Knopf stehen sie unmittelbar
 * darüber; das ist auch die Tabulatorfolge. Am Rechner setzt das Raster die
 * Übersicht daneben und lässt sie mitlaufen (Abschnitt 10a), sodass sie beim
 * Knopf im Bild ist.
 */
/*
 * ── 11f. Die Sandfläche ohne Naht ────────────────────────────────────────
 *
 * Der Kopf setzt die rechte Hälfte in Sand fort (Abschnitt 11a), die Übersicht
 * beginnt darunter. Dazwischen blieb ein heller Streifen stehen. Gemessen am
 * 28.08.2026 bei 1440x900 mit der neuen Fassung:
 *
 *   header.rc-kassenkopf   y=0    h=76
 *   div.container-main     y=76   padding-top 20px
 *   div.checkout           y=96   <- die Sandfläche beginnt erst hier
 *
 * Die 20 px stammen aus `.container-main`, dem allgemeinen Innenabstand jeder
 * Inhaltsseite. Im Bestellvorgang liegt darüber keine Kopfnavigation, von der
 * abgesetzt werden müsste, und der Streifen zerschneidet die Fläche, die im
 * Vorbild „vom oberen Seitenrand bis unten" durchläuft.
 *
 * Unten dieselbe Rechnung: `.container-main` ist 1093 px hoch, `.checkout`
 * 1053 – die restlichen 20 px stehen unter der Sandfläche und vor der
 * Fußzeile.
 *
 * Der Selektor ist fest an die beiden is-act-Klassen gebunden; `.container-main`
 * trägt jede Seite des Shops.
 */
body.is-act-confirmpage .container-main, body.is-act-checkoutregisterpage .container-main, body.is-act-finishpage .container-main {
  padding-top: 0;
  padding-bottom: 0;
}
/*
 * ── 11g. Die Übersicht ist EINE Fläche, nicht zwei Blöcke ────────────────
 *
 * Befund des Betreibers am heutigen Zustand: „Rechts stehen ‚Warenkorb' und
 * ‚Zusammenfassung' als zwei getrennte Blöcke."
 *
 * Gemessen am 28.08.2026 auf /checkout/confirm: `.checkout-aside-summary`
 * trägt `background-color: rgb(249, 249, 249)` und 16 px Innenabstand aus dem
 * Kern – ein hellgrauer Kasten mitten auf der Sandfläche. Im Vorbild gibt es
 * ihn nicht: Dort stehen Positionen, Gutscheinfeld und Beträge auf ein und
 * derselben Fläche, getrennt nur durch Haarlinien.
 *
 * Grau auf Sand wäre außerdem ein dritter Flächenwert; der Benchmark lässt
 * genau zwei zu.
 */
body.is-act-confirmpage .checkout .checkout-aside-summary, body.is-act-checkoutregisterpage .checkout .checkout-aside-summary, body.is-act-finishpage .checkout .checkout-aside-summary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
/*
 * Die Überschrift „Zusammenfassung" wird nur optisch entfernt.
 *
 * Im Vorbild steht über den Beträgen nichts – Zwischensumme, Versand und
 * Gesamt erklären sich selbst, und die Überschrift stand gemessen in 22 px
 * über einer Liste aus 17-px-Zeilen. Für Vorlesesoftware bleibt sie in der
 * Überschriftenliste stehen, deshalb `clip` und nicht `display: none`:
 * Sie ist dort die einzige Marke, an der die Betragsliste zu finden ist.
 *
 * „Warenkorb" darüber bleibt sichtbar. Es ist die Überschrift der ganzen
 * Spalte und benennt, was rechts steht.
 */
body.is-act-confirmpage .checkout .checkout-aside-summary-header, body.is-act-checkoutregisterpage .checkout .checkout-aside-summary-header, body.is-act-finishpage .checkout .checkout-aside-summary-header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*
 * ════════════════════════════════════════════════════════════════════════
 *  12. DIE BESTELLABSCHLUSSSEITE                          Stand 29.08.2026
 * ════════════════════════════════════════════════════════════════════════
 *
 * Meldung des Betreibers: „die bestellabschlussseite ist noch sehr billig".
 *
 * Das Raster, die Kartenauflösung, die Sandfläche rechts und das
 * ausgeblendete Merkzettel-Herz kommen aus Abschnitt 10 und 11 – dort steht
 * ab heute `body.is-act-finishpage` neben den beiden anderen is-act-Klassen.
 * Hier steht nur, was es auf den anderen beiden Seiten nicht gibt.
 *
 * Aufbau der Vorlage: page/checkout/finish/index.html.twig.
 *
 *   12a  Bestätigung: ruhige Überschrift, große Bestellnummer
 *   12b  Abschnittsüberschriften und Abstände
 *   12c  „So geht es jetzt weiter" – die Zeitleiste
 *   12d  Kontodaten bei Vorkasse
 *   12e  Hilfezeile und Weg zurück
 *   12f  Minimalkopf: Logo und „Zurück zum Shop" überlappten
 */
/*
 * ── 12a. Die Bestätigung ─────────────────────────────────────────────────
 *
 * Gemessen im Ist-Zustand (audit/abschluss/vorher-vorkasse-1440.png) war die
 * Überschrift „Vielen Dank für Ihre Bestellung bei rehaonline.de!" bei
 * 1440x900 843 x 106 px – der größte Gegenstand der Seite, mittig gesetzt,
 * in --rc-fs-3xl (46 px). Die Bestellnummer stand darunter in 22 px hinter
 * einem Doppelpunkt im Fließtext („Ihre Bestellnummer:10006", gemessen ohne
 * Leerzeichen dahinter).
 *
 * Das ist die falsche Reihenfolge: Der Dank ist eine Höflichkeit, die
 * Bestellnummer ist die einzige Angabe dieser Seite, die der Kunde
 * abschreibt und bei jeder Rückfrage braucht. Die Überschrift geht auf
 * --rc-fs-xl (27 px am Rechner, 23 px am Telefon), die Nummer bekommt eine
 * eigene Fläche.
 *
 * Linksbündig statt mittig: In der 470 px schmalen Formularspalte beginnt
 * jede andere Zeile links. Ein mittig gesetzter Block wäre der einzige und
 * damit ein Sonderfall ohne Anlass.
 */
.rc-abschluss-kopf {
  margin-bottom: var(--rc-space-6);
}
.rc-abschluss-dank {
  margin: 0 0 var(--rc-space-4);
  font-size: var(--rc-fs-xl);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
  text-align: left;
}
/*
 * Die Bestellnummer als eigener Gegenstand.
 *
 * Weiß mit Rahmen auf Off-White – dieselbe Machart wie `.rc-bestelldaten`
 * (Abschnitt 11b), damit die Formularspalte nicht drei Kastenarten kennt.
 *
 * `tabular-nums`: Ziffern in gleicher Breite. Wer eine fünfstellige Nummer
 * am Telefon vorliest oder mit dem Finger auf dem Bildschirm mitgeht,
 * verliert sich bei proportionalen Ziffern zwischen der 1 und der 0.
 */
.rc-abschluss-nummer {
  display: grid;
  gap: var(--rc-space-1);
  margin: 0;
  padding: var(--rc-space-4);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface);
}
.rc-abschluss-nummer__marke {
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1.45;
}
.rc-abschluss-nummer__wert {
  color: var(--rc-text);
  font-size: var(--rc-fs-2xl);
  font-weight: var(--rc-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
/*
 * Der Satz zur Bestätigungsmail steht jetzt MIT der Adresse da.
 *
 * `overflow-wrap: break-word` und `hyphens: manual`: Eine Mailadresse kann
 * länger sein als die Spalte (gemessen an den Testbestellungen:
 * „test-1787958505124@rehacomfort.invalid"). Sie darf umbrechen, aber
 * niemals mit Bindestrich – ein Bindestrich in einer Mailadresse ist nicht
 * als Trennzeichen zu erkennen. Dieselbe Begründung wie bei
 * `.rc-bestellzeile__wert` in Abschnitt 11b.
 */
.rc-abschluss-mail {
  margin: var(--rc-space-3) 0 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  line-height: 1.45;
  hyphens: manual;
  overflow-wrap: break-word;
}
/*
 * ── 12b. Abschnittsüberschriften und Abstände ────────────────────────────
 *
 * Dieselbe Stufe wie die Abschnittsüberschriften auf /checkout/confirm
 * (Abschnitt 10, `.checkout-main .card-title`: --rc-fs-lg, halbfett). Die
 * Abschlussseite bekommt keine eigene Überschriftengröße.
 */
.rc-abschluss-titel {
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  line-height: var(--rc-lh-heading);
}
.rc-abschluss-ablauf, .rc-abschluss-konto, .rc-abschluss-angaben {
  margin-bottom: var(--rc-space-6);
}
.rc-abschluss-angaben .rc-bestelldaten {
  margin-bottom: 0;
}
/*
 * ── 12c. Die Zeitleiste ──────────────────────────────────────────────────
 *
 * Sie benutzt die Bausteine der Lieferleiste von der Produktseite
 * (`.rc-delivery__steps` … in layout/_pdp.scss). Was hier steht, ist
 * ausschließlich der Unterschied, den der Ort erzwingt.
 *
 * ── Warum sie senkrecht bleibt ───────────────────────────────────────────
 *
 * Auf der Produktseite legt sich die Leiste ab 768 px Fensterbreite
 * waagerecht. Die Umschaltung hängt an der FENSTERbreite; hier hängt der
 * Platz aber an der Spaltenbreite. Gerechnet mit --rc-checkout-spalte:
 *
 *   Fenster 1440 px  ->  Formularspalte 470 px Inhalt
 *   vier Schritte waagerecht  ->  (470 - 3 x 24 Lücke) / 4 = 99 px je Schritt
 *
 * In 99 px steht eine 52-px-Symbolscheibe und darunter eine Überschrift wie
 * „Bestellung eingegangen". Sie bräuchte dort drei bis vier Zeilen und
 * würde getrennt.
 *
 * Senkrecht ist außerdem die Leserichtung, die zu dieser Aussage passt:
 * Die Schritte liegen zeitlich hintereinander, und die Spalte darunter geht
 * weiter. Die Werte sind wörtlich die aus layout/_pdp.scss unterhalb von
 * 768 px – es ist dieselbe Gestalt, nur ohne die Umschaltung.
 */
@media (min-width: 768px) {
  .rc-abschluss-ablauf .rc-delivery__step {
    flex-direction: row;
  }
  .rc-abschluss-ablauf .rc-delivery__spur {
    top: 60px;
    right: auto;
    bottom: calc(-1 * var(--rc-space-5));
    left: 25px;
    width: 2px;
    height: auto;
  }
  .rc-abschluss-ablauf .rc-delivery__spur::after {
    width: 2px;
    height: 200%;
    background-image: radial-gradient(circle at 1px 3px, var(--rc-border-strong) 0 1.6px, transparent 1.7px);
    background-repeat: repeat-y;
    background-size: 2px 12px;
    animation-name: rc-liefer-punkte-y;
  }
}
/*
 * Der eine Schritt, der schon passiert ist.
 *
 * Auf der Produktseite ist die Leiste eine Ankündigung – dort sind alle
 * Schritte gleich. Hier ist sie ein Stand: „Bestellung eingegangen" ist
 * erledigt, alles andere steht bevor. Ohne diesen Unterschied sähen vier
 * gleiche Scheiben so aus, als läge auch der erste Schritt noch vor dem
 * Kunden – und der ist gerade der Grund, warum er auf dieser Seite steht.
 *
 * Gefüllte Scheibe in --rc-primary (#2f5d50) mit weißem Symbol. Es kommt
 * keine neue Farbe hinzu; es ist dieselbe, in der die Symbole der übrigen
 * Schritte stehen – nur gefüllt statt umrissen.
 */
.rc-abschluss-schritt--erledigt .rc-delivery__marke {
  background-color: var(--rc-primary);
}
.rc-abschluss-schritt--erledigt .rc-delivery__marke .icon {
  color: #ffffff;
}
/*
 * ── 12d. Die Kontodaten bei Vorkasse ─────────────────────────────────────
 *
 * Ohne Kontodaten kann bei Vorkasse niemand zahlen; auf der Abschlussseite
 * standen sie bisher gar nicht. Woher die Werte kommen und warum der Block
 * heute noch nicht erscheint, steht in
 * component/rc/abschluss-konto.html.twig.
 *
 * Weiß mit Rahmen – dieselbe Machart wie `.rc-bestelldaten` und die
 * Bestellnummer. Kein Sand: Sand ist auf dieser Seite die Übersicht rechts,
 * und ein dritter Flächenwert wäre einer zu viel.
 *
 * Der Kasten trägt links eine 4 px starke Kante in --rc-secondary (#b4573a).
 * Sie ist die einzige Auszeichnung, die diesen Block von den beiden anderen
 * weißen Kästen der Spalte unterscheidet – und sie ist begründet: Dies ist
 * der einzige Block der Seite, der eine HANDLUNG verlangt. Die Farbe trägt
 * die Aussage dabei nicht allein; sie steht auch in der Überschrift („So
 * überweisen Sie").
 */
.rc-abschluss-konto__liste {
  margin: 0;
  border: 1px solid var(--rc-border-strong);
  border-left: 4px solid var(--rc-secondary);
  border-radius: var(--rc-radius-card);
  background-color: var(--rc-surface);
  overflow: hidden;
}
.rc-abschluss-konto__zeile {
  display: grid;
  gap: var(--rc-space-1);
  padding: var(--rc-space-3) var(--rc-space-4);
}
.rc-abschluss-konto__zeile + .rc-abschluss-konto__zeile {
  border-top: 1px solid var(--rc-border);
}
.rc-abschluss-konto__marke {
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-regular);
  line-height: 1.45;
}
.rc-abschluss-konto__wert {
  margin: 0;
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  line-height: 1.45;
  hyphens: manual;
  overflow-wrap: break-word;
}
/*
 * IBAN, Verwendungszweck und Betrag sind die drei Werte, die abgetippt oder
 * in die Bankmaske übertragen werden. Sie stehen groß und in Ziffern
 * gleicher Breite; Kontoinhaber und BIC sind Kontrollangaben und bleiben
 * auf Fließtextgröße.
 */
.rc-abschluss-konto__wert--gross {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/*
 * ── 12e. Hilfezeile und Weg zurück ───────────────────────────────────────
 *
 * Die Rufnummer benutzt `.rc-kassenhilfe` aus Abschnitt 11c unverändert –
 * derselbe Textbaustein, dieselbe Gestalt, dasselbe 44-px-Klickziel auf der
 * Nummer. Hier steht nur der Knopf darunter.
 *
 * Er ist ein umrandeter Knopf und kein unterstrichener Link: Nach der
 * Bestellung ist er die einzige Handlung, die die Seite noch anbietet.
 * 48 px Höhe entsprechen den Eingabefeldern des Bestellvorgangs
 * (Abschnitt 3) und liegen über der Vorgabe von 44 px.
 *
 * Er steht nicht über die volle Spaltenbreite: Ein 470 px breiter Knopf
 * hätte das Gewicht des Bestellknopfs vom Schritt davor, und das ist er
 * nicht.
 */
.rc-abschluss-fuss {
  display: grid;
  justify-items: start;
}
.rc-abschluss-zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--rc-space-5);
  border: 1px solid var(--rc-primary);
  border-radius: var(--rc-radius-control);
  color: var(--rc-primary);
  font-size: var(--rc-fs-base);
  text-decoration: none;
}
.rc-abschluss-zurueck:hover, .rc-abschluss-zurueck:focus-visible {
  border-color: var(--rc-primary-dark);
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
  text-decoration: none;
}
/*
 * ── 12f. Minimalkopf: Logo und „Zurück zum Shop" lagen übereinander ──────
 *
 * BEFUND, gemessen am 29.08.2026 auf /checkout/finish. Linke und rechte
 * Kante der beiden Kästen im Kopf, dazwischen die Überdeckung:
 *
 *   Fenster   Logo        „Zurück zum Shop"   Überdeckung
 *     390     131 … 259       200 … 366          59 px
 *     576     224 … 352       357 … 523          keine (5 px Luft)
 *     768     309 … 459       453 … 619           6 px
 *     992     173 … 323       306 … 472          17 px
 *    1200     242 … 392       386 … 552           6 px
 *    1440     362 … 512       506 … 672           6 px
 *
 * Bei 390 px steht der Link über der Wortmarke – im Bildschirmfoto des
 * Ist-Zustands (audit/abschluss/vorher-nachnahme-390.png) liest man
 * „rehaonlineürück zum Shop". Das ist ein Befund, den es schon vor dem
 * heutigen Umbau gab; mit dem übernommenen Spaltenrahmen (Abschnitt 10)
 * betrifft er zusätzlich alle Breiten ab 768 px.
 *
 * URSACHE: Der Kopf ist ein Dreispalter `44px | 1fr | 44px` (Abschnitt 11a).
 * Die 44 px rechts sind für das Taschensymbol gerechnet. Auf dieser Seite
 * steht dort kein Symbol, sondern der Textlink – gemessen 166 px breit. Mit
 * `justify-self: end` hängt seine rechte Kante an der Zelle, und die
 * restlichen 122 px ragen nach links in die Logospalte.
 *
 * ── Warum das Logo hier links steht und nicht mittig ─────────────────────
 *
 * Nachgerechnet für die schmalste Stelle: Bei 390 px hat die Spalte 342 px
 * Inhalt. Ein mittig gesetztes Logo braucht links und rechts gleich breite
 * Wangen, also (342 − 150) / 2 = 96 px je Seite – der Link braucht 166.
 * Mittig UND daneben geht bei dieser Breite nicht; eine der beiden Vorgaben
 * muss weichen.
 *
 * Es weicht die Mitte, nicht der Link. Der Link ist nach abgeschlossener
 * Bestellung der einzige Weg zurück in den Shop, den der Kopf anbietet
 * (Vorgabe zur Abschlussseite: „ein klarer Weg in den Shop"). Ein Logo
 * links und ein Link rechts ist außerdem die Anordnung, die jede andere
 * Seite dieses Shops im Kopf führt.
 *
 * Der Bestellvorgang selbst bleibt unberührt: Auf /checkout/confirm und
 * /checkout/register steht rechts das 44 px breite Taschensymbol, dort passt
 * der Dreispalter und das Logo bleibt mittig.
 */
body.is-act-finishpage .rc-kassenkopf__spalte {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
body.is-act-finishpage .rc-kassenkopf__logo {
  grid-column: 1;
  justify-self: start;
}
/*
 * ── 12g. Die Beschriftungsspalte in „Ihre Angaben" ───────────────────────
 *
 * `.rc-bestellzeile` gibt der Beschriftung ab 576 px eine feste Spalte von
 * 104 px. Dieser Wert ist in Abschnitt 11b für die vier Beschriftungen von
 * /checkout/confirm gerechnet – die längste ist „Liefern an", gemessen
 * 90 px.
 *
 * Auf der Abschlussseite kommt „Rechnung an" dazu, gemessen 118 px. In
 * 104 px trennte der Browser sie: Im Bildschirmfoto
 * (audit/abschluss/nachher1-vorkasse-1440.png, erste Fassung) stand dort
 * „Rechnungs-adresse" über zwei Zeilen, während die drei anderen
 * Beschriftungen einzeilig blieben.
 *
 * 120 px statt 104: Die längste Beschriftung dieser Seite passt mit 2 px
 * Luft. Dem Wert fehlen die 16 px – gemessen bei 992 px Fenster bleiben ihm
 * damit 198 statt 214 px, und die längste Wertzeile („Wasserturmstraße 3",
 * gemessen 150 px) passt weiterhin einzeilig.
 *
 * `hyphens: manual` an der Beschriftung: Eine getrennte Beschriftung sieht
 * aus wie ein Fehler. Passt eine Übersetzung einmal nicht, soll sie
 * umbrechen statt sich zerteilen zu lassen – dieselbe Begründung wie beim
 * Wert in Abschnitt 11b.
 */
@media (min-width: 576px) {
  body.is-act-finishpage .rc-bestellzeile {
    grid-template-columns: 120px minmax(0, 1fr) auto;
  }
}
body.is-act-finishpage .rc-bestellzeile__marke {
  hyphens: manual;
}
/*
 * ── Die Zeitleiste auf der Abschlussseite läuft nicht ────────────────────
 *
 * Auf der Produktseite sind die wandernden Punkte ein Hinweis: „so kommt die
 * Ware zu Ihnen", ein Vorgang in der Zukunft. Auf der Abschlussseite zeigt
 * dieselbe Leiste einen ZUSTAND – die Bestellung ist eingegangen, der Rest
 * steht bevor. Eine Bewegung, die dort dauerhaft läuft, liest sich als
 * „es passiert gerade etwas", und das stimmt nicht: Es passiert erst, wenn
 * der Kunde überwiesen hat oder die Spedition anruft.
 *
 * Der Prüfer hat es am 29.08.2026 so gemeldet: „auf dieser Seite störend".
 * Die gepunktete Linie bleibt – sie trägt die Aussage –, nur die Bewegung
 * entfällt. Dieselbe Regel wie bei prefers-reduced-motion, nur ortsgebunden.
 */
body.is-act-finishpage .rc-delivery__spur::after {
  animation: none;
}
/*
 * Feinschliff Kaufbereich und mitlaufende Elemente.
 *
 * Eigene Datei, weil sie nach layout/pdp eingebunden wird: Alles hier gewinnt
 * bei gleicher Spezifität und muss deshalb nicht mit !important arbeiten.
 *
 * Grundlage sind gemessene Werte, nicht Eindrücke. Sie stehen bei jedem
 * Abschnitt dabei.
 */
/*
 * ── 1 Ein gemessener Bezugspunkt für alles, was oben klebt ───────────────
 *
 * Vorher stand in drei Dateien eine geschätzte Kopfhöhe: 92px in der
 * Filterleiste, 96px im Angabenbereich, 120px als Sprungabstand. Gemessen ist
 * der zusammengeschobene Kopf 146 Pixel hoch – das Inhaltsverzeichnis der
 * Produktseite lag damit 26 Pixel dahinter und war oben abgeschnitten.
 *
 * `rcInitStickyHeader()` misst die kompakte Höhe ohnehin für den Platzhalter
 * und schreibt sie jetzt nach `--rc-kopf-kompakt`. Der Rückfallwert gilt nur,
 * solange das Skript nicht gelaufen ist.
 */
:root {
  --rc-kopf-abstand: calc(var(--rc-kopf-kompakt, 150px) + var(--rc-space-5));
}
.rc-pdp-details__aside {
  top: var(--rc-kopf-abstand);
}
.rc-filter-bar {
  top: var(--rc-kopf-kompakt, 150px);
}
.rc-pdp-details__main > *[id], .rc-product-faq[id], .rc-need-selector[id] {
  scroll-margin-top: var(--rc-kopf-abstand);
}
/*
 * ── 2 Mitlaufende Kaufleiste ─────────────────────────────────────────────
 *
 * Sie liegt jetzt als Geschwister des Seiteninhalts im Markup (siehe
 * page/content/product-detail.html.twig) und damit außerhalb des
 * Stapelkontexts, den der klebende Kaufbereich aufspannt.
 *
 * Die Fläche ist ausdrücklich deckend gesetzt: Vorher lag der Fließtext der
 * Beschreibung darüber, und die Leiste wirkte durchsichtig.
 */
.rc-sticky-buy {
  background-color: var(--rc-surface);
  border-top: 1px solid var(--rc-border-strong);
  box-shadow: 0 -6px 24px rgba(var(--rc-scrim-rgb), 0.12);
  z-index: 1040;
}
.rc-sticky-buy__inner {
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
  max-width: var(--rc-container);
  margin-inline: auto;
  padding-inline: var(--rc-space-5);
}
.rc-sticky-buy__image {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-control);
  padding: 2px;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .rc-sticky-buy__image {
    display: none;
  }
}
.rc-sticky-buy__info {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.rc-sticky-buy__name {
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-sticky-buy__price {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
}
.rc-sticky-buy__action {
  flex-shrink: 0;
}
@media (min-width: 576px) {
  .rc-sticky-buy__action {
    min-width: 240px;
  }
}
/*
 * ── 3 Key Facts im Kaufbereich ───────────────────────────────────────────
 *
 * Steht bewusst NICHT hier, sondern in layout/_pdp.scss beim übrigen
 * Kaufbereich. Die dortige Regel ist dreifach verschachtelt und wiegt damit
 * drei Klassen – eine Kopie an dieser Stelle hätte sie nicht überschrieben,
 * sondern nur eine zweite Quelle für dieselbe Sache geschaffen.
 */
/*
 * ── 4 Mengenauswahl ──────────────────────────────────────────────────────
 *
 * Vorher 167 × 56 Pixel mit Plus und Minus in Sandfarbe und einem Zahlenfeld
 * dazwischen, dessen Rahmen an den Knöpfen klebte. Für eine Zielgruppe, die
 * ungenau trifft, waren die Knöpfe zu klein und zu wenig als Knöpfe erkennbar.
 *
 * Zweiter Durchgang nach einer Messreihe über 14 Fensterbreiten: Das
 * Zahlenfeld fiel auf 4,3 px (375 px), 9,3 px (390 px), 6,4 px (992 px) und
 * 7,5 px (1000 px) zusammen; bei 375 px meldete das Feld clientWidth 2 gegen
 * scrollWidth 8, die Ziffer war also abgeschnitten. Ursache ist die Kette
 * `fieldset.col-4 > .input-group > .form-control`: col-4 gibt der Gruppe rund
 * 29 % der Zeilenbreite (bei 390 px sind das 113 px), die beiden Knöpfe
 * belegen davon 104 px fest, und Bootstrap gibt dem Feld `width: 1 %` mit
 * `min-width: 0`. Von 320 bis 365 px brach die Gruppe zusätzlich um und war
 * 114 px hoch gegen 56 px beim Kaufknopf daneben.
 *
 * Die Zeile teilt sich deshalb nicht mehr nach Rasterspalten auf, sondern
 * nach Bedarf: die Mengengruppe bekommt genau ihre 160 px, der Kaufknopf den
 * Rest. Über dieselben 14 Breiten nachgemessen: Feld konstant 56 px, Gruppe
 * konstant 160 × 56 px, Kaufknopf 56 px hoch, kein Überlauf der Zeile.
 */
.buy-widget-container {
  flex-wrap: nowrap;
  align-items: stretch;
}
.buy-widget-container > fieldset {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.buy-widget-container > .col-8, .buy-widget-container > .col-12 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}
.buy-widget-container .btn-buy {
  white-space: normal;
  height: auto;
  min-height: var(--rc-control-lg);
  padding-inline: var(--rc-space-3);
}
@media (max-width: 575.98px) {
  .buy-widget-container {
    flex-wrap: wrap;
  }
  .buy-widget-container > fieldset {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .buy-widget-container > .col-8 {
    flex: 1 1 100%;
  }
}
.product-detail-quantity-group {
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  overflow: hidden;
  background-color: var(--rc-surface);
  flex-wrap: nowrap;
  width: auto;
  height: var(--rc-control-lg);
}
.product-detail-quantity-group .btn {
  width: 52px;
  min-width: 52px;
  flex: 0 0 auto;
  height: 100%;
  border: 0;
  border-radius: 0;
  background-color: var(--rc-surface-warm);
  color: var(--rc-primary);
}
.product-detail-quantity-group .btn:hover, .product-detail-quantity-group .btn:focus-visible {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
}
.product-detail-quantity-group .btn .icon {
  width: 18px;
  height: 18px;
}
.product-detail-quantity-group .btn .icon > svg {
  width: 18px;
  height: 18px;
}
.product-detail-quantity-group .form-control {
  border: 0;
  border-inline: 1px solid var(--rc-border);
  border-radius: 0;
  flex: 0 0 3.5rem;
  width: 3.5rem;
  min-width: 3.5rem;
  height: 100%;
  text-align: center;
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semibold);
  appearance: textfield;
  -moz-appearance: textfield;
}
.product-detail-quantity-group .form-control::-webkit-outer-spin-button, .product-detail-quantity-group .form-control::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
/*
 * ── 5 Zahlungsarten ──────────────────────────────────────────────────────
 *
 * Vorher drei graue Textkästchen in einer 35 Pixel hohen Zeile, die wie
 * deaktivierte Schaltflächen aussahen. Es sind aber keine Bedienelemente,
 * sondern eine Aufzählung – also auch keine Kästchen.
 */
.rc-buybox__payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-2) var(--rc-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-buybox__payment-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
}
.rc-buybox__payment-list li::before {
  content: "";
  width: 8px;
  height: 13px;
  border-right: 2px solid var(--rc-success);
  border-bottom: 2px solid var(--rc-success);
  transform: rotate(45deg);
  flex-shrink: 0;
}
/*
 * ── 6 Variantenauswahl ───────────────────────────────────────────────────
 *
 * Gemessen waren die Optionen 130, 90, 86 und 85 Pixel breit – jede so breit
 * wie ihr Wort. Nebeneinander ergab das eine unruhige Treppe, und die Füllung
 * der gewählten Option wirkte wie ein zufällig gesetzter Farbfleck.
 *
 * Jetzt füllen alle Optionen einer Gruppe dieselbe Fläche und die Auswahl ist
 * an Rahmen UND Fläche erkennbar – nicht an der Farbe allein, denn
 * Farbfehlsichtigkeit ist ab 65 deutlich häufiger.
 */
.product-detail-configurator-group {
  margin-bottom: var(--rc-space-5);
}
.product-detail-configurator-group-title {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-text);
  margin-bottom: var(--rc-space-3);
}
.product-detail-configurator-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
}
.product-detail-configurator-option-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rc-control-lg);
  min-width: 96px;
  padding: var(--rc-space-2) var(--rc-space-5);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  background-color: var(--rc-surface);
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-heading);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--rc-dur-btn) var(--rc-ease), background-color var(--rc-dur-btn) var(--rc-ease);
}
.product-detail-configurator-option-label:hover {
  border-color: var(--rc-primary);
}
.product-detail-configurator-option-input:checked + .product-detail-configurator-option-label, .product-detail-configurator-option-label.is-combinable-selected, .product-detail-configurator-option-label.is-selected {
  border-color: var(--rc-primary);
  border-width: 2px;
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-dark);
  font-weight: var(--rc-fw-semibold);
  padding-block: calc(var(--rc-space-2) - 1px);
  padding-inline: calc(var(--rc-space-5) - 1px);
}
/*
 * Farboptionen ohne hinterlegten Farbwert füllen ihren Knopf wieder ganz.
 *
 * Der Kern gibt jeder Option der Anzeigeart „color" `background-clip:
 * content-box` mit (page/product-detail/_configurator.scss) – richtig für ein
 * echtes Farbfeld, das als eingerückte Kachel im Knopf sitzen soll. Alle 71
 * Optionen der Gruppe „Farbe" haben aber keinen Hexwert hinterlegt, die
 * Vorlage rendert deshalb den Wortlaut, und die Füllung schrumpfte auf den
 * Textbereich. Gemessen am Kymco Tandem Scooter: die gewählte Option „Rot"
 * war 80,4 × 60 px groß, gefüllt waren davon 30,4 × 42 px – 26,5 % der Fläche,
 * also das helle Rechteck hinter dem Wort statt einer gefüllten Auswahl.
 *
 * Dieselbe Kernregel (0,2,0) überschrieb außerdem `min-width` und `height`
 * dieser Datei (0,1,0): Farboptionen waren 60 px hoch und ab 60 px breit,
 * Textoptionen 56 px hoch und ab 96 px breit.
 *
 * Die Ausnahme greift nur ohne Inline-Farbe. Sobald ein Hexwert gepflegt ist,
 * schreibt die Vorlage `style="background-color: …"` – dann bleibt es beim
 * eingerückten Farbfeld des Kerns.
 */
.product-detail-configurator-option-label.is-display-color:not([style*="background-color"]) {
  background-clip: border-box;
  min-width: 96px;
  height: auto;
  min-height: var(--rc-control-lg);
}
/*
 * Nicht kombinierbare Varianten: steht bewusst NICHT mehr hier.
 *
 * An dieser Stelle standen zwei Selektoren, die das Markup nie treffen
 * konnten: `.is-display-none` gibt es nicht, weil die Vorlage immer die
 * Anzeigeart einsetzt (`is-display-text`, `-color`, `-media`), und
 * `:disabled` greift nicht, weil sie an Eingabefeld und Beschriftung nur die
 * KLASSEN `not-combinable disabled` setzt, kein Attribut
 * (buy-widget/configurator.html.twig).
 *
 * Gebraucht werden sie auch nicht: `_buttons.scss` führt bereits
 * `.btn:disabled, .btn.disabled` mit denselben vier Werten, und die
 * Beschriftung trägt `btn`. Nachgemessen mit gesetzten Klassen: Fläche
 * rgb(251,249,246) = --rc-bg, Rahmen rgb(227,221,211) = --rc-border, Schrift
 * rgb(156,148,138) = --rc-disabled, dazu die Durchstreichung aus dem Kern –
 * mit und ohne diesen Block identisch. Eine zweite Quelle für dieselbe Sache
 * hätte nur eine weitere Stelle geschaffen, die auseinanderlaufen kann.
 */
/*
 * ── 7 Pfeile der Galerie mittig ──────────────────────────────────────────
 *
 * Gemessen: Knopf 44 × 44, Symbol 22 × 22, Versatz 11 waagerecht (mittig) und
 * 19 senkrecht (8 Pixel zu tief).
 *
 * Die Ursache steht nicht am Symbol, sondern am Knopf: Der Kern rendert ihn
 * als `display: block` mit `line-height: 68px`. Das Symbol ist ein
 * Inline-Element und setzt sich auf eine 68 Pixel hohe Zeilenbox in einem
 * 44 Pixel hohen Knopf – dadurch rutscht es nach unten. Am Symbol selbst
 * herumzuschieben hätte den Fehler nur verdeckt.
 */
.cms-element-image-gallery .base-slider-controls-prev, .cms-element-image-gallery .base-slider-controls-next, .cms-element-image-gallery .gallery-slider-thumbnails-controls-prev, .cms-element-image-gallery .gallery-slider-thumbnails-controls-next {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.cms-element-image-gallery .base-slider-controls-prev .icon, .cms-element-image-gallery .base-slider-controls-next .icon, .cms-element-image-gallery .gallery-slider-thumbnails-controls-prev .icon, .cms-element-image-gallery .gallery-slider-thumbnails-controls-next .icon {
  line-height: 1;
  margin: 0;
}
/*
 * ── Zahlungsplaketten ────────────────────────────────────────────────────
 *
 * Der Betreiber: „ich will für die zahlungsicons im footer und auf den
 * produktseiten icons ähnlich wie bei shopify haben für die einzelnen
 * zahlungsmethoden … schaue das sie einheitlich aussehen."
 *
 * Shopifys Leiste wirkt einheitlich, weil nicht die Logos gleich sind, sondern
 * ihre Träger: gleiches Seitenverhältnis, gleiche Rundung, gleicher Rahmen,
 * gleicher Innenabstand. Genau das steht hier – 40 × 26 px im Verhältnis
 * 20 : 13, wie eine Zahlkarte.
 *
 * Gezeichnet wird selbst, nicht mit fremden Markenlogos: Der Shop bietet
 * Rechnung, Nachnahme und Vorkasse an. Für diese drei gibt es keine
 * Herstellerzeichen, und Visa oder PayPal wären hier eine Zusage, die der
 * Bestellvorgang nicht einlöst.
 */
.rc-zahlarten {
  margin-top: var(--rc-space-5);
}
.rc-zahlarten__titel {
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  color: var(--rc-muted);
}
/*
 * Der Abstand ZWISCHEN den Einträgen muss größer sein als der INNERHALB eines
 * Eintrags.
 *
 * Beides auf 12 px ergab im Screenshot eine durchlaufende Reihe „Plakette
 * Nachnahme Plakette Vorkasse per Überweisung Plakette Kauf auf Rechnung" –
 * man sah nicht, welcher Name zu welchem Zeichen gehört. Mit 32 zu 12 ist die
 * Zuordnung ohne Nachdenken lesbar (Gestaltgesetz der Nähe).
 */
.rc-zahlarten__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-3) var(--rc-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-zahlarten__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
}
.rc-zahlarten__plakette {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 36px;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border-strong);
  border-radius: var(--rc-radius-control);
  color: var(--rc-primary);
}
.rc-zahlarten__plakette svg {
  width: 40px;
  height: 26px;
}
.rc-zahlarten__name {
  font-size: var(--rc-fs-sm);
  color: var(--rc-text);
}
/*
 * Kompakte Fassung für die Kaufbox.
 *
 * Dort ist die Spalte rund 420 px breit; mit Namen neben jeder Plakette
 * bräuchten drei Zahlungswege drei Zeilen. Der Name steht weiterhin im
 * `title` und als Vorlesetext, sichtbar bleibt die Plakette – wie bei
 * Shopify, wo unter den Kartenzeichen auch keine Namen stehen.
 */
.rc-zahlarten--klein {
  margin-top: var(--rc-space-4);
}
.rc-zahlarten--klein .rc-zahlarten__liste {
  gap: var(--rc-space-2);
}
.rc-zahlarten--klein .rc-zahlarten__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rc-zahlarten--klein .rc-zahlarten__plakette {
  width: 48px;
  height: 32px;
}
.rc-zahlarten--klein .rc-zahlarten__plakette svg {
  width: 34px;
  height: 22px;
}
/*
 * In der Fußzeile ein eigenes Band, kein Anhängsel der Kontaktspalte.
 *
 * Die Leiste läuft über die volle Breite (gemessen 1360 px), begann aber
 * direkt unter der Anschrift – und wurde dadurch als Teil der linken Spalte
 * gelesen. 48 px Abstand lösen sie davon ab, ohne eine Trennlinie zu brauchen.
 */
.footer-main .rc-zahlarten, .rc-footer .rc-zahlarten {
  margin-top: var(--rc-space-7);
}
.footer-main .rc-zahlarten__plakette, .rc-footer .rc-zahlarten__plakette {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.footer-main .rc-zahlarten__name, .rc-footer .rc-zahlarten__name {
  color: var(--rc-on-dark);
}
.footer-main .rc-zahlarten__titel, .rc-footer .rc-zahlarten__titel {
  color: var(--rc-on-dark-muted, rgba(255, 255, 255, 0.7));
}
/*
 * ── § 11 PAngV in der Kaufbox ────────────────────────────────────────────
 *
 * Der Streichpreis hängt am Schalter `rc-streichpreis-anzeigen`
 * (buy-widget.html.twig). Steht er auf AUS – die Vorgabe –, wird der
 * Preisblock ohne Streichpreis und ohne Prozent-Pille gerendert; das Markup
 * entsteht gar nicht erst. Gemessen auf der Produktseite: 1 Streichpreis und
 * 1 Prozent-Pille vorher, 0 und 0 nachher.
 *
 * Diese Datei wird nach layout/_pdp.scss eingebunden. Die Regeln dort
 * (.product-detail-list-price-wrapper, .list-price-badge) bleiben absichtlich
 * stehen: Sie werden gebraucht, sobald der Betreiber den Schalter umlegt.
 */
/*
 * Sicherung für den einen Fall, den der Kern selbst rendert.
 *
 * Bei Staffelpreisen (product.calculatedPrices > 1) gibt die Kaufbox die
 * Kerntabelle aus; deren Zeilen kommen aus block-price.html.twig und würden
 * einen hinterlegten Streichpreis mitnehmen. Im Datenbestand gibt es dafür
 * genau 2 Zeilen (Shopware-Demoprodukt SWDEMO10002), beide ohne Streichpreis –
 * es ist also heute kein sichtbarer Fall, sondern eine Klappe für morgen.
 *
 * Die Regel hängt an der Klasse, die das Twig aus dem Schalter setzt, und
 * schaltet sich mit ihm ab.
 */
.rc-buybox__price.rc-preis--ohne-streich .product-detail-advanced-list-price-wrapper, .rc-buybox__price.rc-preis--ohne-streich .product-detail-list-price-wrapper, .rc-buybox__price.rc-preis--ohne-streich .list-price-badge, .rc-buybox__price.rc-preis--ohne-streich .list-price-percentage {
  display: none;
}
/*
 * Der früher verlangte Preis nach Shopwares eigenem Feld `regulationPrice`
 * ist die PAngV-konforme Angabe und bleibt sichtbar. Er bekommt in der
 * ermäßigungsfreien Ausgabe deshalb eine eigene Hülle (.rc-vorpreis) und
 * nicht die des Streichpreises – sonst hätte ihn die Regel darüber
 * miterwischt. Gesetzt ist er derzeit an 0 von 1253 Datensätzen.
 */
.rc-buybox__price .rc-vorpreis {
  display: block;
  margin: 0;
  font-size: var(--rc-fs-sm);
  line-height: 1.45;
  color: var(--rc-muted);
}
/*
 * Pflichtsatz nach § 11 PAngV unter dem Preis.
 *
 * 17 px (--rc-fs-xs) ist die Untergrenze des Themes für rechtliche Angaben;
 * bei 65- bis 80-jährigen Lesern wird eine Pflichtangabe nicht kleingesetzt.
 *
 * Eigene Zeile statt eines Anhängsels neben dem Streichpreis: .rc-buybox__price
 * ist ein Raster (layout/_pdp.scss), der Absatz bekommt darin ohnehin eine
 * eigene Reihe. Nachgesehen am Schalter-AN-Bild: bei 1440 px eine Zeile, bei
 * 390 px zwei Zeilen, jeweils vollständig lesbar
 * (audit/abnahme/preise-schalter-an-pdp-nah-390.png).
 */
.rc-buybox__price .rc-preishinweis {
  margin: 0;
  font-size: var(--rc-fs-xs);
  font-weight: var(--rc-fw-regular);
  line-height: 1.45;
  color: var(--rc-muted);
}
/*
 * ── Sterne neben dem Hersteller, Verfügbarkeit größer ────────────────────
 *
 * Der Betreiber: „mache die sterne neben den hersteller und das sofort
 * verfuegbar etwas groesser."
 *
 * GEMESSENER AUSGANGSZUSTAND auf /Scooter-Vermeiren-Carpo-2-SE/ bei 1440 px:
 *
 *   .rc-buybox__manufacturer  y = 362   „VERMEIREN", 17 px
 *   .rc-buybox__title         y = 399   H1, 34 px
 *   .rc-buybox__meta          y = 448   Sterne, Symbolkante 17 x 17 px
 *   .delivery-information     y = 982   17 px, 47,125,91
 *
 * Die Sternereihe stand also NICHT neben dem Hersteller, sondern zwei Zeilen
 * darunter – 86 px tiefer, mit der Überschrift dazwischen.
 */
/*
 * Kopf des Kaufbereichs: Hersteller und Bewertung in eine Zeile.
 *
 * Flexbox mit `order` statt Rasterplätzen: Der Hersteller wird nur ausgegeben,
 * wenn das Produkt einen hat (buy-widget.html.twig). Feste Rasterplätze
 * ließen bei Produkten ohne Hersteller eine leere erste Spalte stehen und die
 * Sterne eingerückt beginnen. Mit `order` und einer Überschrift auf voller
 * Breite bleibt beides richtig: Hersteller und Bewertung teilen sich die
 * erste Zeile, fehlt der Hersteller, steht die Bewertung allein am Anfang.
 *
 * `align-items: baseline` und nicht `center`: Die Versalien des Herstellers
 * und die Sterne stehen damit auf einer Linie, unabhängig davon, ob rechts
 * daneben noch die HMV-Nummer als Chip mitläuft.
 */
.rc-buybox__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--rc-space-3);
  row-gap: var(--rc-space-2);
}
.rc-buybox__head .rc-buybox__manufacturer {
  order: 1;
}
.rc-buybox__head .rc-buybox__meta {
  order: 2;
}
.rc-buybox__head .rc-buybox__title {
  order: 3;
  width: 100%;
}
/*
 * Sterngröße im Kaufbereich: 17 -> 22 px.
 *
 * 17 px ist die Größe der Kachelliste (components/_reviews.scss). Dort steht
 * die Sternereihe unter einem Produktnamen und ist eine von vielen; hier ist
 * sie die einzige Bewertungsangabe über dem Preis, und ein Stern ist keine
 * Schrift, sondern eine Form mit fünf Zacken – ob sie halb oder voll gefüllt
 * ist, entscheidet sich an wenigen Pixeln.
 *
 * 22 px und nicht 24 px wie im Bewertungskopf: Die Zeile des Herstellers ist
 * 29 px hoch (17 px Schrift, Zeilenhöhe 1,7). Ein 24-px-Stern hätte die Zeile
 * auf 33 px gedehnt und den Abstand zur Überschrift verschoben; 22 px bleiben
 * darunter. Nachgemessen nach der Änderung.
 *
 * Farbe bleibt --rc-star (C8871F): 3,03:1 gegen die weiße Fläche des
 * Kaufbereichs und damit über den 3:1 für grafische Bedeutungsträger.
 */
.rc-buybox__meta .rc-sterne .icon {
  width: 22px;
  height: 22px;
}
/*
 * Verfügbarkeit: 17 -> 19 px.
 *
 * „Sofort verfügbar, Lieferzeit: 3–5 Werktage per Spedition" ist neben dem
 * Preis die Angabe, die über den Kauf entscheidet – bei Hilfsmitteln oft mehr
 * als der Preis selbst. Sie stand auf --rc-fs-sm (17 px), der Untergrenze des
 * Themes für Beiwerk, während der Fließtext daneben auf 19 px steht.
 *
 * 19 px ist --rc-fs-base, die Fließtextgröße. Kein eigener Sonderwert: Die
 * Zeile ist eine Aussage und kein Etikett. Die Farbe bleibt --rc-success
 * (47,125,91), gemessen 4,99:1 auf Weiß.
 *
 * Der Punkt davor wächst mit: 9 px zu 17 px Schrift entspricht 10 px zu 19 px.
 * Bliebe er bei 9 px, säße er sichtbar zu tief in der größeren Zeile.
 */
.rc-buybox__availability .delivery-information, .product-detail-delivery-information .delivery-information {
  font-size: var(--rc-fs-base);
  line-height: 1.45;
}
.rc-buybox__availability .delivery-status-indicator, .product-detail-delivery-information .delivery-status-indicator {
  width: 10px;
  height: 10px;
}
/*
 * Preisdarstellung: Preis, Streichpreis, Rabattabzeichen, Grundpreis.
 *
 * Eigene Datei, weil dieselbe Darstellung an drei Stellen steht – in der
 * Produktkachel, im Kaufbereich der Produktseite und im Warenkorb. Vorher
 * lagen die Regeln verstreut in components/product-card, layout/pdp und
 * layout/cart; eine Änderung am Streichpreis musste an drei Stellen gepflegt
 * werden und lief dreimal auseinander.
 *
 * Nach layout/pdp und components/buybox, damit die gemeinsamen Regeln bei
 * gleicher Spezifität gewinnen.
 */
/*
 * Preisdarstellung – Preis, Streichpreis, Rabattabzeichen.
 *
 * Wird von components/product-card, layout/pdp und layout/cart gemeinsam
 * genutzt. Die Regeln stehen hier und nicht dort, damit der Streichpreis in
 * der Kachel, im Kaufbereich und im Warenkorb dieselbe Form hat.
 *
 * ── Was der Betreiber verlangt hat ───────────────────────────────────────
 *
 *   „wenn das produkt im sale ist mach neben den preis in klein rechts
 *    durchgestrichen den alten preis und in rot hinterlegt und weisser text
 *    -X% und die rabat badges fehlen ueberall auch in den product cards?"
 *
 * Umgesetzt als EINE Zeile aus drei Teilen, überall gleich:
 *
 *   [ 3.199,20 € ]   [ 3.999,00 € ]   [ −20 % ]
 *     .rc-preis__jetzt  .rc-preis__alt   .rc-preis__rabatt
 *
 * ── Der Schalter ist inzwischen AN, und das zu Recht ─────────────────────
 *
 * Diese Datei entstand, während der Schalter `rc-streichpreis-anzeigen`
 * (theme.json, Block rehacomfortPreise) noch aus war. Der Grund dafür ist
 * am 27.08.2026 weggefallen, in zwei Schritten:
 *
 *   1. tools/migrate/37-streichpreise-bereinigen.mjs hat die 1238 gerechneten
 *      Vergleichspreise entfernt. Sie entsprachen ausnahmslos
 *      abrunden(Verkaufspreis / 0,8) – nie hat jemand diesen Preis bezahlt.
 *   2. tools/migrate/38-rabatt-aktion.mjs hat danach eine ECHTE Aktion
 *      gesetzt: Die Verkaufspreise sind um 20 Prozent gesunken, und der
 *      durchgestrichene Preis ist der, der vorher tatsächlich galt.
 *
 * Damit ist erfüllt, was § 11 Abs. 1 PAngV verlangt – der niedrigste
 * Gesamtpreis der letzten 30 Tage steht daneben, und Shopware gibt ihn sogar
 * ausgeschrieben aus. Ohne Schritt 1 wäre Schritt 2 nicht möglich gewesen:
 * Eine Aktion auf einen erfundenen Vergleichspreis bleibt erfunden.
 *
 * Diese Datei baut nur die Form. Ob eine Aktion läuft, entscheidet das
 * Rabattskript; ob die Form gezeigt wird, der Schalter im Theme.
 *
 * ── Warum das Rot nicht die Marke ist ────────────────────────────────────
 *
 * Weiß auf --rc-secondary (Terrakotta, B4573A) ergibt nach WCAG-Formel
 * 4,81:1 – bestanden, aber mit 0,31 Reserve über der 4,5:1-Grenze, und das
 * bei 17 px in Halbfett auf einer Fläche von 24 px Höhe. Ein Nachschärfen
 * der Marke um wenige Prozent würde die Angabe kippen.
 *
 * Weiß auf --rc-red-deep (9E3527) ergibt 7,02:1. Die Fläche selbst steht mit
 * 7,02:1 gegen Weiß und 6,02:1 gegen die warme Seitenfläche F2EDE5, also weit
 * über den 3:1 für Bedienelemente und Grafik. --rc-red-deep trägt im Theme
 * ohnehin schon das Verkaufs-Abzeichen (components/_cards.scss,
 * .rc-badge--sale); zwei verschiedene Rottöne für dieselbe Aussage wären der
 * schlechtere Weg. Nachgemessen im Browser, Werte in der Übergabe.
 *
 * Diese Datei wird nach layout/pdp und components/buybox eingebunden
 * (base.scss:49) und gewinnt dort bei gleicher Spezifität.
 */
.rc-preis {
  --rc-preis-klein: var(--rc-fs-sm);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--rc-space-3);
  row-gap: var(--rc-space-1);
  margin: 0;
}
/*
 * Streichpreis und Abzeichen bilden eine Einheit.
 *
 * Sie gehören inhaltlich zusammen – „vorher 699,00 €, das sind 20 % weniger" –
 * und trennen sich deshalb nie. Reicht der Platz nicht, wandert das Paar
 * gemeinsam in die zweite Zeile. Vorher fiel nur das Abzeichen allein nach
 * unten: gemessen 120 + 76 + 80 px plus zwei Lücken à 12 in einer 279 px
 * breiten Textspalte.
 *
 * Die Lücke innerhalb des Paares ist kleiner als die zum Preis (8 statt 12 px).
 * Das macht die Zusammengehörigkeit sichtbar, ohne eine Linie zu brauchen –
 * und spart genau die Pixel, die zum Umbruch führten.
 */
.rc-preis .rc-preis__vergleich {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rc-space-2);
  white-space: nowrap;
}
/*
 * Alle drei Teile stehen bewusst als `.rc-preis .rc-preis__…` und nicht
 * alleinstehend.
 *
 * Gemessen: Das Abzeichen im Kaufbereich trägt die Klasse des Kerns
 * (.list-price-badge) und liegt in einem .product-detail-price-container –
 * layout/_pdp.scss greift es dort mit `.product-detail-price-container
 * .list-price-badge` ab. Eine einklassige Regel verliert dagegen unabhängig
 * von der Reihenfolge; nachgemessen blieb das Abzeichen beim ersten Versuch
 * dunkelrot auf hellrot (158,53,39 auf 251,234,230) statt weiß auf rot.
 * Mit zwei Klassen gewinnt diese Datei, weil sie nach layout/pdp eingebunden
 * wird (base.scss:49 nach :28).
 */
.rc-preis .rc-preis__jetzt {
  margin: 0;
  white-space: nowrap;
}
/*
 * Der Streichpreis: klein, rechts daneben, durchgestrichen.
 *
 * `white-space: nowrap` ist Pflicht, kein Feinschliff: „3.999,00 €" umbrach
 * in der 279 px breiten Kachel zwischen Betrag und Währungszeichen, und ein
 * durchgestrichenes „€" allein in der nächsten Zeile ist unlesbar.
 *
 * Die Linienstärke steht fest auf 1 px statt auf `auto`. Bei 17 px leitet der
 * Browser sonst eine Stärke unter 1 px aus der Schrift ab, die auf Anzeigen
 * ohne doppelte Pixeldichte streckenweise verschwindet – ein Streichpreis,
 * dem die Streichung fehlt, ist die gefährlichste Variante von allen.
 */
.rc-preis .rc-preis__alt {
  font-size: var(--rc-preis-klein);
  font-weight: var(--rc-fw-regular);
  line-height: 1.3;
  color: var(--rc-muted);
  white-space: nowrap;
  letter-spacing: 0;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.rc-preis .rc-preis__alt .list-price-price {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.rc-preis .rc-preis__alt .list-price-percentage {
  display: none;
}
/*
 * Das Rabattabzeichen: roter Grund, weißer Text, Form „−20 %".
 *
 * Die Zahl wird in Twig aus listPrice.percentage gerechnet und nie hart
 * geschrieben – ein fest eingetragener Prozentwert wäre bei jeder
 * Preisänderung eine falsche Werbeaussage.
 *
 * Das Minus ist U+2212 (Minuszeichen), nicht der Bindestrich: Der Bindestrich
 * steht in dieser Schrift auf halber x-Höhe und liest sich neben Ziffern wie
 * ein Trennstrich.
 *
 * `align-self: center` statt der Grundlinie der Zeile: Neben dem 46-px-Preis
 * des Kaufbereichs hing die Pille sonst mit ihrer Unterkante 9 px unter der
 * Grundlinie des Preises und zog die Zeile auseinander.
 */
.rc-preis .rc-preis__rabatt {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 3px var(--rc-space-3);
  border: 0;
  border-radius: var(--rc-radius-pill);
  background-color: var(--rc-red-deep);
  background-image: none;
  color: #ffffff;
  font-size: var(--rc-preis-klein);
  font-weight: var(--rc-fw-semibold);
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
}
/*
 * Der Kaufbereich der Produktseite bekommt die größere der beiden Stufen.
 *
 * Gemessen am Ausgangszustand: Hauptpreis 46 px, Streichpreis 17 px – ein
 * Verhältnis von 1 : 2,7. Der Streichpreis wirkte daneben wie eine Fußnote.
 * Mit 19 px (--rc-fs-base, die Fließtextgröße des Themes) sind es 1 : 2,4,
 * und die Angabe bleibt lesbar, ohne dem Verkaufspreis den Rang abzulaufen.
 * In der Kachel bleibt es bei 17 px: Dort steht der Hauptpreis auf 27 px.
 */
.rc-buybox__price .rc-preis {
  --rc-preis-klein: var(--rc-fs-base);
}
/*
 * Der Kern gibt dem Streichpreis im Kaufbereich eine eigene Hülle
 * (.product-detail-list-price-wrapper) und dem Abzeichen eine eigene Klasse
 * (.list-price-badge). layout/_pdp.scss stellt beide noch als eigene Zeile
 * mit hellrotem Grund und dunkelrotem Text dar – gemessen 158,53,39 auf
 * 251,234,230. Der Betreiber hat ausdrücklich das Gegenteil verlangt:
 * roter Grund, weißer Text. Die Klassen des Kerns werden deshalb hier auf
 * dieselbe Form gezogen wie die eigenen; die Regeln in layout/_pdp.scss
 * bleiben unangetastet, sie gehören einem anderen Bereich.
 */
.rc-preis .product-detail-list-price-wrapper, .rc-preis .list-price {
  display: inline;
  position: static;
  margin: 0;
  padding: 0;
  gap: 0;
}
.rc-preis .list-price-badge {
  position: static;
  width: auto;
  min-width: 0;
  height: auto;
}
/*
 * ── Umbruchverhalten in der Kachel ───────────────────────────────────────
 *
 * Die Textspalte der Kachel ist bei 1440 px 279 px breit. Gemessen auf
 * /Angebote/: „95,20 €" (27 px, fett) 103 px, „119,00 €" (17 px) 76 px,
 * Abzeichen 80 px, dazu zwei Lücken von 12 px – zusammen 283 px. Die Zeile
 * bricht also um, das Abzeichen fällt unter die beiden Preise.
 *
 * Das ist Absicht und kein Rest. Der Versuch, die Lücke auf 8 px zu
 * verkleinern, wurde gemessen und verworfen: Er brachte auf /Angebote/ genau
 * EINE Kachel von 24 in eine Zeile und ließ dafür 32-px- und 64-px-Preiszeilen
 * nebeneinander stehen. Bei den Preisen dieses Sortiments – Elektromobile,
 * Betten, Sessel liegen vierstellig – passt die Zeile ohnehin nie: „2.399,20 €"
 * misst 145 px, der Streichpreis 84 px, das Abzeichen 80 px; auch ganz ohne
 * Lücken wären das 309 px in 279 px Spalte.
 *
 * Nachgemessen mit 12 px Lücke: je Seite genau eine Preiszeilenhöhe
 * (/Angebote/ und /Elektromobile/ 64 px, Startseite 32 px – dort ist die
 * Textspalte breiter und alle 24 Kacheln stehen einzeilig). Eine gleich hohe
 * Zeile in jeder Kachel einer Reihe ist mehr wert als eine einzelne Kachel,
 * die es gerade so in eine Zeile schafft.
 *
 * `align-items: baseline` steht hier noch einmal ausdrücklich: Nach dem
 * Umbruch bildet jede Flex-Zeile ihre eigene Grundlinie, der Streichpreis
 * bleibt also auch in der ersten Zeile auf der Linie des Verkaufspreises.
 */
.product-box .rc-preis {
  align-items: baseline;
}
/*
 * Ohne Schalter gibt es nichts zu verstecken.
 *
 * Die ermäßigungsfreie Ausgabe wird in Twig gar nicht erst erzeugt (siehe
 * price-unit.html.twig und buy-widget.html.twig). Diese Regel ist die
 * Rückfallebene für Stellen, an denen der Kern selbst rendert – etwa die
 * Staffelpreistabelle. Ein per CSS verstecktes Abzeichen steht weiterhin im
 * Markup und ist damit weiterhin bekanntgegeben; deshalb ist das hier
 * ausdrücklich die zweite Reihe und nicht der Hauptweg.
 */
.rc-preis--ohne-streich .rc-preis__alt, .rc-preis--ohne-streich .rc-preis__rabatt, .rc-preis--ohne-streich .list-price, .rc-preis--ohne-streich .list-price-badge, .rc-preis--ohne-streich .list-price-percentage, .rc-preis--ohne-streich .product-detail-list-price-wrapper, .rc-preis--ohne-streich .product-detail-advanced-list-price-wrapper {
  display: none;
}
/*
 * ── Zeilenfassung: Warenkorb, Seitenwarenkorb, Bestellvorgang ────────────
 *
 * Dieselben drei Teile, aber in einer Textzeile statt in einem Preisblock.
 * Der Unterschied: Im Warenkorb steht der Preis in einer Tabellenzelle neben
 * Anzahl und Summe, nicht als Blickfang. Er darf die Zeile deshalb nicht
 * höher machen als die Nachbarzellen – sonst rutschen Menge und Summe
 * auseinander.
 *
 * Deshalb hier: alle drei Teile auf Fließtextgröße, das Abzeichen kleiner
 * und flacher als in der Kachel, und kein Umbruch innerhalb der Zeile.
 * Gemessen ergibt das eine Zeilenhöhe von 24 px – dieselbe wie ohne Rabatt.
 */
.rc-preis--zeile {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--rc-space-2);
  row-gap: 2px;
}
.rc-preis--zeile .rc-preis__jetzt {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-semibold);
}
.rc-preis--zeile .rc-preis__alt {
  font-size: var(--rc-fs-sm);
}
.rc-preis--zeile .rc-preis__rabatt {
  padding: 1px var(--rc-space-2);
  font-size: var(--rc-fs-xs);
}
/*
 * Im Seitenwarenkorb steht die Zeile unter dem Namen, in der Reihe der
 * leisen Angaben (Produktnummer, Lieferzeitraum). Der Preis selbst ist dort
 * schon groß in der Namenszeile zu sehen – hier trägt die Zeile nur noch die
 * Aussage „vorher teurer". Deshalb tritt der aktuelle Preis zurück und der
 * Streichpreis wird zum eigentlichen Inhalt.
 */
.is-offcanvas .rc-preis--zeile .rc-preis__jetzt {
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-regular, 400);
  color: var(--rc-muted);
}
/*
 * Footer: Beratungs-Block + ruhiger dunkelblauer Footer.
 */
.rc-footer-consult {
  background-color: var(--rc-primary-soft);
  border-radius: var(--rc-radius-visual);
  padding: var(--rc-space-5) var(--rc-space-6);
  margin-bottom: var(--rc-space-7);
}
.rc-footer-consult__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-5);
}
.rc-footer-consult__title {
  margin: 0;
  color: var(--rc-primary);
}
.rc-footer-consult__subtitle {
  margin: var(--rc-space-1) 0 0;
  color: var(--rc-muted);
}
.rc-footer-consult__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-3) var(--rc-space-5);
  color: var(--rc-primary);
  box-shadow: var(--rc-shadow);
  transition: background-color var(--rc-dur-card) var(--rc-ease), border-color var(--rc-dur-card) var(--rc-ease), color var(--rc-dur-card) var(--rc-ease);
}
.rc-footer-consult__phone:hover, .rc-footer-consult__phone:focus-visible {
  border-color: var(--rc-secondary);
  background-color: var(--rc-secondary-soft);
  color: var(--rc-primary-dark);
}
.rc-footer-consult__phone strong {
  display: block;
  font-size: var(--rc-fs-lg);
}
.rc-footer-consult__phone small, .rc-footer-consult__phone .small {
  display: block;
  color: var(--rc-muted);
}
.rc-footer-consult__phone .icon {
  color: var(--rc-secondary);
  width: 28px;
  height: 28px;
}
.rc-footer-consult__phone .icon > svg {
  width: 28px;
  height: 28px;
}
/*
 * ── Markenzeile: das Logo im Fußbereich ──────────────────────────────
 *
 * Gemessen am 25.08.2026 enthielt `.footer-main` null Bilder. Der Absender
 * fehlte an der Stelle, an der die Anschrift steht.
 *
 * Die helle Platte ist kein Schmuck, sondern Kontrastrechnung. Die SVG-Datei
 * rc-rehaonline-logo.svg führt genau zwei Füllfarben:
 *   #2F5D50 auf Footer-Grund #2F5D50 → 1,00:1 (identische Farbe, unsichtbar)
 *   #B8402F auf Footer-Grund #2F5D50 → 1,36:1
 * Auf --rc-bg (#FBF9F6) sind es 7,13:1 und 5,24:1. Kein Schatten, kein
 * Rahmen, kein Verlauf – die Platte liest sich als Ausschnitt der Seitenfarbe.
 * Eine helle Zweitfassung des Logos wäre sauberer, ist aber eine neue Datei.
 */
.rc-footer-brand {
  margin-bottom: var(--rc-space-7);
}
@media (max-width: 767px) {
  .rc-footer-brand {
    margin-bottom: var(--rc-space-6);
  }
}
.rc-footer-brand__link {
  display: inline-flex;
  align-items: center;
  background-color: var(--rc-bg);
  border-radius: var(--rc-radius-card);
  padding: var(--rc-space-3) var(--rc-space-5);
}
.rc-footer-brand__link .rc-footer-brand__logo {
  display: block;
  width: auto;
  height: 44px;
  /*
         * Notbremse gegen waagerechten Überlauf.
         *
         * Die SVG ist 2095 × 650 groß. Solange `height` greift, rechnet der
         * Browser daraus 142 px Breite – greift sie einmal nicht (falsch
         * geschachteltes Markup, ein Stylesheet, das noch nicht kompiliert
         * ist), rendert das Bild in voller Eigenbreite. Genau das war am
         * 25.08.2026 messbar: 2095 px breites Logo, document.scrollWidth
         * 2115 px bei 320 px Fenster – die GANZE Seite ließ sich zur Seite
         * schieben, auf jeder Breite und in jeder Vorlage mit voller
         * Fußzeile. Drei unabhängige Messungen fanden dieselbe Ursache.
         *
         * `max-width: 100%` kostet nichts und macht diesen Fehler unmöglich.
         */
  max-width: 100%;
}
@media (max-width: 767px) {
  .rc-footer-brand__link {
    padding: var(--rc-space-2) var(--rc-space-4);
  }
  .rc-footer-brand__link .rc-footer-brand__logo {
    height: 36px;
  }
}
/*
 * Spaltenraster.
 *
 * Vier Spalten erst ab 992 px. Gemessen bei 768 px waren die vier Spalten je
 * 168 px breit; vier Einträge liefen dort über zwei Zeilen („Bestellung &
 * Lieferung", „Versand & Lieferung", „Rückgabe & Retoure",
 * „Widerrufsbelehrung"), und die Anschrift brach hinter „Wasserturmstraße"
 * um. Bei zwei Spalten sind es dort 348 px – kein Umbruch mehr.
 *
 * Welche Spalte wo steht, entscheidet nicht das Raster, sondern die Vorlage:
 * layout/footer/footer.html.twig sortiert die Linkspalten nach Anzahl der
 * Einträge absteigend. Ohne das trafen bei 768 px die längste und die
 * kürzeste Spalte aufeinander – gemessen 142 px Höhenunterschied in einer
 * Reihe, jetzt 41 px.
 *
 * Ab 1200 px bekommt die Kontaktspalte 1,35 Anteile: Sie trägt Telefon,
 * Zeiten, E-Mail und Anschrift, die drei Linkspalten nur je drei bis fünf
 * kurze Einträge. Gleiche Breite bei ungleicher Last ist genau der Grund,
 * warum die Spalten abgerissen wirkten. Die Rinne bleibt überall 32 px.
 *
 * Die Spaltenregel gehört zwingend in die Medienabfrage: Als Grid braucht das
 * Raster keine Bootstrap-Innenabstände mehr, mobil dagegen schon. Ohne diese
 * Trennung fiel `padding: 0` auch auf Handys – zusammen mit den negativen
 * Außenabständen von `.row` standen Überschriften und Aufklapp-Schalter dort
 * bündig am Bildschirmrand, außerhalb des Containers.
 */
@media (min-width: 768px) {
  .footer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rc-space-7) var(--rc-space-6);
    /*
         * Linke Fluchtlinie.
         *
         * `.row` bringt aus Bootstrap `margin: 0 -20px` mit; ausgeglichen wird
         * das normalerweise vom 20-px-Innenabstand der Spalten – den die
         * Grid-Regel eine Zeile tiefer entfernt. Ergebnis, gemessen am
         * 25.08.2026: Bei 768 und 992 px begann die Spaltenüberschrift bei
         * x = 0, also 20 px LINKS des Containerinhalts und bündig am
         * Bildschirmrand; bei 1440 px stand sie auf x = 20 statt auf 40.
         * Der Fußbereich stand damit als einziger Seitenteil außerhalb der
         * Flucht. Ohne negative Ränder trifft er sie exakt: 20 / 20 / 40 px.
         *
         * Der Kern hängt außerdem 20 px padding-bottom an die Reihe – ein Wert
         * außerhalb des 4er-Rasters, der den Abstand zur Fußleiste von 64 auf
         * 84 px verschob.
         */
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
  }
  .footer-columns .footer-column.col-md-4 {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
  }
}
@media (min-width: 992px) {
  .footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .footer-columns {
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
  }
}
.footer-column-headline {
  margin-top: 0;
  font-size: max(var(--rc-fs-sm), 1.0625rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--rc-space-4);
}
@media (min-width: 768px) {
  .footer-main .footer-column-headline {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 768px) {
  .footer-column-toggle {
    display: none;
  }
}
/*
 * ── Die ganze Überschriftenzeile schaltet, nicht nur das Pluszeichen ────────
 *
 * GEMESSEN am 30.08.2026 bei 360 px, Spalte „Rechtliches":
 *   Überschriftenzeile   320 × 64 px bei x = 20
 *   Plus/Minus-Knopf      48 × 48 px bei x = 292 (rechter Rand)
 *   Tipp bei x = 80 (mitten auf das Wort): aria-expanded bleibt "false",
 *                                          sichtbare Links bleiben 0
 *   Tipp auf den Knopf:                    aria-expanded "true", 4 Links
 *
 * Der Umschalter deckte 2304 von 20480 px² der Zeile ab – 11 %. Wer auf das
 * Wort tippt, das die Spalte benennt, bekommt nichts. Für eine Zielgruppe
 * zwischen 65 und 80 ist das der Unterschied zwischen „Impressum gefunden" und
 * „Impressum gibt es nicht": Bei 360 px sind 4 von 17 Fußlinks sichtbar, ab
 * 768 px alle 17.
 *
 * Hier stand deshalb bisher eine Regel, die den Knopf von 24 auf 48 px
 * vergrößert hat – sie hat das Ziel viermal so groß gemacht und trotzdem 89 %
 * der Zeile ungenutzt gelassen.
 *
 * LÖSUNG: Der Knopf deckt die ganze Zeile ab. Er bleibt an derselben Stelle im
 * Dokument und behält alle Attribute des Kerns (data-bs-toggle, data-bs-target,
 * aria-controls, aria-labelledby) – die Ziehharmonika des Kerns wird also nicht
 * angefasst, nur seine Trefferfläche. Das Plus- bzw. Minuszeichen bleibt am
 * rechten Rand stehen, weil es dort erwartet wird; der Titeltext liegt darunter
 * und wird nicht verdeckt (der Knopf hat keine eigene Fläche).
 *
 * Warum nicht data-bs-toggle auf die Überschrift selbst: Eine Überschrift ist
 * kein Bedienelement. Sie wäre weder mit der Tabulatortaste erreichbar noch
 * mit der Leertaste auslösbar, und Vorlesesoftware kündigte sie weiter als
 * Überschrift an – ohne zu sagen, dass sie etwas aufklappt.
 *
 * Ab 768 px bleibt alles wie bisher: Dort blendet die Regel darüber den Knopf
 * aus, alle Links stehen offen, und ein Klick auf die Überschrift tut nichts –
 * genau wie vorher.
 */
@media (max-width: 767px) {
  .footer-column-headline {
    position: relative;
    align-items: center;
    gap: var(--rc-space-3);
    /*
         * Die Zeilenhöhe kam bisher aus dem 48 px hohen Knopf im Fluss –
         * gemessen 8 px Innenmaß oben, 48 px Knopf, 8 px unten = 64 px.
         * Seit der Knopf die Zeile überdeckt, steht er außerhalb des Flusses
         * und trägt nichts mehr zur Höhe bei. Ohne diese Zeile fiele die
         * Zeile auf Texthöhe zusammen (rund 40 px) – unter die geforderten
         * 44 px für ein Klickziel.
         */
    min-height: calc(var(--rc-control-md) + var(--rc-space-4));
  }
  .footer-column-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    min-height: var(--rc-control-md);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
  }
  .footer-column-toggle:hover, .footer-column-toggle:focus-visible {
    color: #fff;
    background: none;
  }
  .footer-column-toggle:focus-visible {
    outline-offset: -2px;
  }
  .footer-column-headline-text {
    padding-right: var(--rc-control-md);
  }
}
/*
 * Fußzeilen-Links als echte Klickziele.
 *
 * Gemessen vorher bei 1440 px: Kasten 68x40 px, Rasterabstand 44 px, also
 * genau 4 px freie Fläche zwischen zwei Klickzielen. Die Vorgabe der
 * Zielgruppe verlangt 44x44 px und mindestens 12 px Abstand – wer den Finger
 * nicht ruhig hält, trifft sonst den Nachbarn.
 *
 * Rechnung nachher: min-height 44 px, Rasterabstand 44 + 12 = 56 px,
 * freie Fläche zwischen den Zielen exakt 12 px.
 *
 * Der Listeneintrag wird dafür zum Flex-Kasten ohne eigenen Innenabstand.
 * Gemessen brachte er aus dem Kern `padding: 2px 0` mit: Rasterabstand 60
 * statt 56 px und 18 statt 16 px zwischen Überschrift und erstem Eintrag –
 * das Raster stimmte auf dem Papier, aber nicht auf dem Schirm. Der Flex-
 * Kasten sorgt zusätzlich dafür, dass der Link die Zeilenhöhe des Eintrags
 * bestimmt und nicht umgekehrt.
 */
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /*
     * Auch in der Breite 44 px.
     *
     * `inline-flex` macht den Kasten so breit wie sein Text. Gemessen am
     * 26.08.2026 hatte „AGB" damit 39x44 px bei 768 und 1440 px und 37x44 px
     * bei 320 und 390 px – in der Höhe getroffen, in der Breite nicht. Die
     * Vorgabe der Zielgruppe verlangt 44x44 px in beiden Richtungen.
     * Der Text bleibt linksbündig (Flex-Vorgabe `flex-start`), die zusätzliche
     * Fläche liegt rechts daneben und ist ohne Hintergrund unsichtbar.
     */
  min-width: 44px;
  padding: 0;
  text-decoration: none;
}
.footer-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link-item {
  display: flex;
  padding: 0;
}
.footer-link-item + .footer-link-item {
  margin-top: var(--rc-space-3);
}
/*
 * ── Kontaktblock: ein Raster statt vier zufälliger Abstände ──────────
 *
 * Der Kontaktblock war bis zum 26.08.2026 ein einziger Textbaustein
 * (`footer.serviceHotline`), in dem <br>-Tags Rufnummer, Zeiten, E-Mail und
 * Anschrift verbanden – vor der Anschrift ein doppelter Umbruch. Gemessen
 * bei 1440 px, Textkasten zu Textkasten:
 *   Telefon   → Zeiten            21,7 px
 *   Zeiten    → E-Mail            29,6 px
 *   E-Mail    → Anschrift         54,0 px   ← die leere Zeile
 *   Anschrift, Zeile zu Zeile      9,3 px
 *   Anschrift → Kontaktformular   41,3 px
 * Bei 390 px dieselben Werte ±0,3 px. Eine leere Zeilenschachtel lässt sich
 * per CSS nicht verkleinern, nur überdecken – deshalb liegt die Trennung
 * jetzt im Markup (drei Elemente, die Anschrift als <address>) und der
 * Abstand hier an EINEM Token.
 *
 * `--rc-space-4` (16px) trennt die drei Gruppen. Sichtbar wird daraus ein
 * Abstand von rund 30 px zwischen den Buchstaben, weil Telefon- und
 * E-Mail-Link je 44 px hoch sind (Klickfläche der Zielgruppe) und ihr Text
 * darin mittig sitzt. Innerhalb der Anschrift bleiben es die 9,3 px der
 * Zeilenhöhe: Gruppe und Zeile sind damit klar unterscheidbar.
 *
 * Kein `justify-items: start`: Die Zeile „Mo–Fr 9–21 Uhr · Sa–So 13–18 Uhr"
 * misst gemessen 302 px und liefe als max-content in schmalen Spalten über
 * den Rand. Die Links sind ohnehin inline und nehmen nur ihre eigene Breite.
 */
.rc-footer-kontakt {
  display: grid;
  gap: var(--rc-space-4);
}
.rc-footer-kontakt p, .rc-footer-kontakt address {
  margin: 0;
}
/*
 * Rufnummer und E-Mail sind Klickziele, kein Fließtext.
 *
 * Beide behalten die 44 px Höhe, die sie vorher schon hatten. Was sich
 * ändert, ist die Rangfolge: Vorher trugen BEIDE 22 px in Fettschrift –
 * gemessen 22px/700 für `tel:` und für `mailto:` –, die E-Mail-Adresse las
 * sich dadurch wie eine zweite Überschrift und stand gleichrangig neben der
 * kostenlosen Rufnummer. Die Nummer bleibt groß und fett, die Adresse geht
 * auf Fließtextgröße zurück (19 px, deutlich über der 17-px-Untergrenze).
 */
.rc-footer-kontakt__tel, .rc-footer-kontakt__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.rc-footer-kontakt__tel:hover, .rc-footer-kontakt__tel:focus-visible, .rc-footer-kontakt__mail:hover, .rc-footer-kontakt__mail:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-footer-kontakt__tel {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-bold);
}
/*
 * Die E-Mail-Adresse bleibt unterstrichen.
 *
 * Sie steht in einem Textblock, nicht in einer Linkliste – die Position
 * verrät hier also nicht, dass man sie anklicken kann, und Farbe allein
 * darf es nach WCAG 1.4.1 nicht tun. Zwei Zeilen tiefer ist der Link
 * „Kontaktformular" aus demselben Grund unterstrichen; ohne diese Regel
 * stünden zwei gleichartige Ziele mit verschiedener Auszeichnung
 * untereinander. Die Rufnummer darüber trägt ihre Aufforderung in Größe
 * und Fettschnitt und braucht die Linie nicht.
 */
.rc-footer-kontakt__mail {
  font-size: var(--rc-fs-base);
  font-weight: var(--rc-fw-regular);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-footer-kontakt__zeiten {
  display: block;
}
.rc-footer-kontakt__anschrift {
  font-style: normal;
  line-height: var(--rc-lh-body);
}
/*
 * Der Hinweis auf das Kontaktformular schließt die Gruppe ab.
 *
 * Gemessen kamen die 41,3 px zur Anschrift aus zwei Quellen: 16 px
 * padding-bottom, die der Kern `.footer-column-content-inner` mitgibt, und
 * 16 px margin-bottom des alten Absatzes. Der Innenabstand entfällt hier,
 * der Abstand kommt aus demselben Token wie die übrigen Gruppen.
 */
.footer-contact .footer-column-content-inner {
  padding-bottom: 0;
}
.footer-contact .footer-contact-form {
  margin-top: var(--rc-space-4);
}
/*
 * Fließtext-Links im Fußbereich: Trefferfläche 44 px, ohne den Satz zu
 * verschieben.
 *
 * Gemessen am 26.08.2026: „Kontaktformular" im Satz unter der Anschrift
 * 142x23 px (1440/768) und 135x21 px (390); „Versand & Lieferung" im
 * Steuerhinweis 182x23 px. Direkt darüber steht mit der E-Mail-Adresse ein
 * gleichartiges Ziel, das 44 px hoch ist – zwei Links derselben Art mit
 * halber Treffhöhe nebeneinander.
 *
 * Senkrechter Innenabstand an einem Inline-Element vergrößert dessen
 * Trefferfläche, aber NICHT die Zeilenschachtel: Der Satz bricht danach an
 * derselben Stelle um und steht auf derselben Höhe. 12 px oben und unten
 * ergeben gemessen 45 px bei 390 px Breite (21 + 24) und 47 px darüber –
 * über der 44-px-Grenze, ohne den Nachbarabstand von 25,3 px aufzubrauchen
 * (13,3 px bleiben frei).
 */
.footer-contact .footer-contact-form a, .footer-main .footer-vat p a {
  padding-top: var(--rc-space-3);
  padding-bottom: var(--rc-space-3);
}
.footer-main {
  background-color: var(--rc-primary);
  color: var(--rc-on-dark);
  border-top: 0;
  padding-top: var(--rc-space-10);
  /*
     * Fußleiste: eigene Fläche, eigener Rhythmus.
     *
     * Vorher padding 16/16 – der dunklere Streifen lag als schmales Band unter
     * den Spalten und wirkte wie ein Rest. 32 px oben und unten machen ihn zu
     * einem eigenen Abschnitt; die Farbfläche übernimmt damit die Trennung,
     * die sonst eine Linie leisten müsste.
     */
  /*
     * Zeilenlänge des Steuer- und Versandhinweises.
     *
     * Gemessen bei 1440 px: 238 Zeichen auf 1408 px Breite in zwei Zeilen,
     * also rund 119 Zeichen je Zeile. Lesbar ist rund die Hälfte davon.
     * `--rc-measure` (66ch) ergibt gemessen 791 px, drei Zeilen, 79 Zeichen.
     */
}
@media (max-width: 767px) {
  .footer-main {
    padding-top: var(--rc-space-8);
  }
}
.footer-main > .container, .cms-section .footer-main > .boxed {
  padding-bottom: var(--rc-space-8);
}
@media (max-width: 767px) {
  .footer-main > .container, .cms-section .footer-main > .boxed {
    padding-bottom: var(--rc-space-7);
  }
}
.footer-main .footer-column-headline, .footer-main .footer-headline {
  color: #fff;
  font-weight: var(--rc-fw-semibold);
}
.footer-main a {
  color: var(--rc-on-dark);
}
.footer-main a:hover, .footer-main a:focus-visible {
  color: #fff;
}
.footer-main .footer-bottom {
  background-color: var(--rc-primary-dark);
  color: rgba(255, 255, 255, 0.7);
  padding-top: var(--rc-space-6);
  padding-bottom: var(--rc-space-6);
}
.footer-main .footer-vat p {
  max-width: var(--rc-measure);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--rc-space-5);
}
.rc-footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rc-space-5) var(--rc-space-8);
  padding-bottom: 0;
  margin-bottom: var(--rc-space-6);
  border-bottom: 0;
}
.rc-footer-meta__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rc-space-2) var(--rc-space-3);
}
/*
 * Schriftgrößen-Untergrenze der Zielgruppe.
 *
 * Auditbefund P1-25: `.rc-footer-meta__label`, `.rc-footer-meta__list li` und
 * `.rc-footer-copyright` messen 16 px – auf allen 20 geprüften Seiten und auf
 * allen Breiten. Untergrenze ist 17 px.
 *
 * Der saubere Weg wäre `--rc-fs-xs` in abstracts/_tokens.scss anzuheben; die
 * Datei gehört zu einem anderen Arbeitsbereich. Deshalb hier lokal auf
 * `--rc-fs-sm` gewechselt und mit max() gegen die zweite Falle abgesichert:
 * _tokens.scss senkt `--rc-fs-sm` unter 768 px selbst auf 16 px. 1.0625rem
 * sind exakt die 17 px, die der Token auf dem Desktop liefert – kein neuer
 * Wert, nur ein Boden. Steigt der Token, gewinnt wieder der Token.
 */
.rc-footer-meta__label {
  opacity: 0.8;
  font-size: max(var(--rc-fs-sm), 1.0625rem);
}
.rc-footer-meta__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-footer-meta__list li {
  padding: var(--rc-space-1) var(--rc-space-3);
  border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
  border-radius: var(--rc-radius-control);
  font-size: max(var(--rc-fs-sm), 1.0625rem);
  white-space: nowrap;
}
.rc-footer-copyright {
  font-size: max(var(--rc-fs-sm), 1.0625rem);
  opacity: 0.8;
}
.footer-main .rc-footer-meta, .footer-main .rc-footer-copyright {
  color: var(--rc-on-dark);
}
.footer-minimal .rc-footer-meta {
  margin-top: var(--rc-space-4);
}
@media (max-width: 767px) {
  .footer-main .footer-bottom {
    padding-bottom: calc(var(--rc-control-lg) + var(--rc-space-5));
  }
}
@media (max-width: 767px) {
  .rc-footer-meta {
    gap: var(--rc-space-4);
  }
  .rc-footer-meta__group {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--rc-space-2);
  }
  .rc-footer-meta__list {
    justify-content: center;
  }
}
/*
 * Vertrauensband über dem Fußbereich – auf jeder Seite außer der Startseite,
 * wo dieselben Angaben als redaktionell änderbarer CMS-Abschnitt stehen.
 *
 * Vier Angaben, jede nachprüfbar: Versandkosten auf der Versandseite, Fristen
 * auf der Rückgabeseite, die Nummer im Kopf. Nichts davon ist eine Zusage,
 * die anderswo nicht eingelöst wird.
 */
.rc-trust-strip {
  background-color: var(--rc-bg);
  border-top: 1px solid var(--rc-border);
  padding: var(--rc-space-6) 0;
}
.rc-trust-strip__list {
  display: grid;
  /*
     * Auf dem Telefon EINE Spalte, nicht zwei.
     *
     * Gemessen am 29.08.2026 bei 360 und 390 px Fensterbreite: Zwei Spalten
     * lassen je Angabe 152 bzw. 167 px übrig. Weil `hyphens: auto` gilt,
     * trennte der Browser darin „Versandkos-tenfrei", „2 Jahre gesetz-liche
     * Gewährleis-tung" und „Aufstehses-seln" – drei Trennungen in vier
     * kurzen Angaben. Die Kacheln wurden dadurch 119 bis 143 px hoch, bei
     * 768 px sind es 48 px.
     *
     * Vier getrennte Wörter über einer Fußzeile sind für 65- bis 80-Jährige
     * kein Detail: Es ist die Stelle, an der der Shop unsauber wirkt. Eine
     * Spalte kostet Höhe, die hier ohnehin gescrollt wird, und liest sich
     * in einer Zeile je Angabe.
     */
  grid-template-columns: 1fr;
  gap: var(--rc-space-5) var(--rc-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 576px) {
  .rc-trust-strip__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .rc-trust-strip__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.rc-trust-strip__list li {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  min-width: 0;
}
.rc-trust-strip__list .icon {
  color: var(--rc-primary);
  width: 26px;
  height: 26px;
}
.rc-trust-strip__list .icon > svg {
  width: 26px;
  height: 26px;
}
.rc-trust-strip__list span {
  display: grid;
  min-width: 0;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  line-height: 1.4;
}
.rc-trust-strip__list strong {
  color: var(--rc-text);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
}
/*
 * Nach layout/cms-layout: Dort stehen noch die älteren .rc-legal-Regeln.
 * pages/service fasst Rechts-, Service- und Ratgeberseiten unter der
 * gemeinsamen Klasse .rc-longform zusammen und muss deshalb später greifen –
 * gemessen liefen die beiden Seitentypen vorher mit unterschiedlicher
 * Absatzbreite (707,8 gegen 791,1 px) und Schriftgröße (17 gegen 19 px).
 */
/*
 * Lange Textseiten: Service, Rechtliches, Ratgeber.
 * ============================================================
 *
 * WARUM ES DIESE DATEI GIBT
 * Vor dieser Datei liefen die 21 Textseiten des Shops in zwei getrennten
 * Regelwerken, die nie miteinander abgeglichen wurden:
 *
 *   .rc-legal            (layout/_cms-layout.scss)  – 11 Service-/Rechtsseiten
 *   .rc-article__content (RehaComfortCms/base.scss) – 10 Ratgeber-Artikel
 *
 * Gemessen am 24.08.2026, Playwright, 1440x1000, Cookie gesetzt:
 *
 *   Merkmal          .rc-legal          .rc-article__content
 *   Fließtext        17 px (mobil 16)   19 px (mobil 18)
 *   Absatzbreite     707,8 px           791,1 px
 *   Listenbreite     796,0 px           828,0 px
 *   H2               27 px, mt 48       34 px, mt 64
 *   H3               22 px, mt 24       27 px, mt 32
 *   Listeneinzug     24 px, mb 16       32 px, mb 24
 *   Tabellenzelle    12/16 px, Zebra    12/12 px, kein Zebra
 *
 * Sieben Merkmale, sieben Abweichungen – auf Seiten, die derselbe Mensch
 * nacheinander liest. Genau das meinte der Betreiber mit „sehen alle
 * unterschiedlich aus".
 *
 * Die Lösung ist eine gemeinsame Klasse `.rc-longform`, die BEIDE Container
 * tragen (gesetzt in `11-service-pages.mjs` bzw. `cms-block-rc-article.html.twig`).
 * Ab hier gibt es das Textseiten-Muster genau einmal.
 *
 * REIHENFOLGE: Diese Datei muss in `base.scss` NACH `layout/cms-layout`
 * eingebunden werden, sonst gewinnt die alte `.rc-legal`-Regel bei gleicher
 * Spezifität (0,1,1).
 */
/*
 * Breite der Textsäule – zwei Klassen mit Absicht.
 *
 * 820 px hatten die Rechtsseiten, 860 px die Ratgeberartikel (über
 * `rc-width-narrow`). Ein Wert, damit Überschrift, Absatz, Liste und Tabelle
 * auf allen 21 Seiten dieselbe linke Kante haben.
 *
 * Der Doppelklassen-Selektor (0,2,1) ist notwendig, nicht kosmetisch:
 * `.rc-width-narrow` steht in `utilities/_sections.scss` und wird als
 * letzte Datei eingebunden. Bei gleicher Spezifität gewönne es mit 860 px.
 * Die Klasse bleibt am Artikel stehen, damit die Seiten auch dann eine
 * Breitenbegrenzung haben, wenn diese Datei einmal nicht mitkompiliert wird –
 * ohne sie messen die Artikel 1360 px.
 */
.rc-legal.rc-longform, .rc-article__content.rc-longform {
  max-width: 820px;
  margin-inline: auto;
}
.rc-longform {
  /*
     * Eine Zeilenlänge für alles.
     *
     * Rechnung statt Schätzung – der Token `--rc-measure` steht auf 66ch und
     * verfehlt sein eigenes Ziel („65–70 Zeichen", _tokens.scss:170):
     *
     *   gemessen 17 px:  1ch = 10,723 px, Absatz 707,8 px, Median 82 Zeichen
     *                    → 707,8 / 82 = 8,632 px je Zeichen
     *   gemessen 19 px:  1ch = 11,986 px, Absatz 791,1 px, Median 83 Zeichen
     *                    → 791,1 / 83 = 9,531 px je Zeichen
     *
     * Die Einheit `ch` bemisst sich an der Ziffer 0, die in dieser Schrift
     * 1,25-mal breiter ist als das mittlere Zeichen deutschen Fließtexts.
     * Für 68 Zeichen (Mitte der Spanne 60–75) folgt daraus:
     *
     *   17 px: 68 × 8,632 = 587,0 px = 54,7ch
     *   19 px: 68 × 9,531 = 648,1 px = 54,1ch
     *
     * Beide Rechnungen treffen sich bei 54ch. Da `ch` mit der Schriftgröße
     * mitwächst, gilt der Wert auf allen drei Breiten.
     *
     * Nachgemessen mit eingespielter Regeldatei: Absatzbreite 647,3 px,
     * Median 65–68 Zeichen, Höchstwert 75. Über alle 13 geprüften Textseiten
     * bei 1440 px fielen die Zeilen über 90 Zeichen von 61 auf 0.
     *
     * Der Token wird hier lokal überschrieben statt global geändert: Auf
     * Produktseiten steht `--rc-measure` in schmaleren Spalten und ist dort
     * nicht der begrenzende Wert.
     */
  --rc-measure: 54ch;
  text-align: left;
  /*
     * Sprungziel unter dem klebenden Kopf.
     *
     * Gemessen im gescrollten Zustand: 142 px (1440), 151 px (768), 70 px
     * (390). Ohne diesen Wert landet die angesprungene Überschrift beim
     * Inhaltsverzeichnis unter dem Kopf und ist nicht zu sehen.
     * 160 px = 96 + 64 deckt den größten gemessenen Wert ab.
     */
  /*
     * Überschriften-Rhythmus.
     *
     * Der Abstand ÜBER einer Überschrift ist viermal so groß wie der
     * darunter. Damit gehört die Überschrift sichtbar zum folgenden Absatz
     * und nicht zum vorherigen – vorher lag das Verhältnis auf den
     * Rechtsseiten bei 48:16 (3:1) und bei H3 sogar bei 24:12 (2:1).
     *
     * Die Größen sind die vorhandenen Tokens, keine neuen Zahlen:
     * 46 / 34 / 27 / 22 px (mobil 34 / 27 / 23 / 20).
     */
  /*
     * Die H1 trägt ihren Token selbst.
     *
     * Ohne diese Zeile erbte sie `base/_typography.scss`: 46 px, unter 767 px
     * 30 px und unter 400 px `--rc-fs-2xl` – also genau den Token, den H2 vier
     * Zeilen weiter unten bekommt. Gemessen am 30.08.2026 bei 360 px auf 21 von
     * 22 Text- und Ratgeberseiten: H1 27,0 px, H2 27,0 px, beide in 600 – auf
     * dem Telefon war die Gliederung nicht mehr zu sehen (bei 1440 px liegen
     * 19 px zwischen den Stufen, bei 360 px lagen 0).
     *
     * `--rc-fs-3xl` ist 46 px und mobil 34 px. Damit stimmt die Skala wieder
     * mit dem, was der Kommentar über diesem Block seit dem 24.08.2026 als
     * Sollwert nennt: 46 / 34 / 27 / 22, mobil 34 / 27 / 23 / 20.
     *
     * Der Grund für die 400-px-Regel in _typography.scss bleibt erfüllt: Die
     * automatische Silbentrennung, die dort für lange Komposita gesetzt wird,
     * gilt weiter – sie und nicht der Schriftgrad hält "Widerrufsbelehrung"
     * in der Zeile.
     */
  /*
     * Fließtext.
     *
     * Vorher `--rc-fs-sm` = 17 px (mobil 16 px). Für die Zielgruppe 65–80
     * nennt docs/14-designsystem-2026.md:48 ausdrücklich 18 px als
     * Untergrenze – die Rechtsseiten lagen mobil darunter.
     * Jetzt `--rc-fs-base` = 19 px / mobil 18 px, wie auf den Ratgeberseiten.
     */
  /*
     * Datumszeile der Ratgeberartikel.
     *
     * Sie steht zwischen H1 und Inhaltsverzeichnis (gesetzt in
     * 09-ratgeber.mjs) und ist eine Angabe über den Text, nicht der Text
     * selbst – deshalb 17 px und gedämpft, wie die übrigen Metaangaben des
     * Shops.
     *
     * Der negative obere Rand ist kein Trick, sondern die einzige Stelle, an
     * der er wirkt: Benachbarte Ränder fallen zusammen, aus den 32 px unter
     * der H1 und den -16 px hier werden 16 px. Die Zeile gehört damit
     * sichtbar zur Überschrift und nicht zum Verzeichnis darunter, das seine
     * vollen 32 px behält.
     */
  /*
     * Ein Listenstil.
     *
     * Vorher brachen Listenpunkte aus der Lesespalte aus: 796 px gegen
     * 707,8 px bei den Absätzen (Datenschutz: 46 von 208 Zeilen über
     * 90 Zeichen). Ursache war, dass nur `p` gedeckelt war.
     * Der Deckel liegt jetzt auf dem Listencontainer und rechnet den Einzug
     * heraus, damit der Listentext exakt so breit läuft wie ein Absatz.
     */
  /*
     * Ein Tabellenstil für Rechts-, Service- und Ratgeberseiten.
     *
     * Vorher gab es zwei: `.rc-legal table` mit 17 px, 12/16 px Zellenabstand
     * und Zebra, `.rc-article__content table` mit 17 px, 12/12 px und ohne
     * Zebra. Jetzt einer, in der Fließtextgröße.
     *
     * Die Versandseite trägt eine Tabelle mit fünf Spalten. In der 820 px
     * breiten Säule blieben je Spalte 164 px; sie bricht deshalb symmetrisch
     * aus der Säule aus (820 + 2 × 80 = 980 px) und bleibt mittig zum Text.
     * Unter 992 px wird sie seitwärts schiebbar.
     */
  /*
     * Der Ausbruch richtet sich nach dem Inhalt, nicht nach der Seite.
     *
     * Vorher stand hier `width: calc(100% + 2 * var(--rc-space-9))` mit einem
     * negativen Rand von 80 px – geschrieben für die fünfspaltige
     * Versandtabelle, angewandt auf jede Tabelle. Gemessen am 30.08.2026 bei
     * 1440 px: Die zweispaltige Tabelle „Bankverbindung" (4 Zeilen) maß 980 px
     * gegen 647 px Absatzbreite und begann bei 245 px, während Überschriften
     * und Absätze derselben Seite bei 311 px beginnen – 66 px Versatz, im Bild
     * als Kante sichtbar. Dasselbe auf „Rückgabe & Retoure" und im Datenschutz.
     *
     * Jetzt bestimmt der Inhalt die Breite:
     *   `width: max-content`  – so breit, wie die Zellen es ohne Umbruch bräuchten
     *   `min-width: 100%`     – mindestens aber die Breite der Textsäule
     *   `max-width`           – und höchstens 80 px über jede Kante hinaus
     * Zweispaltige Tabellen bleiben damit in der Säule und teilen die linke
     * Kante mit Überschrift und Absatz; die Versandtabelle bekommt weiterhin
     * den Platz, den ihre fünf Spalten brauchen (Mindestbreite gemessen:
     * 892 px, mehr als die 820 px der Säule).
     *
     * Warum nicht an die Spaltenzahl gebunden: Das ginge nur mit `:has()`, und
     * `:has()` ist in diesem Projekt gesperrt – scssphp zerlegt es in eine
     * Struktur, über die `Compiler::matchExtends()` stolpert, und der
     * Theme-Build bricht ohne Datei- und Zeilenangabe ab (siehe die
     * ausführliche Notiz in `components/_trust.scss`).
     *
     * Der Rand bleibt `auto` statt negativ: Er zieht nichts mehr nach links
     * über die Textkante hinaus.
     *
     * UND DER AUSBRUCH BEGINNT BEI 1200 PX, NICHT BEI 992 PX.
     * Eine Tabelle kann nicht schmaler werden als ihr längstes Wort je Spalte.
     * Gemessen am 30.08.2026: Die Versandtabelle braucht so 932 px. Bei einem
     * 992 px breiten Sichtfeld steht dafür kein Platz – die alte Regel schob
     * sie mit dem negativen Rand nach links aus dem Textbereich heraus, die
     * neue ließe sie rechts aus dem Bild laufen. Beides ist ein Verlust, den
     * niemand sieht. Unter 1200 px schiebt sich die Tabelle deshalb seitwärts
     * (Regel darunter), darüber ist Platz: gemessen bei 1200 px Sichtfeld
     * 980 px Tabelle, linke Kante 190 px, rechte Kante 1170 px.
     */
  /*
     * Unter 1200 px schiebt sich die Tabelle seitwärts – und sagt das auch.
     *
     * Gemessen am 30.08.2026 bei 360 px auf der Versandseite: sichtbar 320 px,
     * Inhalt 892 px. 572 px – 64 % und darunter Kosten, Dauer und Lieferort –
     * lagen außerhalb des Sichtfelds, ohne dass irgendetwas darauf hinwies:
     * Die Seite selbst läuft nicht waagerecht (360/360), und mobile Browser
     * blenden den Rollbalken über dem Inhalt ein und sofort wieder aus.
     *
     * `-webkit-appearance: none` am Rollbalken schaltet die eingeblendete
     * Variante ab: Der Balken bekommt eigenen Platz unter der Tabelle und
     * bleibt stehen, auch wenn niemand wischt. Gemessen am 30.08.2026 mit
     * `tools/qa/_rep-textseiten-rollbalken.mjs`: ohne die Regel belegt der
     * Balken 17 px Systemhöhe (Schreibtisch) bzw. 0 px (eingeblendet, Telefon),
     * mit der Regel gleichbleibend 10 px.
     *
     * BEWUSST OHNE `scrollbar-color`: Sobald diese Eigenschaft an einem
     * Element steht, ignoriert Blink die `::-webkit-scrollbar`-Regeln
     * desselben Elements – gemessen 17 px statt 10 px, und auf dem Telefon
     * bliebe es beim eingeblendeten Balken. Die Farbgebung ist hier weniger
     * wert als die Sichtbarkeit.
     *
     * Ein Verlaufsschatten auf der Tabelle wäre die zweite Möglichkeit, liegt
     * aber UNTER den Zeilenflächen des Zebras und wäre streifenweise
     * unsichtbar.
     *
     * Die verlässlichere Lösung – je Lieferweg eine Karte mit beschrifteten
     * Zeilen – braucht `data-label` an jeder Zelle. Die Tabelle entsteht als
     * HTML in `tools/migrate/33-versandaussagen.mjs`; ohne diese Beschriftung
     * verlöre eine Kartenansicht die Spaltenbedeutung („2–4 Werktage" ohne
     * „Dauer" davor).
     */
  /*
     * Mobiler Rhythmus.
     *
     * 64 px über jeder von 14 Überschriften (AGB) sind auf 390 px Breite
     * eine halbe Bildschirmhöhe Leerraum je Abschnitt. Die Beträge fallen
     * eine Token-Stufe; das Verhältnis „oben deutlich mehr als unten"
     * bleibt bei mindestens 2,7:1 (48:16, 32:12, 24:8).
     */
}
.rc-longform h1, .rc-longform .h1, .rc-longform h2, .rc-longform .h2, .rc-longform h3, .rc-longform .h3, .rc-longform h4, .rc-longform .h4 {
  scroll-margin-top: calc(var(--rc-space-10) + var(--rc-space-8));
}
.rc-longform h1, .rc-longform .h1 {
  margin-top: 0;
  margin-bottom: var(--rc-space-6);
  font-size: var(--rc-fs-3xl);
}
.rc-longform h2, .rc-longform .h2 {
  margin-top: var(--rc-space-8);
  margin-bottom: var(--rc-space-4);
  font-size: var(--rc-fs-2xl);
  line-height: var(--rc-lh-heading);
}
.rc-longform h3, .rc-longform .h3 {
  margin-top: var(--rc-space-7);
  margin-bottom: var(--rc-space-3);
  font-size: var(--rc-fs-xl);
  line-height: var(--rc-lh-heading);
}
.rc-longform h4, .rc-longform .h4 {
  margin-top: var(--rc-space-6);
  margin-bottom: var(--rc-space-2);
  font-size: var(--rc-fs-lg);
  line-height: var(--rc-lh-heading);
}
.rc-longform > :first-child, .rc-longform .rc-toc + h2, .rc-longform .rc-toc + .h2, .rc-longform .rc-toc + h3, .rc-longform .rc-toc + .h3 {
  margin-top: 0;
}
.rc-longform p, .rc-longform li, .rc-longform dd, .rc-longform dt {
  max-width: var(--rc-measure);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
}
.rc-longform p {
  margin-bottom: var(--rc-space-4);
}
.rc-longform .rc-article__datum {
  margin-top: calc(var(--rc-space-4) * -1);
  margin-bottom: var(--rc-space-6);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
}
.rc-longform .rc-legal__lead, .rc-longform .rc-article__lead {
  max-width: var(--rc-measure);
  margin-bottom: var(--rc-space-6);
  color: var(--rc-text-soft);
  font-size: var(--rc-fs-lg);
  line-height: 1.55;
}
.rc-longform ul, .rc-longform ol {
  max-width: calc(var(--rc-measure) + var(--rc-space-5));
  margin-top: 0;
  margin-bottom: var(--rc-space-5);
  padding-left: var(--rc-space-5);
}
.rc-longform li + li {
  margin-top: var(--rc-space-2);
}
.rc-longform li::marker {
  color: var(--rc-primary);
}
.rc-longform ul ul, .rc-longform ol ol, .rc-longform ul ol, .rc-longform ol ul {
  margin-top: var(--rc-space-2);
  margin-bottom: 0;
}
.rc-longform table {
  width: 100%;
  margin: 0 0 var(--rc-space-6);
  border-collapse: collapse;
  font-size: var(--rc-fs-base);
}
.rc-longform table th, .rc-longform table td {
  padding: var(--rc-space-3) var(--rc-space-4);
  border-bottom: 1px solid var(--rc-border);
  text-align: left;
  vertical-align: top;
  /*
             * Wörter bleiben ganz.
             *
             * Der Kommentar in `layout/_cms-layout.scss` sagt, der Ausbruch
             * auf 980 px habe „Paketver-sand" behoben. Nachgemessen am
             * 24.08.2026 stimmt das nicht: Bei 1440 px zerlegte die Tabelle
             * weiterhin 2 Wörter, bei 768 px 6 und bei 390 px 26.
             *
             * Ursache sind zwei geerbte Regeln, nicht die Breite:
             * `hyphens: auto` (richtig im Fließtext) und
             * `word-break: break-word` (aus dem Shopware-Kern). Beide sagen
             * dem Spaltenalgorithmus, er dürfe jedes Wort zerlegen – also
             * rechnet er mit einer Mindestbreite von einem Zeichen und hält
             * die Spalte schmal, obwohl daneben Platz frei ist.
             *
             * Mit `normal`/`manual` bestimmt das längste Wort die
             * Mindestbreite. Gemessen danach: 0 zerlegte Wörter auf allen
             * drei Breiten; unter 992 px schiebt sich die Tabelle seitwärts
             * (die Seite selbst bleibt ohne Waagerechtlauf).
             */
  hyphens: manual;
  word-break: normal;
  overflow-wrap: normal;
}
.rc-longform table th {
  color: var(--rc-text);
  font-weight: var(--rc-fw-semibold);
}
.rc-longform table thead th, .rc-longform table tr:first-child th {
  border-bottom: 2px solid var(--rc-border-strong);
}
.rc-longform table tbody tr:nth-child(even), .rc-longform table tr:nth-child(even) {
  background-color: var(--rc-bg);
}
@media (min-width: 1200px) {
  .rc-longform table {
    width: max-content;
    min-width: 100%;
    max-width: calc(100% + 2 * var(--rc-space-9));
    margin-inline: auto;
  }
}
@media (max-width: 1199px) {
  .rc-longform table {
    display: block;
    overflow-x: auto;
    /*
             * Die vier Werte nehmen die alte Regel zurück, die für `.rc-legal`
             * in `layout/_cms-layout.scss` ab 992 px noch immer den Ausbruch
             * mit negativem Rand setzt. Gleiche Spezifität (0,1,1), diese
             * Datei wird später eingebunden – ohne diese Zeilen stünde die
             * Tabelle zwischen 992 und 1199 px wieder 80 px links neben dem
             * Text.
             */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
  }
  .rc-longform table::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 10px;
  }
  .rc-longform table::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--rc-border);
  }
  .rc-longform table::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--rc-primary);
  }
}
@media (max-width: 767px) {
  .rc-longform h2, .rc-longform .h2 {
    margin-top: var(--rc-space-7);
  }
  .rc-longform h3, .rc-longform .h3 {
    margin-top: var(--rc-space-6);
  }
  .rc-longform h4, .rc-longform .h4 {
    margin-top: var(--rc-space-5);
  }
}
/*
 * Inhaltsverzeichnis
 * ------------------------------------------------------------
 * AGB (14 Abschnitte), Datenschutz (13) und Widerrufsbelehrung (2 + 6)
 * werden nicht gelesen, sondern durchsucht: „Wie lange habe ich Zeit?",
 * „Wer bekommt meine Daten?". Gemessen bei 390 px Breite hat allein die
 * AGB 572 Textzeilen – ohne Verzeichnis ist der gesuchte Abschnitt nur
 * durch Scrollen zu finden.
 *
 * Bewusst KEIN Kasten mit Radius und Schatten – eine Linie in der
 * Hausfarbe, ruhige Fläche, sonst nichts.
 *
 * ALLES UNTER `.rc-longform` GESCHACHTELT.
 * Gemessen mit eingespielter Regeldatei: Ungeschachtelt verliert
 * `.rc-toc__list` (0,1,0) gegen `.rc-longform ol` (0,1,1) – die Liste
 * bekam den Fließtext-Deckel von 671,3 px statt der vollen Spaltenbreite,
 * und `.rc-toc__title` lief mit 19 statt den vorgesehenen 17 px.
 */
.rc-longform {
  /*
     * Klickfläche 44 px hoch.
     *
     * Vorgabe für die Zielgruppe 65–80: mindestens 44x44 px. Ein
     * Fließtextlink in einer Liste misst gemessen 23 px – für ein
     * Verzeichnis, das ausschließlich zum Antippen da ist, zu wenig.
     */
  /*
     * Zweite Ebene im Verzeichnis.
     *
     * Die Widerrufsbelehrung hat nur zwei H2, darunter aber sechs H3
     * („Einleitung", „Widerrufsrecht", „Folgen des Widerrufs" …). Ein
     * Verzeichnis aus zwei Zeilen hätte niemandem geholfen, eine flache
     * Liste aus acht Zeilen die Gliederung verwischt. Der Einzug ist die
     * kleinste mögliche Auszeichnung: kein zweites Aufzählungszeichen,
     * keine zweite Farbe ausser der gedämpften Textfarbe.
     */
}
.rc-longform .rc-toc {
  max-width: 820px;
  margin: 0 0 var(--rc-space-8);
  padding: var(--rc-space-4) var(--rc-space-5);
  border-left: 3px solid var(--rc-primary);
  background-color: var(--rc-bg);
}
.rc-longform .rc-toc__title {
  max-width: none;
  margin: 0 0 var(--rc-space-2);
  color: var(--rc-muted);
  font-size: var(--rc-fs-sm);
  font-weight: var(--rc-fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.rc-longform .rc-toc__list {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .rc-longform .rc-toc__list {
    columns: 2;
    column-gap: var(--rc-space-6);
  }
}
.rc-longform .rc-toc__list li {
  max-width: none;
  margin: 0;
  break-inside: avoid;
}
.rc-longform .rc-toc__list li::marker {
  content: none;
}
.rc-longform .rc-toc__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--rc-space-1) 0;
  color: var(--rc-text);
  font-size: var(--rc-fs-base);
  line-height: 1.35;
  text-decoration: none;
}
.rc-longform .rc-toc__list a:hover, .rc-longform .rc-toc__list a:focus-visible {
  color: var(--rc-primary);
  text-decoration: underline;
}
.rc-longform .rc-toc__list .rc-toc__sub a {
  padding-left: var(--rc-space-4);
  color: var(--rc-muted);
}
/*
 * „Widerruf erklären"
 * ============================================================
 *
 * Der Block `cms-block-rc-widerruf` war die einzige Vorlage des Shops ohne
 * eine einzige Stilregel: Zu `.rc-widerruf`, `.rc-widerruf__form`,
 * `.rc-widerruf__grid` und `.rc-widerruf__feld` gab es im SCSS beider Plugins
 * null Treffer. Gemessen am 30.08.2026 bei 1440 px:
 *
 *   Formular              1360 px   (Kontaktformular: 818 px)
 *   Anrede / Vorname      1360 px   (Kontaktformular: 267 px)
 *   E-Mail                1360 px   (Kontaktformular: 405 px)
 *   Absätze unter dem Formular 1360 px, 99 Zeichen je Zeile
 *   Absätze über dem Formular   791 px, 59–75 Zeichen je Zeile
 *
 * Zwei Textbreiten auf einer Seite, und die Zeilen unter dem Formular waren
 * der Höchstwert aller 22 Textseiten (Sollobergrenze 85 Zeichen).
 *
 * Ursache: Das Formular hängt an `FORM.rc-widerruf__form > DIV.rc-widerruf`.
 * Die 820-px-Regel aus `layout/_cms-layout.scss` greift nur auf
 * `.cms-element-form`, und diese Klasse trägt der Block nicht – er baut sein
 * Formular selbst, weil er die Kontaktformular-Route mit eigenen Feldern
 * bespielt.
 *
 * Die Werte hier sind keine neuen Zahlen: 820 px ist die Säule der übrigen
 * Textseiten, 54ch die Zeilenlänge von `.rc-longform`, und die Feldbreiten
 * ergeben sich aus zwei gleichen Spalten in dieser Säule (398 px gegen 405 px
 * beim Kontaktformular).
 *
 * NICHT von hier aus zu beheben: Die Überschriftenfolge springt H1 → H3, weil
 * `.rc-widerruf__legend` im Twig eine H3 ist. Die Vorlage liegt in
 * RehaComfortCms und gehört nicht zu diesem Arbeitsbereich.
 */
.rc-widerruf {
  /*
     * Dieselbe Zeilenlänge wie auf allen anderen Textseiten.
     * `.rc-widerruf__intro` trägt `.rc-width-text`, und das liest
     * `--rc-measure` (utilities/_sections.scss). Der Standardwert 66ch ergab
     * gemessen 791 px; 54ch ergibt 647 px und damit 65–68 Zeichen je Zeile.
     */
  --rc-measure: 54ch;
  max-width: 820px;
  margin-inline: auto;
}
.rc-widerruf h1, .rc-widerruf .h1 {
  font-size: var(--rc-fs-3xl);
}
/*
 * Fließtext bleibt in der Lesespalte, auch außerhalb von `.rc-longform`.
 *
 * Bewusst auf die beiden Textbereiche gesetzt und nicht auf `.rc-widerruf p`:
 * Die beiden kurzen Hinweise am Formular (`__hinweis`, `__bestaetigung`) sind
 * Beschriftungen und stehen in 17 px. Ein Selektor aus Klasse plus Element
 * hätte sie mit (0,1,1) überstimmt.
 */
.rc-widerruf__intro p, .rc-widerruf__alternativen p {
  max-width: var(--rc-measure);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-body);
}
.rc-widerruf__form {
  margin-top: var(--rc-space-7);
}
/*
 * Die Überschrift des Formulars.
 *
 * Sie ist im Twig eine H3 und bleibt es. Der Schriftgrad ist deshalb der
 * H3-Token – so groß wie „Es geht auch ohne Formular" weiter unten, das
 * derselben Ebene angehört.
 */
.rc-widerruf__legend {
  margin: 0 0 var(--rc-space-5);
  font-size: var(--rc-fs-xl);
  line-height: var(--rc-lh-heading);
}
/*
 * Zwei Spalten ab 576 px.
 *
 * Acht Felder untereinander sind auf 820 px Breite eine Bildschirmhöhe
 * Formular, bevor der Mustertext überhaupt sichtbar wird. Zwei Spalten halten
 * Anrede/Vorname, Nachname/E-Mail, Bestellnummer/Bestelldatum je zusammen.
 * Der Abstand ist der Formularrhythmus aus `components/_forms.scss` (16 px);
 * quer steht eine Stufe mehr, damit die Spalten als Spalten lesbar bleiben.
 */
.rc-widerruf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-4) var(--rc-space-5);
}
@media (min-width: 576px) {
  .rc-widerruf__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.rc-widerruf__feld {
  margin-bottom: 0;
}
.rc-widerruf__feld--breit {
  grid-column: 1 / -1;
}
.rc-widerruf__erklaerung {
  margin-top: var(--rc-space-6);
}
/*
 * Der Mustertext nach Anlage 2 zu Art. 246a § 1 Abs. 2 EGBGB.
 *
 * Er ist die eigentliche Erklärung – also nicht kleiner als der Fließtext
 * ringsum. `textarea.form-control` steht auf `--rc-fs-sm` (17 px), was für
 * Beschriftungen gedacht ist, nicht für einen Text, den der Kunde liest und
 * ergänzt.
 */
.rc-widerruf__erklaerung textarea.form-control {
  font-size: var(--rc-fs-base);
}
.rc-widerruf__hinweis {
  margin: var(--rc-space-2) 0 0;
  color: var(--rc-text-soft);
  font-size: var(--rc-fs-sm);
}
.rc-widerruf__aktion {
  margin-top: var(--rc-space-6);
}
.rc-widerruf__bestaetigung {
  margin: var(--rc-space-3) 0 0;
  color: var(--rc-text-soft);
  font-size: var(--rc-fs-sm);
}
/*
 * Die formlosen Wege stehen abgesetzt unter dem Formular.
 *
 * § 355 Abs. 1 Satz 2 BGB: Der Widerruf ist an keine Form gebunden. Ohne
 * sichtbare Trennung liest sich der Abschnitt wie eine Fußnote des Formulars,
 * mit ihr wie die gleichwertige Alternative, die er ist.
 */
.rc-widerruf__alternativen {
  margin-top: var(--rc-space-8);
  padding-top: var(--rc-space-6);
  border-top: 1px solid var(--rc-border);
}
.rc-widerruf__alternativen h3, .rc-widerruf__alternativen .h3 {
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-xl);
  line-height: var(--rc-lh-heading);
}
.rc-widerruf__alternativen p:last-child {
  margin-bottom: 0;
}
/*
 * Sektionen – ein Rhythmus für den ganzen Shop.
 * Abstände skalieren zwischen Mobile und Desktop, nie zufällig.
 */
.rc-section {
  padding-top: var(--rc-section-mobile);
  padding-bottom: var(--rc-section-mobile);
}
@media (min-width: 992px) {
  .rc-section {
    padding-top: var(--rc-section-desktop);
    padding-bottom: var(--rc-section-desktop);
  }
}
.rc-section--small {
  padding-top: var(--rc-space-6);
  padding-bottom: var(--rc-space-6);
}
@media (min-width: 992px) {
  .rc-section--small {
    padding-top: var(--rc-space-7);
    padding-bottom: var(--rc-space-7);
  }
}
.rc-section--large {
  padding-top: var(--rc-space-8);
  padding-bottom: var(--rc-space-8);
}
@media (min-width: 992px) {
  .rc-section--large {
    padding-top: var(--rc-space-11);
    padding-bottom: var(--rc-space-11);
  }
}
.rc-surface-soft {
  background-color: var(--rc-bg);
}
.rc-surface-warm {
  background-color: var(--rc-bg-warm);
}
.rc-surface-blue {
  background-color: var(--rc-primary-soft);
}
.rc-surface-dark {
  background-color: var(--rc-primary);
  color: #fff;
}
.rc-surface-dark h1, .rc-surface-dark .h1, .rc-surface-dark h2, .rc-surface-dark .h2, .rc-surface-dark h3, .rc-surface-dark .h3, .rc-surface-dark h4, .rc-surface-dark .h4, .rc-surface-dark p {
  color: inherit;
}
.rc-surface-dark p {
  color: var(--rc-on-dark);
}
/*
 * ACHTUNG, Falle – und derzeit ohne Verwender.
 *
 * Entscheidend ist, wogegen zentriert wird: Direkte Kinder einer
 * Bootstrap-Zeile (`.cms-block-container-row`) messen sich an der Zeile, nicht
 * am CMS-Block. Gemessen am 24.08.2026 auf /Rollatoren/ bei 1440 px: Die Zeile
 * liegt bei x=20 und ist 1400 px breit, der Block daneben bei x=40 mit
 * 1360 px. `margin-inline: auto` ergibt daraus 270 px links – die Kante liegt
 * bei x=290, während jeder andere Block der Seite (H1, Beratungs-CTA, Marken)
 * bei x=40 beginnt. 250 px daneben. Genau das meinte der Betreiber mit „FAQ
 * nicht im Seitenlayout".
 *
 * Beide bisherigen Verwender sind deshalb weg:
 *  - der FAQ-Block nutzt jetzt die volle Blockbreite und begrenzt nur noch
 *    den Antworttext über `--rc-measure` (cms-block-rc-faq.html.twig),
 *  - der Ratgeberartikel nutzt `.rc-longform` mit 820 px, gemeinsam mit den
 *    Service- und Rechtsseiten (cms-block-rc-article.html.twig).
 *
 * Die Regel bleibt vorerst stehen, weil sie auch aus dem CMS-Editor heraus
 * vergeben werden kann. Wer sie neu vergibt, prüfe vorher, ob der Inhalt
 * wirklich allein in seiner Zeile steht – sonst rutscht er wieder aus der
 * Flucht.
 */
.rc-width-narrow {
  max-width: 860px;
  margin-inline: auto;
}
.rc-width-text {
  max-width: var(--rc-measure);
}
.rc-width-wide {
  max-width: var(--rc-container);
  margin-inline: auto;
}
/*
 * Sektionskopf – überall identisch: kurze Überschrift, optional ein
 * erklärender Satz. Kein Eyebrow-Label, keine Dekoration.
 */
.rc-section-head {
  max-width: 720px;
  margin: 0 auto var(--rc-space-7);
  text-align: center;
}
.rc-section-head h2, .rc-section-head .h2 {
  margin-bottom: var(--rc-space-3);
}
.rc-section-head p {
  margin: 0;
  color: var(--rc-muted);
  font-size: var(--rc-fs-lg);
  line-height: 1.55;
}
.rc-section-head--left {
  margin-inline: 0;
  text-align: left;
}
/*
 * ── Trusted-Shops-Umgebung ───────────────────────────────────────────────────
 *
 * Der Import steht hier und nicht in base.scss, weil base.scss zur Zeit von
 * einer anderen Hand bearbeitet wird. utilities/sections ist der letzte Import
 * in base.scss – die Regeln aus components/trust landen damit am Ende der
 * Kaskade, was sie brauchen: Sie überschreiben die Position des
 * Nach-oben-Knopfes aus dem Storefront-Kern.
 *
 * Wer base.scss wieder in der Hand hat, darf die Zeile gern dorthin
 * verschieben – ans Ende der Liste, nicht an den Anfang.
 */
@media (min-width: 768px) {
  .rc-hat-abzeichen .scroll-up-button {
    right: 128px;
  }
}
.rc-panel-offen [id^="trustbadge-container-"] {
  display: none !important;
}
.rc-kaufleiste-an .scroll-up-button {
  bottom: 112px !important;
}
.rc-vergleich-an .scroll-up-button {
  bottom: 92px !important;
}
.rc-kaufleiste-an.rc-vergleich-an .scroll-up-button {
  bottom: 112px !important;
}
.rc-bestellleiste-an .scroll-up-button.is-visible {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rc-dur-btn) var(--rc-ease);
}
.rc-pfeil-im-weg .scroll-up-button.is-visible {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rc-dur-btn) var(--rc-ease);
}
html {
  scroll-padding-bottom: var(--rc-klebehoehe-unten, 0px);
}