.mdb-tool {
  border: 1px solid var(--area-color-light);
  border-radius: 1.5rem;
}

.mdb-tool .text-muted {
  font-size: 0.95rem;
  line-height: 1.625;
  color: color-mix(in srgb, var(--area-color-light) 80%, transparent);
}
/* Buttons */
.mdb-tool .btn-link {
  background-color: transparent;
  color: #fff;
  min-width: auto !important;
}

.mdb-tool .btn-link:hover {
  background-color: var(--area-color-light);
  color: var(--area-color-dark);
  border-color: var(--area-color-light);
}

.mdb-tool .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
}

.btn.btn-default.btn-outline-default {
  color: var(--area-color-light);
  background: linear-gradient(to right, transparent calc(100% - 40px), var(--area-color-light) 40px);
  border: 1px solid var(--area-color-light);
}
.btn.btn-default.btn-outline-default:hover {
  background-color: var(--area-color-light);
  color: var(--area-color-dark);
}

.btn.btn-default.btn-default-back {
  padding-left: 55px;
  background: linear-gradient(to left, transparent calc(100% - 40px), var(--area-color-light) 40px);
}
.btn.btn-default.btn-default-back::after {
  left: 0;
  transform: rotate(180deg);
}
.btn.btn-default.btn-default-back:hover {
  background-color: var(--area-color-light);
  color: var(--area-color-dark);
}

.btn.btn-default.btn-retry:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'%3E%3C/path%3E%3Cpath d='M3 3v5h5'%3E%3C/path%3E%3C/svg%3E");
  background-size: 21px;
  background-position: center;
}

.btn.btn-default.btn-send:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'%3E%3C/rect%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'%3E%3C/path%3E%3C/svg%3E");
  background-size: 21px;
  background-position: center;
}

.btn.btn-default.btn-copylink:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'%3E%3C/path%3E%3C/svg%3E");
  background-size: 21px;
  background-position: center;
}

.btn.btn-default.btn-sharing:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'%3E%3C/rect%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'%3E%3C/path%3E%3C/svg%3E");
  background-size: 21px;
  background-position: center;
}

/* Alert */
.alert {
  margin: 1.5rem auto;
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-radius: 0.375rem;
}
.alert.alert-danger {
  color: var(--bs-danger-text-emphasis);
  background: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
}
.alert.alert-warning {
  color: var(--bs-warning-text-emphasis);
  background: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
}

/* Steps */
.mdb-tool .circle-round {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
  transition: all 0.3s;
  border: 1px solid var(--area-color-light);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--area-color-light) 15%, transparent);
  color: #fff;

  @media (min-width: 992px) {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.mdb-tool .circle--active {
  background-color: var(--area-color-light);
  color: var(--area-color-dark);
  font-weight: 600;
}

.mdb-tool .circle--complete {
  background-color: #99d0c0;
  border-color: #99d0c0;
  color: var(--area-color-dark);
}

.mdb-tool .step-text {
  font-size: 0.75rem;
  line-height: 1.625;
  color: color-mix(in srgb, var(--area-color-light) 80%, transparent);
}

.mdb-tool .step-text--active {
  color: var(--area-color-light);
}

.mdb-tool .step-text--complete {
  color: #99d0c0;
}

.mdb-tool .step-line {
  border-top: var(--bs-border-width) var(--bs-border-style) color-mix(in srgb, var(--area-color-light), transparent);
}

.mdb-tool .step-line--complete {
  border-color: #99d0c0;
}

/* ===== Wahlkreis Banner ===== */
.mdb-tool .wahlkreis-banner {
  background-color: color-mix(in srgb, var(--area-color-light) 15%, transparent);
  border: 1px solid var(--area-color-light);
  border-radius: 1rem;
}

.mdb-tool .wahlkreis-card {
  background-color: color-mix(in srgb, var(--area-color-light) 10%, transparent);
  cursor: pointer;
  border-radius: 1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mdb-tool .wahlkreis-card--selected,
.mdb-tool .wahlkreis-card:hover {
  background-color: color-mix(in srgb, var(--area-color-light) 20%, transparent);
}

.mdb-tool .wahlkreis-card + .wahlkreis-card {
  margin-top: .75rem;
}

.mdb-tool .wahlkreis-card .badge {
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 9999px;
  border: 1px solid;
  text-align: center;
  padding: 0.125rem 0.625rem;
  margin-left: .5rem;
}
.mdb-tool .wahlkreis-card .badge.badge-partei {
  color: var(--area-color-light);
}
.mdb-tool .wahlkreis-card .badge.badge-cdu {
  background-color: #a9a9a9;
  color: #000000;
}
.mdb-tool .wahlkreis-card .badge.badge-csu {
  background-color: #a9a9a9;
  color: #000000;
}
.mdb-tool .wahlkreis-card .badge.badge-spd {
  background-color: #fee2e2;
  color: #b91c1c;
}
.mdb-tool .wahlkreis-card .badge.badge-gruene {
  background-color: #e2fee2;
  color: #1AA037;
}
.mdb-tool .wahlkreis-card .badge.badge-fdp {
  background-color: #fffacd;
  color: #b8860b;
}
.mdb-tool .wahlkreis-card .badge.badge-linke {
  background-color: #f3e8ff;
  color: #9244d6;
}
.mdb-tool .wahlkreis-card .badge.badge-afd {
  background-color: #dbeafe;
  color: #0489DB;
}
.mdb-tool .wahlkreis-card .badge.badge-bsw {
  background-color: #f0f8ff;
  color: #004B91;
}

/* Briefvorschau */
.mdb-tool .letter-option {
  background-color: color-mix(in srgb, var(--area-color-light) 15%, transparent);
  border: 1px solid var(--area-color-light);
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: left;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}

.mdb-tool .letter-option--selected,
.mdb-tool .letter-option:hover {
  background-color: #fff;
  color: var(--area-color-dark);
}

.mdb-tool .letter-option--selected .text-muted,
.mdb-tool .letter-option:hover .text-muted {
  color: var(--bs-body-color);
}

.mdb-tool .letter-preview {
  background-color: color-mix(in srgb, var(--area-color-light) 20%, transparent);
  border: 1px solid var(--area-color-light);
  border-radius: 1rem;
  max-height: 300px;
  overflow-y: auto;
}

/* Form select */
.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='%23343a40' 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: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  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 .75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* ===== Fade-In Animation ===== */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}