/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
  --cnvs-themecolor: #3d3935;
  --cnvs-themecolor-rgb: 61, 57, 53;
}

.card {
  margin-bottom: 20px;
}

.h4-description {
  display: block; /* Entspricht .d-block */
  color: #6c757d; /* Entspricht .text-muted */
  font-weight: normal;
  text-transform: none; /* Hebt Großschreibung auf */
  font-size: 0.875em; /* Typische <small>-Größe, kann angepasst werden */
  margin-top: 0.25rem; /* Optional: etwas Abstand vom Titel */
}

.card-sm {
  font-size: 0.875rem;
}

.tooltip.tooltip-outline {
  --bs-tooltip-bg: #3d3935;
  --bs-tooltip-color: #ffffff;
  --bs-tooltip-opacity: 0.8;
}

.nav-item.sf-custom .nav-link.active {
  background-color: #3d3935;
  border-color: #3d3935;
}

.nav-item.sf-custom .nav-link {
  border: 1px solid #dee2e6;
}

/* Abstand zwischen Nav-Items, aber nur ab 576px */
@media (min-width: 576px) {
  .nav-pills .nav-item.sf-custom:not(:last-child) {
    margin-right: 0.6rem;
  }
}

/* Text im Nav-Item auf kleinen Bildschirmen immer anzeigen 657*/
@media (max-width: 768px) {
  .nav-pills .nav-item.sf-custom span.d-none.d-md-inline-block {
    display: inline-block !important;
  }
}

.product-image .sf-bg-overlay {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s ease;
}

/* Hover-Zustand */
.product-image:hover .sf-bg-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.step-icon-wrapper {
  position: relative;
  display: inline-block;
}

.selected-process-step {
  position: absolute;
  inset: -6px; /* Abstand um den Kreis */
  border: 3px solid #3d3935;
  border-radius: 50%;
  pointer-events: none;
}