/* Link zum Widerrufsformular */
/* "normale" Farbe */
ul.content_box_list li.withdraw_link > a,
ul.content_box_list li.withdraw_link > a span {
  color: #ffe7e7 !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* Farbe bei Mouse-over */
ul.content_box_list li.withdraw_link > a:hover,
ul.content_box_list li.withdraw_link > a span:hover {
  font-size: 15px !important;
  text-decoration: none !important;
  color: orange !important;
}
/* Farbe auf Widerruf-Seite */
ul.content_box_list li.withdraw_link > a.active {
  color: var(--footer_box_header_active, #ff0000) !important;
}


/* Optional: Breite des Containers anpassen, falls nötig */
div.col_withdraw {
  width: auto; /* Passt die Breite automatisch an den Inhalt an */
  margin-left: 10px; 
}

/* Custom Roter Button/Link mit abgerundeten Ecken */
.btn_red_revocations {
  display: inline-flex;                   /* Flexbox für zentrierten Inhalt */
  height: 40px;                           /* Feste Höhe für den Button */
  align-items: center;                    /* Vertikal zentrieren */
  justify-content: flex-start;            /* Verhindert das Springen des Icons beim Aufklappen */
  gap: 0;                                 /* Abstand zwischen Icon und Text */
  background-color: #e32828 !important; /* Das originale modified-Rot */
  color: #ffffff !important;            /* Weißer Text */
  padding: 0 8px;                         /* Innenabstand (oben/unten, links/rechts) */
  border: 2px solid #8d0000 !important; /* Roter Rand */
  border-radius: 20px;                    /* Abgerundete Ecken */
  text-decoration: none !important;       /* Entfernt den Standard-Unterstrich */
  /* Sanfter Übergang für die Breite und Hintergrundfarbe */
  transition: all 0.3s ease-in-out;
  overflow: hidden;                       /* Wichtig: Schneidet den Text ab, solange er unsichtbar ist */
  white-space: nowrap;                    /* Verhindert, dass der Text während der Animation umbricht */
}

/* Der Text-Container im Button */
.btn_red_revocations .btn-text {
  max-width: 0;                /* Initial auf 0 gesetzt (unsichtbar) */
  opacity: 0;                  /* Komplett transparent */
  display: inline-block;
  transition: max-width 0.3s ease-in-out, opacity 0.2s ease-in-out, margin 0.3s ease-in-out;
}

/* --- HOVER EFFEKT --- */
.btn_red_revocations:hover {
  background-color: #bd1f1f;   /* Leicht dunkleres Rot beim Hovern */
}

.btn_red_revocations:hover .btn-text {
  max-width: 140px;            /* Ein ausreichend großer Wert, damit der Text reinpasst */
  opacity: 1;                  /* Text wird sichtbar */
  margin-left: 10px;           /* Schafft den Abstand zum Icon erst beim Aufklappen */
}

/* Hover-Effekt beim Darüberfahren */
.btn_red_revocations:hover {
  background-color: #bd1f1f !important; /* Etwas dunkleres Rot beim Hovern */
  text-decoration: none !important;
  /*transform: translateY(-1px);*/  /* Minimaler Hebe-Effekt */
}

.btn_red_revocations > i {
  width: 20px; 
  font-size: 16px; 
  padding-left: 2px;
}