/* Card Container */
.card-container {
  /* width: calc(100% - 32px); */
  width: 100%;
  max-width: 450px;
  margin: 24px auto;
  overflow: hidden;
  border-radius: var(--border-radius);
  background-color: transparent;
}

/* Scroll Wrapper */
.scroll-wrapper {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  transition: height 0.2s ease-out;
  gap: var(--spacing-medium);
  padding: 0 var(--spacing-medium);
  margin: 0 calc(var(--spacing-medium) * -1);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Card */
.card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--box-background);
  box-shadow: var(--box-shadow);
}

.card-content {
  padding: var(--spacing-medium);
  min-height: 100px;
}

.card-content h2 {
  margin-bottom: var(--spacing-small);
  font-size: 1.2em;
  color: var(--accent-green);
  font-weight: 700;
}

.card p {
  margin-bottom: var(--spacing-small);
  line-height: 1.5;
  color: var(--text-primary);
}

/* Card Navigation */
.dot-indicator {
  display: flex;
  justify-content: center;
  gap: var(--spacing-large);
  margin-top: var(--spacing-small);
  padding: var(--spacing-xs) 0;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
}

.dot::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
}

.dot.active {
  background-color: var(--accent-blue);
  transform: scale(1.2);
  box-shadow: 0 0 4px rgba(52, 215, 230, 0.6);
}

.dot.active.dot--single-refresh-active {

  /* CHF-Total Dummy-Checkbox */
  .chf-total-checkbox {
    margin-right: 10px !important;
    display: inline-block;

    /* Sicherstellen, dass das Styling für alle Checkboxen mit der Klasse UND dem Typ greift */


    /* Custom CHF-Total Checkbox (reiner CSS-Ansatz, appearance: none) */
    .chf-total-checkbox {
      width: 16px !important;
      height: 16px !important;
      margin-right: 10px;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      appearance: none;
      outline: 1.5px solid var(--accent-yellow);
      border-radius: 4px;
      box-shadow: none;
      background: var(--accent-yellow);
      vertical-align: middle;
      cursor: pointer;
      position: relative;
      transition: outline 0.2s, box-shadow 0.2s;
    }

    .chf-total-checkbox:checked:after {
      content: '✔';
      color: #222;
      /* Schwarz oder var(--primary-bg) */
      font-size: 1em;
      position: absolute;
      left: 2px;
      top: 0px;
      display: inline-block;
      width: 12px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      pointer-events: none;
    }

    accent-color: var(--accent-red);
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: not-allowed;
    opacity: 0.85;
  }

  background-color: var(--accent-red);
  box-shadow: 0 0 6px rgba(251, 128, 107, 0.7);
  /* Optional: etwas stärkerer Glow für Sichtbarkeit */
}