.wf-strong {
    font-family: 'Grotesk-B', sans-serif;
    font-size: 20px;
  }
  .wf-strong span {
      font-weight: normal;
  }
  #shop-wrapper {
    position: relative;
    transition: opacity 0.3s;
  }
  #customer-menu a {
    display: block;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: #EAEAEA;
    padding: 10px;
  }
  #customer-menu a:first-child {
    border-top: 1px solid #EAEAEA;
  }
  #customer-menu a.active {
    background: #d0372c;
    pointer-events: none;
  }
  #customer-menu a.active:hover {
    opacity: 1;
  }
  .customer-downloads {
    gap: 3rem 0;
  }

  .wf-page-shop .customer-link {
    color: #d0372c;
  }
  /* Account Seite */
  
  .downloads-item:first-child {
    border-top: 1px solid #eaeaea;
  }
  .downloads-item {
    border-bottom: 1px solid #eaeaea;
  }
  .downloads-item i {
    color: #eaeaea;
  }
  /* Loading spinner */
    .order-submit-loading {
        position: relative;
        height: 46px;
    }
    .shop-loading-spinner-wide {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 13.33333px;
        transform: translate(-50%, -50%);
        z-index: 100;
    }
    .shop-loading-spinner-wide div {
        position: absolute;
        top: 0;
        width: 13.33333px;
        height: 13.33333px;
        border-radius: 50%;
        background: #d0372c;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }
    .shop-loading-spinner-wide div:nth-child(1) {
        left: 8px;
        animation: lds-ellipsis1 0.6s infinite;
    }
    .shop-loading-spinner-wide div:nth-child(2) {
        left: 8px;
        animation: lds-ellipsis2 0.6s infinite;
    }
    .shop-loading-spinner-wide div:nth-child(3) {
        left: 32px;
        animation: lds-ellipsis2 0.6s infinite;
    }
    .shop-loading-spinner-wide div:nth-child(4) {
        left: 56px;
        animation: lds-ellipsis3 0.6s infinite;
    }
    @keyframes lds-ellipsis1 {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }
    @keyframes lds-ellipsis3 {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(0);
        }
    }
    @keyframes lds-ellipsis2 {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(24px, 0);
        }
    }


  .customer-loading-spinner {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    z-index: 100;
  }
  .customer-loading-spinner div {
    position: absolute;
    border: 4px solid #d0372c;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .customer-loading-spinner div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    4.9% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    5% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      opacity: 0;
    }
  }


  /* Allgemeine Styles (Überschriften, Text, Hintergründe etc.) */
  @media(max-width:575.98px) {
      .p-0-mobile {
          padding: 0;
      }
      .shop-content {
          padding: 0;
      }
  }

  .shop-content .col-12 {
      z-index: 1;
  }
  /* .z-1 {
      z-index: 1;
  } */
  .wf-konfigurator-container {
      margin: auto;
      width: 100%;
  }
  @media (min-width: 992px) {
      .wf-konfigurator-container {
          width: 90%;
          max-width: 992px;
      }
  }
  .customer-main-wrapper {
      background-color: #313131;
      padding: 8rem 0 14rem;
      min-height: calc(100vh - 60px);
  }
  @media (min-width: 768px) {
      .customer-main-wrapper {
          padding: 12rem 0 12rem;
      }
  }
  .shop-content .dark-bg {
      box-shadow: rgb(0 0 0 / 40%) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  }
  .customer-main-wrapper h1 {
      margin-bottom: 0;
      line-height: 1;
  }
  /* .shop-content li {
      list-style-type: '– ';
  } */
  .dark-bg li {
      color: #EAEAEA;
  }
  .customer-title-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
  }
  .customer-actions {
      justify-content: end;
      align-items: flex-end;
  }
  .konfigurator-feba-icon {
      position: absolute;
      top: 50px;
      left: 50px;
      z-index: 0;
      max-width: 450px;
      height: auto;
      user-select: none;
  }
  .wf-sub-headline {
      font-family: 'Grotesk-B', sans-serif;
      font-size: 18px;
  }

  /* Buttons */
  .konfigurator-button-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      align-content: flex-start;
      gap: 10px;
  }
  .konfigurator-button {
      font-family: 'Grotesk', sans-serif;
      border-radius: 25px;
      padding: 5px 20px;
      margin: 0;
  }
  #wf-add-button {
      display: flex;
      align-items: center;
      width: max-content;
      background-color: #D0372C;
      color: #fff;
      flex-direction: row;
      border-radius: 25px;
      gap: 10px;
  }
  #wf-add-button:hover {
      background-color: transparent;
      color: #D0372C;
  }
  .dark-bg #wf-add-button:hover {
      color: #fff;
  }
  #wf-produktauswahl-button {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      margin: 0;
      width: max-content;
      height: fit-content;
      background-color: transparent;
      color: #fff;
      border: 2px solid #fefefe;
      border-radius: 25px;
  }
  #wf-produktauswahl-button:hover {
      background: #fff;
      color: #d0372c;
  }

  .konfigurator-button-wrapper .dropdown-item {
      color: #1F1F1F;
  }
  .konfigurator-button-wrapper .dropdown-item.active, .konfigurator-button-wrapper .dropdown-item:active {
      color: #D0372C;
  }
  .feba-red-bg .wf-button {
      background: none;
      color: #EAEAEA;
      border-color: #EAEAEA;
  }
  .feba-red-bg .wf-button:hover {
      background: #fff;
      color: #d0372c;
  }
  .feba-red-bg .wf-confirm-button {
      background: #fff;
      color: #d0372c;
  }
  .customer-nav-buttons {
      position: absolute;
      bottom: 8rem;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: fit-content;
      min-height: calc(70px + 1rem);
      margin: 0 auto;
      transform: translateY(100%);
  }
  .wf-next-button-wrapper {
      min-height: 46px;
  }
  #wf-next-button {
      color: #FEFEFE;
      border: 1px solid #FEFEFE;
      border-radius: 25px;
      padding: 10px 30px;
      height: auto;
      display: block;
      width: fit-content;
      order: 1;
  }
  #wf-prev-button {
      margin-top: 1rem;
      color: #FEFEFE;
      order: 2;
  }
  .shop-content .wf-button, .modal-body .wf-button, .modal-footer .wf-button {
      border-radius: 25px;
  }
  /* .shop-content .wf-button i {
      font-size: 24px;
  } */
  

  /* Accordion Body */
  .wf-headline {
      font-family: 'Grotesk-B', sans-serif;
      font-size: 20px;
      line-height: 1.5;
      border-bottom: 1px solid #EAEAEA;
  }
  .wf-headline.no-border {
      border-bottom: none;
  }
  /* Accordion Übersichtseite */
  .wf-pos-data {
      display: flex;
      flex-direction: row;
      gap: 3rem;
  }
  .wf-pos-data > * {
      border: 0 solid rgb(255 255 255 / 75%);
      border-bottom-width: 1px;
      padding: 0 2px;
      margin: 0;
  }

  /* Input Felder */
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: rgb(255 255 255 / 50%);
      opacity: 1; /* Firefox */
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: rgb(255 255 255 / 50%);
  }

  ::-ms-input-placeholder { /* Microsoft Edge */
      color: rgb(255 255 255 / 50%);
  }
  .controlls-off::-webkit-inner-spin-button, .controlls-off::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  .controlls-off {
      -moz-appearance: textfield;
  }
  .wf-input-not-allowed {
      opacity: 0.3;
  }
  .wf-input-not-allowed, .wf-input-not-allowed > * {
      cursor: not-allowed;
  }
  .maps-link {
      text-decoration: underline;
  }
  /* .shop-content input {
      background-color: transparent;
      color: rgb(255 255 255 / 100%);
      border: 1px solid rgb(255 255 255 / 75%);
      width: 75%;
  } */
  /* .shop-content label {
      display: block;
  } */
  .wf-page-shop .wf-number-field, .wf-page-shop input, .wf-page-shop .wf-number-field input {
      width: 100%;
      /* max-width: 75%; */
      height: 28px;
      display: flex;
      border: 1px solid rgb(255 255 255 / 75%);
      color: rgb(255 255 255 / 100%);
      background-color: transparent;
      color-scheme: dark;
  }
  /* .wf-page-shop .wf-number-field input {
      width: 100%;
      max-width: 75%;
      display: flex;
      border: 1px solid rgb(255 255 255 / 75%);
      color: rgb(255 255 255 / 100%);
      background-color: transparent;
      color-scheme: dark;
  } */
  .wf-page-shop .wf-number-field {
      flex-grow: 1;
  }
  .wf-page-shop .accordion-button .wf-number-field {
      width: auto;
      border: 0 solid rgb(255 255 255 / 75%);
      border-bottom-width: 1px;
      flex-grow: unset;
  }
  .wf-page-shop .wf-number-field input, .wf-page-shop .accordion-button .wf-number-field input {
      border: none;
      max-width: unset;
  }
  .input-unit {
      padding-left: 5px;
      padding-right: 5px;
      user-select: none;
      align-self: center;
  }
  .wf-select {
      background-color: transparent;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23eaeaea' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
      background-position: right 5px center;
      background-repeat: no-repeat;
      background-size: 16px 12px;
      color: #eaeaea;
      border: 1px solid rgb(255 255 255 / 75%);
      border-radius: 0;
      /* padding: 0 5px; */
      padding: 0 25px 0 5px;
      /* width: calc(75% + 20px); */
      width: 100%;
      height: 28px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .wf-select:focus {
      border-color: unset;
      outline: 0;
      box-shadow: none;
  }
  @media(min-width: 768px) {
      .wf-select {
          max-width: 75%;
      }
      .wf-page-shop .wf-number-field, .wf-page-shop .wf-number-field input, .wf-page-shop input {
          /* max-width: 75%; */
      }
      .wf-page-shop .bestelldetails .wf-number-field, .wf-page-shop .bestelldetails .wf-number-field input, .wf-page-shop .bestelldetails input, .wf-page-shop .bestelldetails .wf-select {
          max-width: 100%;
      }
  }
  /* Datepicker */
  /* ::-webkit-datetime-edit { padding: 1em; }
  ::-webkit-datetime-edit-fields-wrapper { background: silver; }
  ::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
  ::-webkit-datetime-edit-month-field { color: blue; }
  ::-webkit-datetime-edit-day-field { color: green; }
  ::-webkit-datetime-edit-year-field { color: purple; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: orange; } */
  /* Toggle Switch */
  .switch-wrapper {
      display: flex;
      align-items: center;
      height: 28px;
  }
  [data-value^="Ja"] {
      color: #D0372C;
  }
  .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 20px;
  }
  .switch input {
      opacity: 0;
      width: 0;
      height: 0;
  }
  .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: transparent;
      transition: .4s;
      border-radius: 25px;
      border: 1px solid #d0372c;
  }
  .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 1px;
      bottom: 1px;
      background-color: transparent;
      transition: .2s;
      border-radius: 50%;
      border: 2px solid #d0372c;
  }
  input:checked + .slider {
      background-color: #D0372C;
  }
  input:checked + .slider:before {
      transform: translateX(30px);
      border-color: #EAEAEA;
      background-color: #EAEAEA;
  }
  .indicator {
      margin-left: 10px;
  }
  /* Counter */
  .wf-counter.shop-counter {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #EAEAEA;
  }
  .wf-counter.shop-counter button {
      background-color: transparent;
      color: #EAEAEA;
      font-size: 20px;
      line-height: 1;
      padding: 0;
      border: 0;
      transition: .3s ease;
      -webkit-appearance: none; /* WebKit */
      -moz-appearance: none; /* Mozilla */
      -o-appearance: none; /* Opera */
      -ms-appearance: none; /* Internet Explorer */
      appearance: none; /* CSS3 */
  }
  .wf-counter.shop-counter input {
      min-width: 28px;
      width: fit-content;
      text-align: center;
      color: #fff;
      appearance: none;
      outline: 0;
      border: 0;
  }
  .wf-counter.shop-counter span {
      display: block;
      font-size: 25px;
      padding: 0 10px;
      cursor: pointer;
      user-select: none;
  }
  /* Multi Input Fields */
  .wf-checkbox-with-input, .wf-select-with-input {
      display: flex;
      align-items: center;
  }
  .wf-checkbox-with-input {
      gap: 20px;
  }
  .wf-checkbox-with-input .switch-wrapper {
      max-width: calc(50% - 5px);
  }
  .wf-checkbox-with-input .wf-number-field {
      width: calc(50% - 5px);
  }
  .wf-select-with-input .wf-select {
      width: auto;
  }
  .wf-select-with-input .wf-number-field {
      border-left: 0;
  }
  /* Radio Buttons */
  .radio-button-control {
      color: #EAEAEA;
      display: flex;
      gap: 0.5em;
      align-items: start;
  }

  .radio-button-control:not(:last-child) {
      margin-bottom: 0.5rem;
  }

  input[type=radio] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: var(--form-background);
      margin: 0;
      font: inherit;
      color: rgb(255 255 255 / 75%);
      min-width: 18px;
      width: 18px;
      height: 18px;
      border: 0.15em solid #EAEAEA;
      border-radius: 50%;
      transform: translateY(-0.075em);
      display: grid;
      place-content: center;
      margin-top: .25em;
  }
  /* .radio-button-control > span {
      color: rgb(255 255 255 / 50%);
  }
  .radio-button-control > input:checked + span {
      color: #EAEAEA;
  } */

  input[type=radio]::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      border-radius: 50%;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em #D0372C;
      /* Windows High Contrast Mode */
      background-color: CanvasText;
  }

  input[type=radio]:checked::before {
      transform: scale(1);
  }

  /* Checkbox fields */

  .checkbox-control {
      display: flex;
      gap: 0.5em;
      align-items: center;
      color: #EAEAEA;
  }

  .checkbox-control + .checkbox-control {
      margin-top: 0.5rem;
  }

  /* .checkbox-control--disabled {
      color: var(--checkbox-control-disabled);
      cursor: not-allowed;
  } */

  input[type="checkbox"] {
      /* Add if not using autoprefixer */
      -webkit-appearance: none;
      /* Remove most all native input styles */
      appearance: none;
      /* For iOS < 15 */
      background-color: var(--form-background);
      /* Not removed via appearance */
      margin: 0;

      font: inherit;
      color: rgb(255 255 255 / 75%);
      width: 1.15em;
      height: 1.15em;
      border: 0.15em solid #EAEAEA;
      border-radius: 0.15em;
      transform: translateY(-0.075em);

      display: grid;
      place-content: center;
  }

  input[type="checkbox"]::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);
      transform-origin: bottom left;
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em #D0372C;
      /* Windows High Contrast Mode */
      background-color: CanvasText;
  }

  input[type="checkbox"]:checked::before {
      transform: scale(1);
  }

  /* input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
  } */

  /* input[type="checkbox"]:disabled {
      --checkbox-control-color: var(--checkbox-control-disabled);
      color: var(--checkbox-control-disabled);
      cursor: not-allowed;
  } */


  /* Tooltip Toggle */
  .wf-tooltip {
      display: inline-flex;
      /* transform: translateY(-6px); */
      cursor: pointer;
  }
  .wf-tooltip i {
      display: flex;
      font-size: 14px;
  }
  [tooltip] {
      position: relative; /* opinion 1 */
  }

  /* Applies to all tooltips */
  [tooltip]::before,
  [tooltip]::after {
      text-transform: none; /* opinion 2 */
      font-size: .9em; /* opinion 3 */
      line-height: 1;
      user-select: none;
      pointer-events: none;
      position: absolute;
      display: none;
      opacity: 0;
  }
  [tooltip]::before {
      content: '';
      border: 5px solid transparent; /* opinion 4 */
      z-index: 1001; /* absurdity 1 */
  }
  [tooltip]::after {
      content: attr(tooltip); /* magic! */
  
      /* most of the rest of this is opinion */
      /* text-align: center; */
      /* 
      Let the content set the size of the tooltips 
      but this will also keep them from being obnoxious
      */
      min-width: 150px;
      width: fit-content;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 10px;
      box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
      background: #eaeaea;
      color: #1f1f1f;
      z-index: 1000; /* absurdity 2 */
  }

  /* Make the tooltips respond to hover */
  [tooltip]:hover::before,
  [tooltip]:hover::after {
      display: block;
  }

  /* don't show empty tooltips */
  [tooltip='']::before,
  [tooltip='']::after {
      display: none !important;
  }

  /* FLOW: UP */
  [tooltip]:not([flow])::before,
  [tooltip][flow^="up"]::before {
      bottom: 100%;
      border-bottom-width: 0;
      border-top-color: #333;
  }
  [tooltip]:not([flow])::after,
  [tooltip][flow^="up"]::after {
      bottom: calc(100% + 5px);
  }
  [tooltip]:not([flow])::before,
  [tooltip]:not([flow])::after,
  [tooltip][flow^="up"]::before,
  [tooltip][flow^="up"]::after {
      left: 50%;
      transform: translate(-50%, -.5em);
  }

  /* FLOW: DOWN */
  [tooltip][flow^="down"]::before {
      top: 100%;
      border-top-width: 0;
      border-bottom-color: #333;
  }
  [tooltip][flow^="down"]::after {
      top: calc(100% + 5px);
  }
  [tooltip][flow^="down"]::before,
  [tooltip][flow^="down"]::after {
      left: 50%;
      transform: translate(-50%, .5em);
  }

  /* FLOW: LEFT */
  [tooltip][flow^="left"]::before {
      top: 50%;
      border-right-width: 0;
      border-left-color: #333;
      left: calc(0em - 5px);
      transform: translate(-.5em, -50%);
  }
  [tooltip][flow^="left"]::after {
      top: 50%;
      right: calc(100% + 5px);
      transform: translate(-.5em, -50%);
  }

  /* FLOW: RIGHT */
  [tooltip][flow^="right"]::before {
      top: 50%;
      border-left-width: 0;
      border-right-color: #333;
      right: calc(0em - 5px);
      transform: translate(.5em, -50%);
  }
  [tooltip][flow^="right"]::after {
      top: 50%;
      left: calc(100% + 5px);
      transform: translate(.5em, -50%);
  }

  /* KEYFRAMES */
  @keyframes tooltips-vert {
  to {
      opacity: 1;
      transform: translate(-50%, 0);
  }
  }

  @keyframes tooltips-horz {
  to {
      opacity: 1;
      transform: translate(0, -50%);
  }
  }

  /* FX All The Things */ 
  [tooltip]:not([flow]):hover::before,
  [tooltip]:not([flow]):hover::after,
  [tooltip][flow^="up"]:hover::before,
  [tooltip][flow^="up"]:hover::after,
  [tooltip][flow^="down"]:hover::before,
  [tooltip][flow^="down"]:hover::after {
      animation: tooltips-vert 300ms ease-out forwards;
  }
  [tooltip][flow^="left"]:hover::before,
  [tooltip][flow^="left"]:hover::after,
  [tooltip][flow^="right"]:hover::before,
  [tooltip][flow^="right"]:hover::after {
      animation: tooltips-horz 300ms ease-out forwards;
  }
  /* Modals */
  /* @media (min-width:768px) {
      .modal.montagematerial {
          position: absolute;
          top: unset;
          bottom: 0;
          width: auto;
          height: auto;
          transform: translate3d(0, -20%, 0px);
      }
      .modal.montagematerial .modal-dialog {
          margin: 0;
      }
  } */
  .wf-page-shop .modal.fade .modal-dialog {
      transition: transform 0.3s ease-out;
      transform: scale(1.2);
  }
  .wf-page-shop .modal.show .modal-dialog {
      transform: none;
  }
  .wf-page-shop .modal.modal-static .modal-dialog {
      transform: scale(1.02);
  }
  .wf-page-shop .modal-content {
      border-radius: 0;
  }
  .wf-page-shop .modal-header {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .modal .modal-dialog {
      transition: all 0.3s ease;
  }
  /* .customer-main-wrapper .modal.modal-static .modal-dialog {
      transform: scale(1.02);
  } */
  .modal label {
      --bs-text-opacity: 1;
      color: rgba(var(--bs-white-rgb), var(--bs-text-opacity));
  }
  .modal.montagematerial .modal-content {
      border: 1px solid #f1f1f1;
      border-radius: 0;
  }
  .modal.montagematerial .modal-footer {
      justify-content: center;
      padding: 0 0.75rem 0.75rem;
  }
  .modal.produktauswahl .modal-dialog {
      max-width: fit-content;
  }
  @media (min-width: 576px) {
      .modal.wf-voreinstellung-modal .modal-dialog, .modal.wf-montagematerial-modal .modal-dialog, .modal.wf-confirm-modal .modal-dialog, .wf-product-modal .modal-dialog  {
          /* max-width: 750px; */
          max-width: 800px;
      }
      .modal.wf-tooltip-modal .modal-dialog  {
          max-width: 500px;
      }
  }
  .modal-backdrop {
      background-color: #313131;
  }
  .modal-backdrop.show {
      opacity: 0.8;
  }
  /* .wf-tooltip-modal .modal-header, .modal.wf-voreinstellung-modal .modal-header, .modal.wf-product-modal .modal-header {
      border-bottom: 1px solid #fefefe;
  } */

  /* Buttons */
  .wf-modal-button {
      background-color: transparent;
      color: #D0372C;
      font-size: 20px;
      line-height: 1;
      padding: 0 0.5rem;
      border: 0;
      transition: .3s ease;
      -webkit-appearance: none; /* WebKit */
      -moz-appearance: none; /* Mozilla */
      -o-appearance: none; /* Opera */
      -ms-appearance: none; /* Internet Explorer */
      appearance: none; /* CSS3 */
  }
  .wf-modal-close {
      font-size: 26px;
  }
  .wf-modal-button:hover {
      color: rgb(255 255 255 / 50%);
      transform: scale(1.1);
  }
  .wf-confirm-modal .wf-button {
      border-radius: 25px;
  }

  /* Löschbestätigung Modal */
  .feba-red-bg .modal-content {
      background-color: #d0372c;
  }
  .wf-confirm-modal .modal-header {
      border: 0;
  }
  .wf-confirm-modal .modal-header {
      flex-direction: column;
      gap: 1.5rem;
  }
  @media(min-width:576px) {
      .wf-confirm-modal .modal-header {
          flex-direction: row;
          gap: 0;
      }
  }
  /* Tooltip Modal */
  /* .modal-header .bi-info-circle-fill {
      font-size: 22px
  } */


  /* Provisorische Styles */
  input[disabled], input[disabled] + span, .form-select:disabled {
      background-color: unset;
      opacity: 0.6;
  }
  .switch input[disabled] {
      opacity: 0;
  }

  /* Notifications */

  .action-notification {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      width: 100%;
      background: #d0372c;
      color: white;
      overflow: hidden;
      opacity: 0;
      animation: fade-in 10s ease 0.2s forwards;
  }
  .action-notification.wf-5sec {
      animation: fade-in 5s ease 0.2s forwards;
  }
  .action-notification p {
      margin-bottom: 0;
  }

  .notification-text {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
  }
  @keyframes fade-in {
      0% {
      opacity: 0;
      }
      5% {
      opacity: 1;
      }
      50% {
      opacity: 1;
      }
      95% {
      opacity: 1;
      }
      99.9% {
      display: block;
      }
      100% {
      opacity: 0;
      display: none;
      }
  }

  /* Shop Styles */
  .wf-transition-3 {
      transition: 0.3s ease;
  }
  .kategorienbuttons-wrapper.product-filter {
      margin-bottom: 3rem;
      padding: 0 calc(var(--bs-gutter-x) * .5);
      gap: 15px;
  }
  .kategorienbuttons-wrapper.product-filter .col-auto {
      padding: 0;
  }
  .kategorienbuttons-wrapper.product-filter .sort-buttons-button {
      margin: 0;
  }
  .wf-product-modal .modal-title {
      line-height: 1.2;
  }
  .wf-product-modal .downloads-item:hover {
      padding-left: 20px;
  }
    .add-to-cart-wrapper {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 25px;
    }
    .wf-button.add-to-cart, .wf-button.pay-now-btn, .wf-button.modal-checkout-btn {
        display: flex;
        align-items: center;
        background: #D0372C;
        border-color: #D0372C;
        padding: 10px 30px;
        border-radius: 25px;
        gap: 10px;
    }
  
    .wf-button.add-to-cart:hover, .wf-button.pay-now-btn:hover, .wf-button.modal-checkout-btn:hover {
        border-color: #fff;
    }
    .wf-page-show .offcanvas-backdrop.show {
        opacity: .8;
    }
    .offcanvas.offcanvas-cart.checkout.show .wf-button.add-to-cart {
        opacity: 0;
        pointer-events: none;
    }
    .offcanvas.offcanvas-cart.checkout.show .pay-now-btn {
        opacity: 1;
        pointer-events: all;
    }

  /* Warenkorb Styles */
  .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5, .dark-bg h6, .dark-bg p, .dark-bg a, .dark-bg span {
      color: #fff;
  }
  .cart-wrapper {
      display: flex;
      padding: 0 2rem 2rem;
      height: 100%;
  }
  .cart-content {
      max-height: 85%;
  }
  .cart-item-variant-details span {
      color: #a5a5a5;
  }
  .cart-item-actions .cart-item-delete {
      font-size: 22px;
      height: 28px;
      padding: 0 5px;
  }
  /* Warenkorb Offcanvas Scrollbar */
  .offcanvas-cart.scroll-finished .offcanvas-body::-webkit-scrollbar {
      background: rgb(255 255 255 / 25%);
      height: 2px;
      width: 6px;
  }
  .offcanvas-cart.scroll-finished .offcanvas-body::-webkit-scrollbar-thumb {
      background-color: #ffffff;
  }
  /* Warenkorb Produkte Scrollbar */
  .cart-content::-webkit-scrollbar {
      background: rgb(255 255 255 / 25%);
      height: 2px;
      width: 6px;
  }
  .cart-content::-webkit-scrollbar-thumb {
      background-color: #ffffff;
  }

  .cart-btn {
      background-color: #d0372c;
      color: #F2F2F2;
      padding: 5px 24px;
      font-family: Grotesk-B, sans-serif;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      user-select: none;
      cursor: pointer;
      appearance: none;
      border: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      transition: 0.4s ease;
  }
  .cart-btn i {
      font-size: 20px;
  }

  .cart-item img {
      width: 100%;
      background-color: #fff;
      aspect-ratio: 3/2;
      object-fit: cover;
  }
  .offcanvas-cart {
      width: auto;
      left: 0;
      transition: transform .3s ease-in-out, width .3s ease-in-out;
      border-radius: 30px;
      margin: 15% 15px;
      overflow: hidden;
  }
  @media(min-width: 768px) {
      .offcanvas-cart {
          margin: 50px 50px;
      }
  }
  .offcanvas.offcanvas-cart.checkout.show {
      transform: none;
  }
  .offcanvas-cart .offcanvas-header {
      position: relative;
      padding: 0;
  }
  .offcanvas-cart .offcanvas-header .btn-close {
      padding: .5rem .5rem;
      position: absolute;
      top: 50%;
      right: 2rem;
      bottom: 0;
      transform: translateY(-50%);
      margin: 0;
  }
  .offcanvas-cart .offcanvas-body {
      display: flex;
      margin-top: 0;
      flex-direction: column;
      flex-grow: unset;
  }
  .offcanvas-title {
      padding: 2rem 2rem;
      transition: opacity 0.3s ease;
  }
  .offcanvas-title.fade-out {
      opacity: 0;
  }
  .checkout-title .offcanvas-title {
      background-color: #151515;
  }
  @media(min-width:992px) {
      .offcanvas-cart {
          left: unset;
          width: 900px;
          border-radius: 30px 0 0 30px;
          margin: 25px 0;
      }
      .offcanvas.offcanvas-cart.show {
          transform: translateX(50%);
      }
  }
  @media(min-width:1200px) {
      .offcanvas-cart {
          width: 1000px;
      }
  }
  
  /* Checkout Styles */
  .checkout-wrapper {
    position: relative;
    padding: 0 2rem 2rem;
    background-color: #151515;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .checkout-wrapper::-webkit-scrollbar {
      background: rgb(255 255 255 / 25%);
      height: 2px;
      width: 6px;
  }
  .checkout-wrapper::-webkit-scrollbar-thumb {
      background-color: #ffffff;
  }
  #agb-checkbox+span a {
      color: #D0372C;
  }
  .checkout-action-buttons {
      gap: 15px;
  }
.back-to-cart-btn {
    background: transparent;
    border-color: #EAEAEA;
    padding: 10px 30px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

  /* Floating Label */
  /* Container für das Feld mit Floating Label */
  .wf-floating-field {
      position: relative;
  }

  /* Das eigentliche Eingabefeld */
  .wf-floating-field input {
      width: 100%;
      height: unset;
      /* Wichtig: Padding oben, um Platz für das Label zu schaffen, wenn es "schwebt" */
      padding: 18px 10px 6px;
      border: 1px solid #fff; /* Ihre Rahmenfarbe, hier ein helles Grau */
      border-radius: 0;
      font-size: 14px;
      color: #fff;
      background-color: transparent; /* Hintergrundfarbe des Feldes */
      transition: all 0.2s ease;
      color-scheme: dark;
  }

  /* Das Label im Normalzustand (sieht aus wie ein Placeholder) */
  .wf-floating-field label {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
      color: #fff; /* Farbe des Platzhalter-Textes */
      font-size: 14px;
      pointer-events: none; /* Erlaubt Klicks "durch" das Label auf das Input-Feld */
      transition: all 0.2s ease-out;
  }

  /* 
  * Der magische Teil:
  * Wenn das Input-Feld den Fokus hat ODER wenn es nicht mehr den (leeren) Platzhalter anzeigt
  * (also wenn Text drinsteht), wird das Label animiert.
  */
  .wf-floating-field input:focus + label,
  .wf-floating-field input:not(:placeholder-shown) + label {
      top: 5px; /* Nach oben bewegen */
      transform: unset;
      font-size: 11px; /* Schrift verkleinern */
      color: #fff; /* Farbe ändern, um Aktivität zu signalisieren */
  }




  /* --- Offcanvas Mobile Checkout Styles --- */

  /* Der gemeinsame Container MUSS position: relative haben. */
.offcanvas-body {
    position: relative;
}

/* Beide Wrapper erhalten eine Transition für die Deckkraft (opacity). */
.cart-wrapper,
.checkout-wrapper {
    transition: opacity 0.3s ease-in-out;
}

@media (max-width:991.98px) {
    .cart-wrapper {
        opacity: 1;
        position: relative; /* oder relative */
    }
    .checkout-wrapper {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        pointer-events: none; /* Verhindert Interaktionen im unsichtbaren Zustand */
    }
}

.mobile-checkout-active .cart-wrapper {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    background-color: #151515;
    transition: 0.2s ease;
    visibility: hidden;
}

/* 2. Der checkout-wrapper wird sichtbar und in den Layout-Fluss
      zurückgebracht, sodass er den Platz einnimmt und die Höhe bestimmt. */
.mobile-checkout-active .checkout-wrapper {
    opacity: 1;
    position: static;
    pointer-events: auto;
}


  /* Standardzustand der Titel */
  .offcanvas-header .checkout-title {
      display: none;
  }

  /* Übergang für die Titel */
  .offcanvas-header .offcanvas-title {
      transition: opacity 0.2s ease-in-out;
  }
  @media(min-width:992px) {
      .offcanvas-header .cart-title,
      .offcanvas-header .checkout-title {
          display: block !important;
          opacity: 1 !important;
      }
  }

  /* Zustand, wenn der mobile Checkout aktiv ist */
  /* Titel umschalten */
  .offcanvas-cart.mobile-checkout-active .cart-title {
      opacity: 0;
      pointer-events: none;
  }
  .offcanvas-cart.mobile-checkout-active .checkout-title {
      display: block; /* Erst sichtbar machen */
      opacity: 1;
  }
  @media (max-width: 991.98px) {
      /* Standardzustand der Wrapper auf Mobilgeräten */
      .offcanvas-cart .checkout-wrapper {
          display: none;
      }
      .offcanvas-cart.mobile-checkout-active .checkout-wrapper {
          display: flex; /* oder block, je nach Layout */
          flex-direction: column;
      }
      .offcanvas-cart.mobile-checkout-active .cart-title {
          display: none;
      }
      .offcanvas-header .checkout-title {
          display: none;
          opacity: 0;
      }
      .offcanvas-cart.mobile-checkout-active .checkout-title {
          display: block;
          opacity: 1;
      }
      /* Wrapper umschalten auf Mobilgeräten */
      /* .offcanvas-cart.mobile-checkout-active .cart-wrapper {
          display: none;
      } */

        
      .offcanvas-cart.titles-swapped .cart-title {
          opacity: 0;
      }
      .offcanvas-cart.titles-swapped .checkout-title {
          opacity: 1;
      }
  }

  /* Loading Spinner */
  .konfigurator-loading-spinner {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    z-index: 100;
  }
  .konfigurator-loading-spinner div {
    position: absolute;
    border: 4px solid #d0372c;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .konfigurator-loading-spinner div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    4.9% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    5% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      opacity: 0;
    }
  }



/* uebersicht.php */

/* Filters */
.product-filter .wf-button:not(.active) {
    background: transparent;
    color: #fff;
}
/* Cards */
#productRow {
    --product-cards-gap: 1px;
    column-gap: var(--product-cards-gap);
}



@media(min-width:768px) {
    #productRow .product-card.col-md-6 {
        width: calc(50% - calc(var(--product-cards-gap) / 2));
    }
}
@media(min-width:992px) {
    #productRow .product-card.col-lg-4 {
        width: calc(33.33333333% - calc(calc(var(--product-cards-gap) * 2) / 3));
    }
}
.product-card {
    transition: .2s ease;
    padding: 1.5rem;
}
.product-card:hover {
    background-color: #151515;
}
.product-card .card {
    background-color: transparent;
    border-radius: 0;
}
.product-card-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 3/2;;
    background-color: #f8f9fa;
    /* border-bottom: 1px solid #dee2e6; */
    overflow: hidden;
}
.product-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-card-image-placeholder-icon {
    font-size: 3rem;
    color: #6c757d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.product-card-image-placeholder-icon.img-error { /* Spezifischer für Bildladefehler */
        /* display: none; initial */
}
.product-title {
    font-size: 18px;
    font-family: Grotesk, sans-serif;
}
.product-category {
    font-size: 14px;
    color: #D0372C;
}
.card-text-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1.5rem;
}
.price-display {
    font-size: 1.5rem;
    font-family: Grotesk-B, sans-serif;
}
.product-card .card-text-description {
    color: #adadad;
}
.product-card .wf-button {
    background: none;
    color: #d0372c;
    padding: 0;
    border: 0;
    text-align: right;
    font-family: 'Grotesk';
    opacity: 0;
    transition: .2s ease;
}
.product-card .wf-button:hover {
    color: #d0372c;
    opacity: 1;
}
@media (hover: none) and (pointer: coarse) {
    .product-card .wf-button {
        opacity: 1 !important;
    }
}

.modal-image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 3/2;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    overflow: hidden;
    width: 100%;
}
.modal-image-placeholder img {
    object-fit: cover;
}   
.modal-image-placeholder i {
    font-size: 3rem;
    color: #6c757d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.modal-gallery-thumb {
    height: 60px;
    width: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover; 
    cursor: pointer;
}

/* Produkte Trennlinien */
.product-card::before, .product-card::after {
    /* transition: .2s ease; */
}
@media( max-width: 767.98px ) {
    .product-card:after, .product-card:before {
        content: "";
        position: absolute;
        height: 1px;
        left: 1rem;
        right: 1rem;
        background: #adadad;
    }
    .product-card:before {
        top: -1px;
    }
    .product-card:after {
        bottom: 0;
    }
    .product-card:hover::before,
    .product-card:hover::after {
        left: 0;
        right: 0;
    }

}

@media (min-width: 768px) {
    .product-card:hover::before,
    .product-card:hover::after {
        top: 0;
        bottom: 0;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .product-card:not(:nth-child(2n)):after, .product-card.product-card-md-1::after {
        right: -1px;
        content: "";
        position: absolute;
        width: 1px;
        background: #adadad;
        top: 24px;
        bottom: 24px;
    }
    .product-card:not(:nth-child(odd)):before, .product-card.product-card-md-2::before {
        left: -1px;
        content: "";
        position: absolute;
        width: 1px;
        background: #adadad;
        top: 24px;
        bottom: 24px;
    }
    .product-card.lines-reset::before, .product-card.lines-reset::after {
        width: 0;
    }
    .product-card.product-card-md-1::after {
        width: 1px;
    }
    .product-card.product-card-md-2::before {
        width: 1px;
    }
}
@media (min-width: 992px) {
    /* Erste Karte in der Zeile: rechte Linie */
    .product-card:nth-child(3n+1)::after, .product-card.product-card-lg-1::after {
        content: "";
        position: absolute;
        right: -1px;
        top: 1.5rem;
        bottom: 1.5rem;
        width: 1px;
        background: #adadad;
    }

    /* Zweite Karte in der Zeile: linke + rechte Linie */
    .product-card:nth-child(3n+2)::before, .product-card.product-card-lg-2::before,
    .product-card:nth-child(3n+2)::after, .product-card.product-card-lg-2::after {
        content: "";
        position: absolute;
        top: 1.5rem;
        bottom: 1.5rem;
        width: 1px;
        background: #adadad;
    }
    .product-card:nth-child(3n+2)::before, .product-card.product-card-lg-2::before {
        left: -1px;
    }
    .product-card:nth-child(3n+2)::after, .product-card.product-card-lg-2::after {
        right: -1px;
    }

    /* Dritte Karte in der Zeile: linke Linie */
    .product-card:nth-child(3n)::before, .product-card.product-card-lg-3::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 1.5rem;
        bottom: 1.5rem;
        width: 1px;
        background: #adadad;
    }
    .product-card:hover::before,
    .product-card:hover::after {
        top: 0;
        bottom: 0;
    }
    .product-card.lines-reset::before, .product-card.lines-reset::after {
        width: 0;
    }
    .product-card.product-card-lg-1:not(.product-card-lg-max-1):not(.product-card-lg-max-4)::after {
        width: 1px;
    }
    .product-card.product-card-lg-2::before, .product-card.product-card-lg-2:not(.product-card-lg-max-2)::after {
        width: 1px;
    }
    .product-card.product-card-lg-3::before {
        width: 1px;
    }
    .product-card:last-of-type::after, .product-card.product-card-last::after {
        width: 0 !important;
    }

}


/* Welcome Modal */
.wf-welcome-modal .wf-button-wrapper {
    align-items: center;
    justify-content: center;
}
.wf-welcome-modal .wf-guest-close {
    font-family: 'Grotesk', sans-serif;
    line-height: 1.5;
    background: none;
    border: none;
    box-shadow: none;
    font-size: var(--bs-body-font-size);
    appearance: none;
    color: #eaeaea;
    transition: .4s ease;
}
.wf-welcome-modal .wf-guest-close:hover {
    color: #d0372c;
}
.wf-button.wf-sign-in-button, .wf-button.wf-keep-cart-button {
    background: #eaeaea;
    color: #1F1F1F;
}
.wf-button.wf-sign-in-button:hover, .wf-button.wf-register-button:hover, .wf-button.wf-keep-cart-button:hover, .wf-button.wf-clear-cart-button:hover  {
    background-color: #d0372c;
    color: #eaeaea;
    border-color: #d0372c;
}
.wf-welcome-modal .modal-body i {
    font-size: 3rem;
}
.wf-welcome-modal .wf-benefits p {
    padding: 0 5px;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}
@media (min-width: 576px) {
    .modal.wf-welcome-modal .modal-dialog, #existingCartModal .modal-dialog {
        max-width: 800px;
    }
}
.wf-welcome-modal .dark-bg {
    box-shadow: rgb(0 0 0 / 40%) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}